/*---------------------------------+
 | Site: Justice Policy Institute  |
 | Part: Master styles             |
 +---------------------------------*/

/* Imports
=====================================================================*/
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700|Merriweather:300,300italic,400,400italic,700,700italic);
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);


/* Fonts
=====================================================================*/
.action, .btn, .byline, #footer .vcard .org, h2, h3, h4, h6, #nav, #nav-secondary { font-family: Arial, sans-serif; }
body { font-family: Merriweather, Georgia, "Times New Roman", Times, serif; }
#feature h2, .feature h2, h1 { font-family: Oswald, Arial, sans-serif; }


/* Basics
=====================================================================*/
a { color: #2b87a7; text-decoration: none; }
a:hover { text-decoration: underline; }
blockquote, dl, ol, p, table, ul { margin-bottom: 1.4em; }
body { background: #353c40; font-size: 16px; font-weight: 300; line-height: 1.625; }
cite, em { font-style: italic; }
dt { margin-top: 1.4em; }
dt, h1, h2, h3, h4, h5, h6, strong { font-weight: bold; }
fieldset { border: 1px solid #ddd; margin-bottom: 2em; padding: 1em 1.5em; }
h1 { color: #353c40; font-size: 40px; line-height: 1.1; margin-bottom: 0.5em; }
h1 span { font-size: 16px; font-weight: normal; }
h2 { color: #296b48; font-size: 24px; line-height: 1.3; margin-bottom: 0.25em; text-transform: uppercase; }
hr { background: #ddd; border: 0; clear: both; color: #ddd; height: 1px; margin: 1.5em 0; }
img { max-width: 100%; }
iframe[align="left"] { float: left; margin: 3px 15px 5px 0; }
iframe[align="right"] { float: right; margin: 3px 0 5px 15px; }
input, select, textarea { font-size: 1em; }
legend { background: #fff; color: #352f8e; font-size: 1.7em; margin: 0 0 0 -0.5em; padding: 0.1em 0.75em 0.1em; }
legend em { color: #777; font-size: 0.7em; font-style: normal; font-weight: normal; margin-left: 0.3em; }
ol { list-style: decimal; margin-left: 1.5em; }
ol li { margin-bottom: 0.5em; }
ol ol { list-style: lower-alpha; }
select { padding: 0.1em; }
table { border-collapse: collapse; width: 100%; }
table p { margin: 0; }
td { vertical-align: top; }
thead th { font-size: 1em; padding: 0 0.4em 0.25em; }
ul { list-style: disc; margin-left: 1.5em; }
ul ol li { background: none; padding: 0; }

/* Stock */
.l { float: left; }
.r { float: right; }
.num { text-align: right; }
ul.flat { list-style: none; margin-left: 0; }
ul.flat li { background: none; margin: 0; padding: 0; }


/* Layout
=====================================================================*/
.clear { clear: both; }
#admin .ribbon, #content, #footer-content, #header-content, #nav-content, #subfooter-content { margin: 0 auto; max-width: 1120px; }

/* Columns */
.c2l, .c2r { width: 48%; }
.c2l, .c3l, .c3m { float: left; }
.c2r, .c3r { float: right; }
.c3l { margin-right: 3%; }
.c3l, .c3m, .c3r { width: 31%; }
ul.c2l, ul.c2r { list-style: none; margin-left: 0; }

/* Content */
#content-primary { float: left; width: 74.33%; }
#content-secondary { float: right; width: 22.99%; }
#content-wrapper { background: #fff; overflow: hidden; padding: 40px 20px; }
.full #content-primary { float: none; width: auto; }
.full #content-secondary { display: none; }


/* Content
=====================================================================*/

/* Action buttons */
.action {
    -webkit-appearance: none;
    background: #e8c57c;
    border: 0;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    font-size: 25px;
    font-weight: 600;
    display: inline-block;
    padding: 0.2em 1em;
    text-decoration: none;
    text-transform: uppercase;
    vertical-align: middle;
}

/* Admin */
.win-thumb-image img { max-width: none; }

/* Breadcrumbs */
#breadcrumbs { display: none; }

/* Browsing options */
.browse { list-style: none; margin: 0; }
.browse li { display: inline; margin-right: 0.7em; }

/* Bylines */
.byline { color: #777; font-size: 13px; margin: 0; }

/* Calendar */
.cal { margin-bottom: 4em; }
.cal .date { display: block; float: left; font-size: 1.2em; font-weight: normal; line-height: 1; margin: 0.2em 0 0.5em -25%; text-align: center; width: 18%; }
.cal .date-num { display: block; font-size: 1.125em; padding: 0.2em 0 0.4em; }
.cal .date-title { display: block; font-size: 0.6em; padding: 0.2em 0 0.3em; text-transform: uppercase; }
.cal .desc { margin-left: 20%; }
.cal .title { border-top: 1px dotted #ccc; clear: both; margin-top: 0.5em; padding: 0.5em 0 0 20%; }
.panel .cal { margin-bottom: 1.5em; }
.panel .cal .date-title { font-size: 0.7em; }
.panel .cal .date-num { font-size: 1.2em; }

/* Callouts */
div.call-l, img.call-l { clear: left; }
div.call-r, img.call-r { clear: right; }
dt img.call-l { margin-top: 0; }
.call-l { float: left; margin: 0.5em 1em 0.5em 0; }
.call-r { float: right; margin: 0.5em 0 0.5em 1em; }
.call, div.call-l, div.call-r { font-size: 0.75em; }
.call img, .call-l img, .call-r img { display: block; }
.call img.icon, .call-l img.icon, .call-r img.icon { display: inline; }
.call, .call-l p, .call-r p { margin-bottom: 0.5em; }
.credit { color: #7f8183; font-size: 0.75em; letter-spacing: 0.01em; margin-bottom: 0.5em; text-align: right; }

/* Comments */
.comments .date { color: #6d6e71; float: left; font-size: 0.75em; margin: 0.25em 0 0 -17%; text-align: right; text-transform: uppercase; width: 14%; }
.comments dd, .comments dt { margin-left: 15%; }
.comments dt { clear: both; }
.comments dt, .comments dt strong { color: #b30214; }
.comments dd { font-size: 0.9em; }

/* Deks */
.dek { float: left; margin: 0 3.6% 20px 0; width: 30.93%; }
.dek:nth-child(3n+7), .dek:nth-child(4) { margin-right: 0; }
.dek:nth-child(3n+8), .dek:nth-child(5) { clear: left; }
.dek h2 { font-size: 19px; margin: 0; text-transform: none; }
.dek h2 a { color: #296b48; }
.dek img { display: block; margin-bottom: 10px; width: 100%; }
.dek p { margin: 0; }
.dek .section { color: #666; font-style: italic; font-weight: 300; }

    /* Feature */
    #feature, .feature { border-bottom: 1px solid #ddd; float: none; margin-bottom: 30px; padding-bottom: 30px; width: auto; }
    #feature h2, .feature h2 { color: #353c40; font-size: 40px; line-height: 1.1; margin-bottom: 0.2em; }
    #feature h2 a, .feature h2 a { color: #353c40; }
    #feature img, .feature img { display: block; float: none; margin: 0 0 10px 0; width: 100%; }
    #feature p, .feature p { margin: 0; }

/* Footer */
#footer { color: rgba(255, 255, 255, 0.4); font-size: 14px; padding: 40px 20px 70px; text-align: center; }
#footer a { color: #fff; }
#footer p { margin: 0; }
    
    /* Credit */
    #credit { font-size: 11px; margin-bottom: 1em; }
    #credit a { color: rgba(255, 255, 255, 0.7); margin: 0 0.7em; }
    #credit br { display: none; }
    #credit strong { font-weight: 300; }

    /* Subfooter */
    #subfooter { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); padding: 40px 20px; text-align: center; }
    #subfooter a, #subfooter h2 { color: #fff; }
    #subfooter .action { background: none; border: 1px solid #e8c57c; color: #e8c57c; }
    #subfooter .action:hover { background: #e8c57c; color: #fff; text-decoration: none; }
        
        /* Social */
        #subfooter .social { clear: both; font-size: 35px; list-style: none; margin: 0 0 0.3em; padding-top: 20px; }
        #subfooter .social a { opacity: 1; }
        #subfooter .social a:hover { opacity: 0.7; }
        #subfooter .social .fa-stack-2x { color: hsla(0, 0%, 100%, 0.1); }
        #subfooter .social li { display: inline; margin: 0; }
    
    /* vCard */
    #footer .vcard .adr, #footer .vcard .fax, #footer .vcard .tel { margin: 0 0.7em; }
    #footer .vcard .org { color: #fff; display: block; font-size: 24px; font-weight: bold; text-transform: uppercase; }

/* Header */
#header { padding: 30px 20px; }
#header .action { background: none; border: 1px solid #e8c57c; color: #e8c57c; }
#header .action:hover { background: #e8c57c; color: #fff; text-decoration: none; }
#header-content { align-items: center; display: flex; }
#header-custom { flex: 1 1 auto; order: 2; }
#header-tertiary { display: flex; flex: 1 1 auto; justify-content: flex-end; order: 3; }
#logo { flex: 0 0 auto; max-width: 153px; padding-right: 40px; }

    /* Search */
    #search { display: flex; width: 75%; }
    
    #search .btn {
        -webkit-appearance: none;
        background: #6aaec2;
        border: 0;
        color: #fff;
        cursor: pointer;
        flex: 0 0 6em;
        font-size: 20px;
        font-weight: bold;
        padding: 0.5em 0;
        text-transform: uppercase;
    }
    
    #search .txt { background: #fff; border: 0; box-shadow: none; display: block; margin: 0; min-width: 0; padding: 0 0.5em 0 0; text-indent: 0.6em; }

/* Hidden */
#atff, .closed { display: none; }
.skip { left: -9999em; position: absolute; }

/* "More" links */
.more { clear: both; }

/* Navigation */
#nav { background: #495053; font-size: 22px; padding: 10px 20px; }
#nav a { color: #fff; }
#nav a:hover { text-decoration: none; }
#nav li { display: inline; }
#nav ul { list-style: none; margin: 0; }
#nav-content { align-items: center; display: flex; }

    /* Primary */
    #nav-primary { flex: 1 1 auto; font-weight: bold; text-transform: uppercase; }
    #nav-primary a:hover { opacity: 0.7; }
    #nav-primary .current a { color: #6aaec2; }
    #nav-primary li { margin-right: 1em; }
    
    /* Secondary */
    #nav-secondary { background: #d2e7ed; font-size: 18px; margin-bottom: 30px; padding: 25px 25px 3px; }
    #nav-secondary a { color: #353c40; }
    #nav-secondary h3 { color: #000; font-size: 15px; text-transform: uppercase; }
    #nav-secondary ul { list-style: none; margin-left: 0; }
    #nav-secondary ul ul { list-style: disc; margin-left: 1.5em; }
    
    /* Social */
    #nav-custom { flex: 1 1 auto; text-align: right; }
    #nav-custom .social a { opacity: 0.5; padding: 0.2em; }
    #nav-custom .social a:hover { opacity: 1; }

/* Page tools */
#page-tools { clear: both; }

/* Summary lists */
.sums dt { clear: both; font-size: 20px; font-weight: bold; line-height: 1.3; margin: 0 0 0.25em; margin-top: 20px; }
.sums .first, .summaries dt:first-child { border: 0; margin: 0; padding-top: 0; }
.sums .thumb { float: left; margin: 3px 15px 20px 0; }

/* Tags */
.tags { font-size: 1.1em; line-height: 2.3em; list-style: none; margin-left: 0; }
.tags li { background: none; float: left; height: 1.75em; margin: 0 2% 0 0; padding: 0; width: 47%; }
.tags li a { white-space: nowrap; }