@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,700);
/* red  #a9cb34 */
body {
    color:  #4C7F6C;
    line-height: 1.5em;
    font-family: Ubuntu, "Lucida Sans", "Lucida Grande", sans-serif;
    font-size: 14px;
    background: #f0f7fc url(../images/background_noise.png) repeat 0px 0px;
}

.page {
    max-width: 960px;
    margin:  0px auto 15px auto;
    position: relative;
}

h1 { font-size: 2.7em; line-height: .9em; margin: 0 0 1em 0; color: #a9cb34; }
h2 { font-size: 2.2em; line-height: 1.2em;color: #003640; margin: .3em 0 .2em 0}
h2.weak { font-weight: normal; margin: 0em 0 .9em 0 }
h3 { font-size: 1.2em; margin: 0 0 .3em 0; }

.promo .content {
    background-color: #deeffa;
    padding:  15px;
    margin: 15px;
    border: 1px solid #57afe6;
    height: 170px;
}

p { margin:  0 0 .75em 0; }
a { color: #9dbd30; }
/*a:visited { color: #4C7F6C; }/* TODO: uncomment after style testing*/
a:hover { color: #4C7F6C; }

header a.logo span { visibility: hidden; }
footer { max-width: 960px;font-size: .85em; color: #0378a6; background: #003b5b url(../images/background_noise.png) repeat 0px 0px; padding: 10px 10px 10px 0px;}

a.button_a { 
    text-transform: uppercase;
    font-size: .9em;
    font-weight: bold;
    text-decoration: none;
    margin: .5em 0 0 0;
}


.promo h2 { font-size: 1.7em; margin:  0 0 .5em 0; }
.promo h2 a { color: #003b5b; text-transform: none; font-size: 1em;padding-right: 25px; background: url(../images/mobile_link_arrow_h.png) no-repeat right center;}
.promo p { line-height: 1.2em; font-size: 1.1em; margin-bottom: .5em; }
.promo.one { }
.promo.two { }
.promo.three { }
.promo.four { }
.promo.five { }
.promo.six { }

.promo .content {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    -webkit-box-shadow: 0px 0px 0px #999;
    -moz-box-shadow: 0px 0px 0px #999;
    box-shadow: 0px 0px 0px #999;
    z-index: 1;
}
.promo .content:hover {
    background-color: rgba(255,255,255,1);
    /*-webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);*/
    -webkit-box-shadow: 3px 3px 5px #999;
    -moz-box-shadow: 3px 3px 5px #999;
    box-shadow: 3px 3px 5px #999;
    -webkit-backface-visibility: hidden;
    z-index: 5;
}

nav a {
    color: #0378a6;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    font-size: .9em;
}

nav a:hover { color: #a9cb34; }

nav.language a { color: #a9cb34; }
nav.language a:hover { color: #4C7F6C; }

.clear-fix { clear: both; line-height: 1px; }

footer ul.primary { font-size: 1.4em; list-style-type: none; padding:  0 ; margin:  0;}
footer ul.secondary { font-size: .7em; list-style-type: none; padding:  0; }
footer ul.secondary a { color: #0378a6; }
footer ul.secondary a:hover { color: #4C7F6C; }


@media screen and (min-width: 501px) {
	blockquote .quote:before {background: url(../images/quotes.png) no-repeat left top; width: 50px; height: 60px; content: ""; margin-left: -0px; display:  inline-block; position: relative; left: -50px}
    blockquote .quote:after {background: url(../images/quotes.png) no-repeat right bottom; width: 50px; height: 60px;content: ""; margin-right: -50px; display: block; position: relative; top: -50px; margin-left: auto; right:  0px;}
}
@media screen and (max-width: 500px) {
	blockquote .quote:before {content: "\"";}
    blockquote .quote:after {content: "\"";}
}

blockquote .quote { font-family: Georgia, serif; font-size: 1.2em;}
blockquote .cite { text-align: right; font-size: .8em;}

/* TODO create separate print style*/
@media print {
    /*article a:after {content: attr(href); }*/
    footer ul.primary, footer ul.secondary, nav.language { display: none !important;}
    article div.column { float: none !important; width: auto !important;}
    .promo_container .promo { width: 49% !important; }
    nav { display: none !important; }
    header a.logo:before{ content:  url(../images/logo_small.png); }
    figure.hero { display: none !important;}
}

/* reader-only is used by screen readers to allow users to navigate the page will the ability to skip repetitive nav links */
.reader-only { position: relative;left: -170em; }