/********************************************
 Campus Progress Reboot

 "Big Screen" CSS Styling & Responsive Layout

 2013, Matt Pusateri
 Center for American Progress
 *******************************************/


/********************************************
*********************************************

  Table of Contents

  1. Global Styles & Typography
  2. Main Site Structure
  3. Navigation
  4. Header & Footer
  5. Package/Feature Box Styling
  6. Story Styles
  7. Actions and Forms
  8. Side-boxes and Slide-ins
  9. Archives and Story Feeds
  10. Home Page
  11. Search & Search Results
  12. Aggregation Pages

*********************************************
********************************************/


/********************************************

  Master Color Guide

  # Yellow       #E0BB00 (Ideas)
  # Dark Yellow  #B89900 (For Idea headlines and kickers)
  # Green        #4e7708 (Voices)
  # Blue         #0076a2 (Actions)

********************************************/


/********************************************

  Master Typography Guide

  # Body (Calibri, Candara, Segoe, "Segoe UI", Arial, sans-serif, 1em)

  # H1, H2, H3, Captions, Blockquote, Pullquote:
     ("Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif)

********************************************/




/********************************************
  1. Global Styles & Typography
********************************************/

h1, h2, h3, h4 {text-align:left;}


ul#hidden {display:block}


/********************************************
  2. Main Site Structure
********************************************/

   .main {display:block;width:100%; float:left}
   .mobile-jump, .mobile-only {display:none}

    .bigscreen-jump {display:block;}
    .bigscreen-jump a {
        display:block;
        width:75%;
        height:auto;
        padding:.25em .5em;
        text-align:center;
        margin:1.5em auto 1em;
        background:#ddd;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        -webkit-box-shadow:  3px 3px 6px 0px rgba(0, 0, 0, .3);
        box-shadow:  3px 3px 6px 0px rgba(0, 0, 0, .3);
        vertical-align:middle;
        text-transform:uppercase;
        }

    .wide {
        display:block;
        width:100%;
        }

    .col-A {
        display:block;
        width:31%;
        margin:0 1% 0 0;
        float:left;
        }

    .col-B {
        display:block;
        margin:0 1% 0 0;
        width:31%;
        float:left;
        }

    .col-C {
        display:block;
        margin:1em 0 0 0;
        width:31%;
        float:left;
        }

    .third {
    width:30%;
    display:block;
    }

    .two-thirds {
    width:66%;
    display:block;
    }

    .full {
        width:100%;
        clear:both;
        }

