/* ----------------------------------------------------------
    naacp y&c css
    Managed by: Blue State Digital

    TABLE OF CONTENT

    01 - HTML5 Boilerplate
    02 - COMMON STYLES
    03 - LAYOUT
    04 - HOMEPAGE
    05 - SUBPAGES
    06 - SIDEBAR
    07 - FRAMEWORK
    08 - UTILITY
    09 - PRINT

    COLOR GUIDE (Main Site Colors and their Hex Codes)

---------------------------------------------------------- */

/* 01 =HTML5 Boilerplate
------------------------- */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,  footer, header, hgroup,
menu, nav, section, summary, time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display:block;
}
nav ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select {vertical-align:middle;}

/* end HTML5 Boilerplate reset */

/* HTML5 boilerplate base styles */

html { overflow-y: scroll; }
body { font:13px/1.231 sans-serif; *font-size:small; }
select, input, textarea, button { font:99% sans-serif; }

pre, code, kbd, samp { font-family: monospace, sans-serif; }
ul, ol { list-style-type: none; }

small { font-size: 85%; }
b, strong, th { font-weight: bold; }
i, em { font-style: italic; }
td, td img { vertical-align: top; }
sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }
pre {  padding: 15px;  white-space: pre;  white-space: pre-wrap;  white-space: pre-line;  word-wrap: break-word; }
textarea { overflow: auto; }
.ie6 legend, .ie7 legend { margin-left: -7px; }
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
.ie7 img { -ms-interpolation-mode: bicubic; }
label, input[type=button], input[type=submit], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
button {  width: auto; overflow: visible; }

/* end HTML5 boilerplate base styles */

/* BSD base styles */
caption, th { text-align: left; }


/* 02 =COMMON STYLES
------------------------- */

