/*
 * -- BASE STYLES --
 * Most of these are inherited from Base, but I want to change a few.
 */
body {
    color: #526066;
    font-size: 9px;
}


h1 {
    letter-spacing: 0.25em;
    font-weight: 500;
}

h2, h3 {
    letter-spacing: 0.15em;
    text-transform: uppercase;
    /*font-weight: 300;*/
}

h4 {
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 550 !important;
    color: #FFFFFF
}

p {
    line-height: 1.6em;
}


/*
 * -- Layout Styles --
 */
.l-content {
   margin: 0 auto;
}

.l-box {
    padding: 0.5em 2em;
}

/*
 * -- MENU STYLES --
 * Make the menu have a very faint box-shadow.
 */
.pure-menu {
    /*box-shadow: 0 1px 1px rgba(0,0,0, 0.10);*/
    box-shadow: 0 0 0 0;
}


/*
 * -- BANNER --
 * The top banner with the headings. By using a combination
 * of `display: table;` and `display: table-cell;`, we can
 * vertically center the text.
 */

.select-banner {
    text-align: left;
    color: black;
}

.banner {
    /*background: transparent url('http://24.media.tumblr.com/ccb268832580ac12951828a1c179de69/tumblr_mo2xbk8JUK1st5lhmo1_1280.jpg') 0 0 no-repeat fixed;*/
    text-align: center;
    /*background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://24.media.tumblr.com/ccb268832580ac12951828a1c179de69/tumblr_mo2xbk8JUK1st5lhmo1_1280.jpg', sizingMethod='scale');*/

    /*height: 200px;*/
    width: 100%;
    /*margin-bottom: -9em;
    margin-top: -4.5em;*/
    display: table;
}

    .banner-head {
        display: table-cell;
        vertical-align: middle;
        width: 100%;
        margin-bottom: 0;
        font-size: 2em;
        color: white;
        font-weight: 500;
        /*text-shadow: 0 1px 1px black;*/
    }



/*
 * -- PRICING TABLE WRAPPER --
 * This element wraps up all the pricing table elements
 */
 .pricing-tables,
 .information {
    margin-left: 0 auto;
 }
.pricing-tables {
    text-align: center;
}

/*
 * -- PRICING TABLE  --
 * Every pricing table has the .pricing-table class
 */
/*Here!!!*/
.pricing-table {
    border: 1px solid #ddd;
    /*border: 1px solid #c74646;*/
    margin: 0 10% 3em 10%;
    padding: 0 0 0.8em;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    /*height: 400px;*/
    /*height: 100%;*/
}