/********************************************
  3. Navigation
********************************************/

        nav.primary {display:block;}

          nav.primary .navbutton {display:none;}

        nav.primary ul.main {
        margin:28px auto 1em;
        position:fixed;
        top:0;
        left:0;
        right:0;
        width:100%;
        padding:.5em 0 .75em;
        background: #002a3d; /* Old browsers */
        background: -moz-linear-gradient(top,  #002a3d 0%, #0e0e0e 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002a3d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #002a3d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #002a3d 0%,#0e0e0e 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #002a3d 0%,#0e0e0e 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #002a3d 0%,#0e0e0e 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002a3d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
        z-index:1000;
        -webkit-box-shadow:  0 3px 6px 0px rgba(0, 0, 0, .3);
        box-shadow:  0 3px 6px 0px rgba(0, 0, 0, .3);
        -webkit-border-radius: 0;
        border-radius: 0;
        opacity:.9;  /* does this help? or just distracting? */
        }

        nav.primary ul.main li {
        display:inline-block;
        margin:0 1em 0 0;
        font-size:1em;
        text-transform:uppercase;
        letter-spacing:.1em;
        text-align:center;
        border-bottom:0;
        }

            nav.primary ul.main li span {
            display:block;
            margin-top:.3em;
            color:#ccc;
            clear:left;
            font-size:.8em;
            font-weight:normal;
            text-transform:none;
            letter-spacing:normal;
            }

        nav.primary ul.main li a {
	    	text-decoration:none; f
	    	font-weight:bold;
	    	font-size:1.1em;
	    	display:block;
	    	}

	    nav.primary ul.main li a:hover {
		    text-shadow: 0px 0px 24px rgba(255,255,255,.66);
		    filter: dropshadow(color=rgba(255,255,255,.66), offx=0, offy=0);
	    }

	    nav.primary ul.main li a.ideas:hover {
	    color:#E0BB00;
	    }

	    nav.primary ul.main li a.actions:hover {
	    color:#0076a2;
	    }

	    nav.primary ul.main li a.voices:hover {
	    color:#4e7708;
	    }

	    nav.primary ul.main li a.issues:hover {
	    color:#fff;
	    }

	    nav.primary ul.main li a.about {color:#999;font-weight:normal;letter-spacing:.1em;}




    /*  Drop down */

    nav.primary ul.main li div.drop {
            display:none;
            width:20%;
            position:absolute;
            padding:1em;
            background:#f5f5f5;
            border:#ccc 1px solid;
            -webkit-border-radius: 4px;
            border-radius: 4px;
            -webkit-box-shadow:  3px 3px 6px 0px rgba(0, 0, 0, .3);
            box-shadow:  3px 3px 6px 0px rgba(0, 0, 0, .3);
            opacity:.95;
            text-transform:none;
            z-index:100;
            margin-top:.5em; /* test this to make sure it doesn't become twitchy */
            }
    nav.primary ul.main li:hover div.drop {display:block;}

    nav.primary ul.main li div.drop ul {text-align:left; margin:0; padding:0;}
    nav.primary ul.main li div.drop ul li {
        display:block;
        margin:0;
        text-transform:none;
        letter-spacing:none;
        text-align:left;
    }

    nav.primary ul.main li div.drop ul li a {
        color:#333;
        font-size:.9em;
        font-weight:bold;
        }

    nav.primary ul.main li div.drop ul li a:hover {color:#090; border-bottom:0;}

        a#jump {display:none}



/********************************************
  4. Header & Footer
********************************************/

    header {margin-top:4.2em}
    header .social-links {padding:0; display:block; width:100%; overflow:hidden;}
    header .social-links ul {padding-bottom:1em;}

    header .social-mobile-links {display:none;}

    header .logo {display:block;width:50%;height:auto; margin: 2em auto 0;}

    ul#footer-nav  {display:none;}

    footer .col {
    display:block;
    width:25%;
    padding-right:2em;
    float:left;
    }


/*
    footer hr {
        margin:1em 0;
        border:1px dotted #bbb;
        display:block;
        }
*/

    footer h4 {margin:0 0 1em;}



/* Navbox

   For unwanted, but neccesary secondary navigation at the top of pages  */

.navbox {padding-top:1em}
.navbox .third {width:33.3%;}
.navbox h4 {margin:0 0 .5em;}

.navbox ul li {
    display:block;;
    background:none;
    padding:0;
    margin:.75em 0 .25em 0;
    text-align:left;
    }

.navbox h4 {color:#333; margin:0 0 .5em; text-align:left;}





/********************************************
  5. Package/Feature Box Styling
********************************************/

/* Package Styling */

.package {
overflow:hidden;
display:block;
margin:1em;
    }

.package .package-splash {width:100%;height:auto;}

.package h1 {
    margin:0.25 0 .5em;
    font-size:2.5em;
    text-align:center;
    }

.package h2 {font-size:1.2em; text-align:left; padding:0;}
.package .top-story h2 {font-size:1.5em}

.package h3 a {color:#333;}

.package .infobox {
    display:block;
    width:28%;
    float:left;
    clear:none;
    margin-top:0;
    border:0;
    background:none;
    padding:0;
    }

.package .infobox h3 {
    display:block;
    font-size:1.0em;
    font-weight:normal;
    padding:0;
    margin:0 1em 0 0;
        }

.package .thumb {float:none; margin-left:0;width:100%;height:auto;}

.package .top-stories {display:block;width:49%; overflow:hidden; float:left;padding-left:1%}

.package .top-stories .infobox {
    background:none;
    width:46%;
    padding-right:4%;
    }

.package .top-stories .thumb {
    margin:0;
    width:100%;
    }

.package .secondary-stories {
    display:block;
    width:51%;
    float:right;
    border-left:1px dotted #666;
    padding-left:2%;
    }
.package .secondary-stories .infobox {width:100%;padding-bottom:1em;}
.package .secondary-stories .last {padding-bottom:0;}

.package .secondary-stories .infobox .thumb {
    float:right;
    margin:0 1em 0 .5em;
    width:33%;
    height:auto;
    }

.package .secondary-stories a.morelink,
.secondary-actions a.morelink {
    margin-top:.75em;
    }


.package .top-story {
    display:block;
    overflow:hidden;
    width:47%;
    float:left;
    margin-bottom:0;
    }

.secondary-actions .infobox {
    width:33%;
    float:left;
    margin:1em 0 0 0;
    padding-bottom:0;
    }

.secondary-actions img {margin-bottom:.25em;}


/* Spotlight for press room page */
.spotlight iframe {
    margin:0 1em 1em 2%;
    float:left;
    }


/********************************************
  6. Story Styles
********************************************/

/* Articles */
    article h5 {text-align:left;}
    .content article p.photo-caption {margin-left:30%;text-align:right}
    .content article p.photo-credit {}

    .content article .old-photo-meta p.photo-caption {margin:0 30% 0 5%;}

.content article .issue-link {
    width:33%;
    }

.content article .story-social {
    height: 2.5em;
}
.content article .story-social a {
}
.content article .story-social a i {
    font-size: 1.7em;
}
.content article .story-social a i span {
    font-size: .6em;
}
    
article h1, article h2, article h3 {text-align:left;}

.content article .comments {
	display:block;
	margin:2em 5% 1em;
	}


/* some Bio styling */

    div.biophoto {
    float:right;
    margin:.33em 5% .5em 1em
    }



/********************************************
  7. Actions and Forms
********************************************/

/* Action Page */
.action {display:block;overflow:hidden;margin:0;}

.content article.action p {
    margin-left:0;
    margin-right:1em;
    }

article.action .action-act p {margin-right:0;padding:0 1em 1em;}

.action h1 {
    text-align:left;
    padding:0;
    font-size:2em;
    }

.action h2, .action h3 {
    margin-left:0;
    margin-right:0;
    }


/* Action-intro & action-act default is wider on the left, skinny on the right (the form)
   This is for RSVP's, Petitions, etc...  */

.action-intro {
    width:52%;
    float:left;
    margin-left:5%;
    }

.action-act {
    width:35%;
    float:right;
    margin:0 5% 2em 0;
    }



/* "wide" is for bigger forms, with less intro text...
   This is for "write a letter" actions, multi-target Actions, etc...  */

.wide .action-intro, .actionfirst .action-intro {
    width:35%;
    }

.wide .action-act {
    width:54%;
    float:right;
    }

.actionfirst .action-act {
    width:54%;
    float:left;
    margin:0 0 2em 5%;
    }



/* "full" is for forms or actions that fill the entire content area...
   This is for Donation pages, possibly more down the road? */

.full .action-intro, .full .action-act {
    width:90%;
    float:none;
    margin:0 5% 2em;
    }


.action-act .colA {display:block;width:48%;float:left;}
.action-act .colB {display:block;width:48%;float:right;}

.full .action-act form input[type=submit] {
    width:50%;
    position:relative;
    top:2em;
    }

/* Big action thing for homepage */

.big-action a.actionlink,
.big-action input[type="submit"] {
    width:40%;
    float:left;
    margin-left:3%;
    font-size:1.1em
    }

.big-action input {
    width:57%;
    float:left;
    margin:0;   }




/********************************************
  8. Side-boxes and Slide-ins
********************************************/


/* Slidebox */
#slidebox{
    width:25em;
    min-height:7em;
    padding:1em;
    position:fixed;
    bottom:0px;
    right:-26em;
    z-index:100;
    -webkit-border-radius: 6px 0px 0px 0px;
    border-radius: 6px 0px 0px 0px;
    }

a.close{
    background:transparent url(./../images/close.gif) no-repeat top left;
    width:13px;
    height:13px;
    position:absolute;
    cursor:pointer;
    top:10px;
    right:10px;
    }


/* Related Stories */

.related-stories h4 {margin:0 0 1em;color:#333;}

.related-stories .minibox {
    width:32%;
    margin-bottom:0;
    float:left;
    margin-right:2%;
        }

.related-stories .last {margin-right:0;}

.related-stories .minibox h3, .related-stories .minibox h5 {padding:0;}

.explainer-row .related-stories h3 {
/*
    font-size:1em;
    font-family:Calibri, Candara, Segoe, "Segoe UI", Arial, sans-serif;
*/
    border:0;
    font-family: "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
    line-height:1.2em;

    }

/* Report Box for Idea Page */
article .readbox {
    width:25%;
    }


/* Slide in Forms */
form.slideform {
    display:block;
    margin:0 1em 0;
    }

form.slideform input {
    width:60%;
    margin:1em 0;
    color:#666;
    }

form.slideform button {
    width:35%;
    float:right;
    padding:.5em;
    margin-top:.9em;
    }

form.slideform button:hover {
    -webkit-box-shadow:  0px 0px 9px 0px rgba(255, 255, 255, .7);
    box-shadow:  0px 0px 9px 0px rgba(255, 255, 255, .7);
    }


/* Issue Link Boxes / Aside Boxes */

article aside ul.cleanlist li {margin-top:.75em}


/********************************************
  9. Archives and Story Feeds
********************************************/


/* Story Feed for Bottom of Aggregation pages */
#storyfeed {
    display:block;
    margin:1.5em 2% 0 ;
    overflow:hidden;
    width:100%;
    }

#storyfeed:before  {
    content:"";
    display:block;
    border-top:dotted 1px #999;
    width:96%;
    }


#storyfeed h3 {text-align:left;padding:1em 0;}

#storyfeed .row {display:block;overflow:auto;margin:.5em 0 1em;}

#storyfeed .infobox {
    display:block;
    width:30%;
    float:left;
    margin:0 3% 0 0;
    padding:0;
    }

/*  Big Screen Storyfeed Adjustments */
#storyfeed .infobox .thumb {width:50%; height:auto; margin:.75em 0 .5em .5em}
#storyfeed .more {margin-left:0;}
#storyfeed p.byline {clear:both;}
#storyfeed h4 {clear:right;}



/********************************************
  10. Home Page
********************************************/

.explainer-box {
    display:block;
    width:30%;
    margin:1em 5% 0 0;
    float:left;
    }


.explainer .quarter {
    width:22%;
    margin-right:3%;
    }


/********************************************
  11. Search & Search Results
********************************************/

/* the basic Search box */

/* Search Box */
form.search {display:block}

header form.search {margin-left:70%; }

form.search fieldset {
    border:0;
    padding:0;
    margin:0;
    }

header form.search fieldset {
    position:absolute;
    top:83px;
    width:14em;
    }

form.search fieldset input[type="text"] {
    width: 80%;
    padding: .25em .5em;
    font-size: .9em;
    border: 1px solid #ddd;
    background: #f5f5f5;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    }

form.search fieldset input[type="submit"] {
    padding: .3em .5em;
    font-size: .9em;
    font-weight:bold;
    color: #fff;
    border: none;
    background: #999;
    border-radius: 4px;
    width:17%;
    float:right;
    }

form.search fieldset input[type="submit"]:hover,
form.search fieldset input[type="submit"]:focus {
    background: #777;
    }

form.search fieldset input[type="submit"]:active {
    background: #666;
    }



/* Search Results Styling */

.content article p.sort-search {
    display:inline-block;
    margin:.75em 0 1em 3.5%;
    text-align:left;
    }

.content article p.sort-search a {font-weight:bold;}

.content article p.results-count {margin: .5em 0 1em;}



/* "searchside" is for the facets to refine a search */

#searchside {
    display:block;
    width:25%;
    float:left;
    margin:1em 0 0 5%;
    }

article #searchside ul {
    margin-left:1em;
        }

article #searchside ul li {
    list-style:none;
    padding:.25em 0 0;
    margin:0 0 0 0;
    font-size:.9em;
    }