body {font-size:13px;}
select, input, textarea {   color: #444; }

h1, h2, h3, h4, h5, h6 { font-weight: bold; }

.base h1 {font-size:2em;}
.base h2 { font-size:1.5em; color:#00264c; margin:0 0 1em;  }
.base h3 { font-size:1em; text-decoration:underline; }

.base p { margin:1em 0; color:#1a1818; line-height: 1.5em; }

a:hover, a:active { outline: none; }
a, a:active, a:visited { color: #00264c; font-weight:bold; }
a:hover, a:focus { color: #036; }
a:link { -webkit-tap-highlight-color: #FF5E99; }

blockquote { border-left:10px solid #eeeeef; padding:5px 20px; margin:0 20px; border-top:1px solid #eeeeef; border-bottom:1px solid #eeeeef; border-right:1px solid #eeeeef;  }
blockquote p { margin:0; padding:0; }

.base ul, .base ol { margin:0 0 1em 1.8em; }
.base ul li { list-style: disc; line-height:1.4em; }
.base ol li {list-style:decimal;}
.base li ol, .base li ul {font-size:0.825em;}



/* 03 =LAYOUT
------------------------- */

#meta-nav { background:#00264c; padding:6px 0 4px 0; }
#meta-nav a { color:#fff; text-decoration:none; text-transform:uppercase; font-weight:bold; }
#meta-nav-cont { width:1002px; margin:0 auto; }
#meta-nav-items { float:left; width: 725px; }
#meta-nav-items li { border-right:1px solid #004182; padding:0 10px; }
#meta-nav-items li:last-child {border:none;}
#meta-nav-share { float:right; width:228px; }
#meta-nav li { display:inline; height:16px; }
#meta-naacp, #meta-tumblr, #meta-fbook, #meta-flickr, #meta-youtube, #meta-twitter, #meta-gplus { background: url('/page/-/youthandcollege/images/meta-icon-sprite.jpg') no-repeat; }
#meta-tumblr, #meta-fbook, #meta-flickr, #meta-youtube, #meta-twitter, #meta-gplus { height:16px; width:16px; float:left; margin:0 3px 0 0;}
#meta-naacp { width:104px; background-position:0 0; float:left; margin:0 10px 0 0; }
#meta-tumblr { background-position:-115px 0; }
#meta-fbook { background-position:-136px 0; }
#meta-flickr { background-position:-155px 0; }
#meta-youtube { background-position:-175px 0; }
#meta-twitter { background-position:-195px 0; }
#meta-gplus { background-position:-215px 0; }

.cssgradients #global-header-bg {
    background: #4c175d; /* Old browsers */
    background: -moz-linear-gradient(left, #4c175d 0%, #4c175d 50%, #f56f1a 50%, #f56f1a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#4c175d), color-stop(50%,#4c175d), color-stop(50%,#f56f1a), color-stop(100%,#f56f1a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #4c175d 0%,#4c175d 50%,#f56f1a 50%,#f56f1a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #4c175d 0%,#4c175d 50%,#f56f1a 50%,#f56f1a 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(left, #4c175d 0%,#4c175d 50%,#f56f1a 50%,#f56f1a 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c175d', endColorstr='#f56f1a',GradientType=1 ); /* IE6-9 */
    background: linear-gradient(left, #4c175d 0%,#4c175d 50%,#f56f1a 50%,#f56f1a 100%); /* W3C */
}
#global-header-image { background:url(/page/-/youthandcollege/images/header-connect.jpg) no-repeat center; height:236px; }
#global-header-image.act-so-header { background:url(/page/-/youthandcollege/images/header-act-so.jpg) no-repeat center; }
#global-header-image.youth-header {background:url(/page/-/youthandcollege/images/header-youth.jpg) no-repeat center; }
#main { width:972px; padding:30px 0 30px 30px ; margin:-44px auto 0; background:#fff; overflow-x:hidden; }

#entries-col { float:left; width:595px; }

#global-footer { width:972px; margin:0 auto 40px; color:#a2a4a7; text-transform:uppercase; font-weight:bold; font-size:10px; }
#global-footer a { color:#a2a4a7; text-decoration:none; }
#global-footer li { display:inline; border-right:1px solid #a2a4a7; padding:0 10px; }
#global-footer li:last-child { border:none; padding:0 0 0 10px; }

/* 04 =HOMEPAGE
------------------------- */

.entry { color:#1a1818; font-size:13px; font-family:helvetica, arial, sans-serif; border:1px solid #c7c9cb; margin:0 0 30px; overflow:hidden; }
.entry#featured { background:url(/page/-/youthandcollege/images/bg-gradient.jpg) repeat-x #d3e536; padding:15px; position:relative; border:none; }
#feature-callout { background:url(/page/-/youthandcollege/images/callout-featuredpost.jpg); position:absolute; height:153px; width:32px; left:-32px; top:40px; }

/* image or vid */
.entry img {display:block;}
.entry-post-caption { background:#fff; padding:20px; }
.entry.videopost object { display: block; margin: 15px auto; }
.entry.videopost#featured object { display: block; margin: 0 auto; }

/* quote */
.quotepost blockquote { padding:30px; font-size:16px; color:#00264c; line-height:1.4; }
.quotepost blockquote a {text-decoration:none;}

/* blogpost */
.blog-content { padding:30px; background:#fff; }

/* sharing toolbar */
.entry-sharing { background:#eeeeef; padding:5px 10px; }
.entry-date { color:#a2a4a7; border:1px solid #a2a4a7; background:#fff; text-transform:uppercase; font-weight:bold; font-size:10px; padding:2px; width:40px; text-align:center; float:left; margin:0 10px 0 0; }
.fb-comment { position:relative; width:100px; float:left; }
.fb-comment a {text-decoration:none;}
.fb-comment-total { position:absolute; top:0px; color:#fff; left:2px; top:2px; }
.base p.share-text { float:left; margin:3px 5px 0px 10px; color:#a2a4a7; text-transform:uppercase; font-weight:bold; font-size:10px; }
.share-buttons { float:left; width:200px; margin:0 0 0 5px; }
.share-buttons ul { margin: 0; }
.share-buttons a { color:#a2a4a7; text-transform:uppercase; text-decoration:none; }
.share-buttons li { float:left; margin:0 3px; list-style: none !important; }
.share-buttons li span {display:none !important;}
.share-tumblr { background: url('/page/-/youthandcollege/images/entry-share-buttons.png') no-repeat 0px 0; width: 22px !important; height: 21px !important; }
.share-facebook { background: url('/page/-/youthandcollege/images/entry-share-buttons.png') no-repeat -25px 0; width: 22px !important; height: 21px !important; }
.share-twitter { background: url('/page/-/youthandcollege/images/entry-share-buttons.png') no-repeat -51px 0; width: 22px !important; height: 21px !important; }
.share-email { background: url('/page/-/youthandcollege/images/entry-share-buttons.png') no-repeat -77px 0; width: 22px !important; height: 21px !important; }
.share-permalink { background: url('/page/-/youthandcollege/images/entry-share-buttons.png') no-repeat -103px 0; width: 22px !important; height: 21px !important; }

#pagination { border-top:1px solid #dadbdc; border-bottom:1px solid #dadbdc; padding:24px 0; }
#pagination, #pagination a { color:#a2a4a7; text-decoration:none; text-transform:uppercase; font-size:10px; font-weight:bold; }
#page-controls {float:left;}
#page-listing {float:right;}


/* 05 =SUBPAGES
------------------------- */

.full-width #main { width:942px; padding:30px; }
.full-width #entries-col {width:100%;}
.full-width.withnav #entries-col {width:760px;}

#pages-sidebar { float:left; padding:0 30px 0 0; width:90px; text-transform:uppercase; }
#pages-sidebar a { text-decoration:none; font-size:12px; }
#pages-sidebar li { margin:0 0 10px; }
#pages-sidebar li li { margin:5px 0; }
#pages-sidebar li ul { margin:0 0 0 10px; }
#pages-sidebar li li a {font-weight:normal;}
.withnav #entries-col { width:413px; border-left:1px solid #d0d1d3; padding:0 30px 30px; min-height:1550px; }
.act-so li.node_youth-and-college { display:none; }
.youthcollege li.node_act-so { display:none; }

.ee_search { display:block; float:right; }
.ee_search input[type="text"] { font-size:14px; padding:7px 12px; }
.ee_search br { display:none; }
.ee_search p { float:left; }
.ee_search p:nth-of-type(2) { margin:6px 8px; }

#blog-feed { margin: 0 -31px -30px; border: 1px solid #FFF; padding: 30px 0 61px; }
#blog-feed h1.overall { margin-bottom: 20px; }
#blog-feed .entry { float: left; border: 0; width: 145px; margin: 0 12px 0 0; }
#blog-feed img { width: 145px; height: 190px; margin-bottom: 5px; }
#blog-feed .entry-post-caption { padding: 0; text-align: center; }
#blog-feed h1 { font-size: 1.1em; }
#blog-feed .read-more { line-height: 5; }
.base .entry-sharing .entry-date p { margin: 0; line-height: 1; }

/* 06 =SIDEBAR
------------------------- */

#sidebar { float:left; width:284px; margin:0 0 0 30px; position:relative; }
#sidebar-bg { background:url(/page/-/youthandcollege/images/bg-gradient.jpg) repeat-x #d3e536; padding:30px; position:relative; margin:0 0 15px; }
#sidebar-bg.with-buttons {padding-bottom:0px;}
#sidebar-share-cont { position:absolute; width:132px; height:90px; background:#fff; top:0px; padding:10px; left:210px; z-index:50; }

#sidebar-signup-text { background:url(/page/-/youthandcollege/images/side-signup-text.jpg) no-repeat; height:88px; width: 157px; margin:0 0 15px; }

/* form */
#quick-side fieldset { position:relative; height:105px}
#quick-side input.text {
    color:#1a1818;
    border:none;
    padding:6px;
    position:absolute;
    -moz-box-shadow: inset 0 2px 2px #a6a6a6;
    -webkit-box-shadow: inset 0 2px 2px #a6a6a6;
    box-shadow: inset 2px 2px 2px #a6a6a6;
}
#quick-side-email { top:0px; width:210px; }
#quick-side-cell { top:30px; width:210px; }
#quick-side-zip { top:60px; width:95px; }
#quick-side-submit { position:absolute; top:61px; left:112px; }
#quick-side #message-disclaimer { padding-top: 95px; font-size: 10px; }

#side-twitter-feed { margin-bottom: 20px; }

#side-twitter { background:#28aaec; padding:15px; color:#fff; font-size:11px; font-weight:bold; }
#side-twitter a, #side-video a {text-decoration:none;}
#twitter_update_list_1402 li { margin:0 0 15px; }
#twitter_update_list_1402 img { float:left; margin:0 5px 0 0; max-width:45px; }

#side-twitter h2, #side-video h2 { text-align:center; text-transform:uppercase; color:#00264c; font-size:16px; margin:0 0 10px; }
#side-twitter p, #side-video p { margin:1em 0 }
#side-twitter-follow { background:#eeeeef; padding:10px 10px 5px 35px; }

.sidebar-button { width:264px; border-bottom:1px solid #fff; border-top:1px solid #fff; margin:15px 0 0 -30px; padding:10px 10px 10px;  }
.sidebar-button.last-button { margin-top:0; border:none; }
.sidebar-button a { background:#00264c; display:block; padding:15px 0; font-size:20px; color:#fff; text-transform: uppercase; text-align: center; }

#side-video { margin:15px 0; padding:15px; background:#eeeeef; border:1px solid #c7c9cb; color:#1a1818; font-size:13px; }

#side-logos { border-top:1px solid #dadbdc; padding:15px 0 0 0; }

/* 07 =FRAMEWORK
------------------------- */

#signup textarea, #signup input[type="text"], #signup input[type="email"], #signup input[type="tel"] { padding:10px 5px; border:1px solid #e8e8e8;
    -moz-box-shadow: inset 0 0 10px #f8f8f8;
    -webkit-box-shadow: inset 0 0 10px #f8f8f8;
    box-shadow: inset 0 0 10px #f8f8f8;
    margin:5px 0;
}




/* 08 =UTILITY
------------------------- */

.cufon-loading * { visibility: hidden !important; }

.floatl { float: left; margin: 0; padding: 0 10px 10px 0; }
.floatr { float: right; margin: 0; padding: 0 0 10px 10px; }
.required { color: red; }
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.hidden { display: none; visibility: hidden; }
.visuallyhidden { position: absolute !important; clip: rect(1px 1px 1px 1px);  clip: rect(1px, 1px, 1px, 1px); }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after {  content: "."; display: block; height: 0; visibility: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

input:valid, textarea:valid   {  }
input:invalid, textarea:invalid { border-radius: 1px;  -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red;  box-shadow: 0px 0px 5px red; }
.no-boxshadow input:invalid,
.no-boxshadow textarea:invalid { background-color: #f0dddd; }

::-moz-selection{ background: #1fb9e7; color:#fff; text-shadow: none; }
::selection { background:#1fb9e7; color:#fff; text-shadow: none; }


/* 09 =PRINT
------------------------- */

@media print {
    * { background: transparent !important; color: #444 !important; text-shadow: none !important; }
    a, a:visited { color: #444 !important; text-decoration: underline; }
    a:after { content: " (" attr(href) ")"; }
    abbr:after { content: " (" attr(title) ")"; }
    .ir a:after { content: ""; }
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
    thead { display: table-header-group; }
    tr, img { page-break-inside: avoid; }
    @page { margin: 0.5cm; }
    p, h2, h3 { orphans: 3; widows: 3; }
    h2, h3{ page-break-after: avoid; }
    #sidebar, #editToggle, .editThis, #navigation, #addthis, #search, #nav { display: none; }
    /* hide disqus since it is extraneous content that just increases page size */
    #disqus_thread {display:none;}
    a.dsq-brlink {display:none;}

    /* float blog entry images to decrease page length */
    #main {overflow:hidden;}
    #main img { float:left; clear:both; /*keeps images from piling up next to each other*/ margin:0 10px 10px 0; }
}

input#keywords {
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f5f5f5));
    background: -moz-linear-gradient(top, #fff, #f5f5f5);
    background: -o-linear-gradient(top, #fff, #f5f5f5);
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 14px;
    margin-bottom: 18px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
.ee_search { display:block; float:right; }
.ee_search input[type="text"] { font-size:14px; padding:7px 12px; }
.ee_search br { display:none; }