.more {
    border: 0;
    margin: 0 0.5em 1em;
    padding: 0 0 1em;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

.pricing-table .pricing-table-header {
    border: 1px solid #ddd;
    /*padding: 0 0 1em 0;*/
    padding: 1.2em 0 1.2em 0;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

.pricing-table-header span {
    margin-top: 2em; !important;
    line-height: 150%;
    font-weight: 200;
}

/*
 * -- PRICING TABLE HEADER COLORS --
 * Choose a different color based on the type of pricing table.
 */
.pricing-table-developer .pricing-table-header {
    background: #1e3d7b;
    padding: 1em 0 1em 0;
    color: #fff;
    /*height: 100px;*/
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

.pricing-table-project .pricing-table-header {
    background: #4675d2;
    padding: 1em 0 1em 0;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

.pricing-table-pilot .pricing-table-header {
    background: #4675d2;
    padding: 1em 0 1em 0;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

.pricing-table-personal .pricing-table-header {
    background: #2851a4;
    padding: 1em 0 1em 0;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

.pricing-table-workgroup .pricing-table-header {
    background: #2851a4;
    padding: 1em 0 1em 0;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

.pricing-table-department .pricing-table-header {
    background: #1e3d7b;
    padding: 1em 0 1em 0;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

.pricing-table-ami1 .pricing-table-header {
    background: #4675d2;
    padding: 1em 0 1em 0;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

.pricing-table-ami2 .pricing-table-header {
    background: #2851a4;
    padding: 1em 0 1em 0;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

.pricing-table-ami3 .pricing-table-header {
    background: #1e3d7b;
    padding: 1em 0 1em 0;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

/*
 * -- PRICING TABLE HEADER --
 * By default, a header is black/white, and has some styles for its <h2> name.
 */
.pricing-table-header {
    background: #111;
    color: #fff;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;

}

.pricing-table-header h2 {
    margin: 0;
    padding-top: 1.2em;
    padding-bottom: 0.2em;
    font-size: 0.7em;
    font-weight: normal;
}

.pricing-table-header h4 {
    font-style: normal;
    margin-bottom: 1em !important;
}

/*
 * -- PRICING TABLE PRICE --
 * Styles for the price and the corresponding <span>per month</span>
 */
.pricing-table-price {
    font-size: 1.0em;
    margin: 0.2em 0 0;
    font-weight: 80;
}
    .pricing-table-price span {
        display: block;
        /*text-transform: uppercase;*/
        font-size: 0.2em;
        /*padding-bottom: 1em;*/
        font-weight: 200;
        /*color: rgba(255, 255, 255, 0.5);*/
        color: #fff;
    }



/*
 * -- PRICING TABLE LIST --
 * Each pricing table has a <ul> which is denoted by the .pricing-table-list class
 */
.pricing-table-list {
    list-style-type: none;
    margin: 0;
    font-size: 12px;
    padding: 0;
    text-align: center;
}


/*
 * -- PRICING TABLE LIST ELEMENTS --
 * Styles for the individual list elements within each pricing table
 */
.pricing-table-list li {
    line-height: 1.5em;
    padding: 1em 0 1em 0;
    background: #f7f7f7;
    color: #000000 ;
    margin: 0;
    border-bottom: 1px solid #e7e7e7;
}

.pricing-table-list > a {
    line-height: 3em;
    padding: 1em 0 1em 0;
    margin: 0;
    border-bottom: 1px solid #e7e7e7;
}

/*
 * -- PRICING TABLE BUTTON --
 * Styles for the "Choose" button at the bottom of a pricing table.
 * This inherits from Pure Button.
 */
.button-choose {
    border: 1px solid #ccc;
    background: #fff;
    color: #333;
    border-radius: 1em;
    font-weight: bold;
    margin-top: 1em;
    /*position: relative;*/
    /*bottom: -1.5em;*/
}

.information-head {
    color: black;
    font-weight: 500;
}



.buy {
    border: 1px solid #ddd;
    padding: 0 0 0 0;
    line-length: 40px;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width: 200px;
}


.styled-family {
   background: #FAFAFA ;
   width: 205px;
   padding: 5x;
   font-size: 12px;
   line-height: 1;
   border: 1;
   border-radius: 0;
   height: 26px;
   box-sizing: content-box;
   -moz-box-sizing: content-box;
   -webkit-box-sizing: content-box;
   border: solid 1px silver;
   }

.styled-driver {
   background: #FAFAFA ;
   width: 380px;
   padding: 5x;
   font-size: 12px;
   line-height: 1;
   border: 1;
   border-radius: 0;
   height: 26px;
   box-sizing: content-box;
   -moz-box-sizing: content-box;
   -webkit-box-sizing: content-box;
   border: solid 1px silver;
   }

.button-def {
	  background-color: #FAFAFA;
    border: 1px solid #ccc;
    color: black;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 1em;
    font-size: 12px;
    font-weight: normal;
    /*margin: 2px 1px;*/
    cursor: pointer;
}


div.message {
        background-color: #f2dede;
        border-color: #eed3d7;
        color: #b94a48;
        font-weight: bold;
        text-align: center;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        margin-top: 20px;
        line-height: 4em;
}