article #searchside ul li a {color:#666;}
article #searchside ul li a:hover {color:#900;}

#searchside img.arrow {margin-right:.5em; vertical-align:middle;}

/*
#searchside .opened::before {content: "\25BC";display: inline;padding-right:.5em;font-size:.7em;}
#searchside .closed::before {content: "\25BA";display: inline;padding-right:.5em;font-size:.7em;}
*/
#searchside ul.facet {margin:0 0 1em 0}
#searchside ul.facet li {padding:0}
#searchside ul.facet.date li {padding-left:2em;}

#searchside h3 {
    margin:0;
    font-size:1.2em;
    }

#searchside form {margin-bottom:1em;}

/********************************************
  12. Aggregation Pages
********************************************/

.intro-box .sub-links {
    margin:1em auto 0;
    width:auto;
    display:block;
    overflow:hidden;
    }

.intro-box .sub-links li {
    display:inline-block;
    margin:0;
    }

.intro-box .sub-links li a:hover {
	border:0;
    }

#actions-page {
    position:relative;
    background:url(./../images/action-icon.png) top left no-repeat;
    background-position-x:5%;
    }

#ideas-page {
    position:relative;
    background:url(./../images/ideas-icon2.png) top left no-repeat;
    background-position-x:5%;
    }

#voices-page {
    position:relative;
    background:url(./../images/voices-icon.png) top left no-repeat;
    background-position-x:95%;
    }

#press-room {
    position:relative;
    background:url(./../images/press-icon.png) top left no-repeat;
    background-position-x:95%;
    }

.fb-like {
	height:25px;
	overflow:hidden;
	}
}