/* 
        Washington Post Media 2013
        
    Document   : style_v2
    Created on : Jan 25, 2013, 10:03:23 AM
    Author     : rodriguezm
    Description:
       New stylesheet for version 2 of account management. 
       It contains only styles pertinent to the template as well as global styles to be used throughout.
       This stylesheet contains rules from the Foundation (foundation.zurb.com) 16 column Grid System.

TOC
--->
        0. Resets & Fonts
        1. Global Header
        2. Global Shell and Common CSS Rules
        3. Global Footer
        4. Form Styles
        5. Small Devices
        6. Overlay Styles

*/


/* ------
 0 Resets & Fonts
 --------------------------*/

html { font-size: 62.5%; }

body { background-color: #f7f7f7; padding: 0; margin: 0; font-family: "Helvetica", Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1; color: rgb(89, 89, 89); position: relative; }
header, footer {
    display: block;
} 

ul, li, h1, h2, h3, h4, h5, p, ol {
    padding: 0;
    margin: 0;
    list-style: none;
}

/*  fonts */
/* @font-face {
     font-family: 'Postoni';
     src: url(/actmgmt/fonts/PostoniDisplay-Regular.otf);
 }*/

/*@font-face {
    font-family: 'FranklinBold';
    src: url(/actmgmt/fonts/FranklinITCStd-Bold.otf);
}*/

/* @font-face {
     font-family: 'FranklinLight';
     src: url(/actmgmt/fonts/FranklinITCStd-Light.otf);
 }*/

@font-face {
    font-family: 'FranklinThin';
    src: url(https://s3.amazonaws.com/wp-stat/paywall/help/FranklinITCPro-Thin.otf);
}




/* -----------------------------------------
 1  Global Header
----------------------------------------- */

.main-wrapper > header {

}

.main-wrapper > header > .user-links {

    background-color: #f7f7f7;
    float: right;
    width: 100%;
}

ul.signed-out { /* TODO: this will need IE 7 specific styles, NB display: table and table-cell in li's */
    display: table;
    float: right;
}

ul.signed-in {
    display: none;
    float: right;
}

.signed-out li, .signed-in li {
    visibility: hidden; /* makes no sense to show this, but i'm leaving it in just in case */

    display: table-cell;
    vertical-align: middle;

    color: rgb(140,140,140);
    font-size: 1.1em;
    list-style: none;

    padding: 0 0 0 .5em;
    height: 24px;	
}


.top-bar {	

    float: right;

    box-sizing: border-box;
    width: 100%;
    height: 35px;

    background-color: rgb(33,33,33);
    background-image: url('https://s3.amazonaws.com/wp-stat/paywall/help/header-logo.png');
    background-repeat: no-repeat;

    color: white;
}

.top-bar > .wp-home {
	position: absolute;
	display: block;
	
	width: 50%;
	height: 35px;

	z-index: 2;
	
	
}

.global-search {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    padding: 3px;
    -webkit-transition: margin .2s linear;
    
    z-index: 1;
}

.global-search.slide-down {

    margin: 40px 0 0 0;
    z-index: 2;

}

.global-search input[type="text"] {
    float: right;

    width: 155px;
    height: 100%;

    margin: 0;
    padding: 0 5px;
    border: 0;

    font-size: 1.1em;
    color: #959595;

}

.global-search button[type="submit"] {
    float: right;
    width: 31px;
    height: 100%;

    border: 0;
    padding: 0;
    margin: 0;
    overflow: hidden; 

    background-color: #595959;
    background-image: url(https://s3.amazonaws.com/wp-stat/paywall/help/sign-in-reg-sprite-1x.png);
    background-position: -33px -378px;
}

.global-search button[type="submit"]:hover {
    background-color: #2E6D9D;
}

.global-search button > i {
    color: white;
    font-size: 1.45em;
}

.section-title {
    float: right;
    box-sizing: border-box;

    width: 100%;
    height: 100px; /* TODO: this is desktop style only -- hmm maybe not? */
    line-height: 100px;
    padding: 0 16px;


    border: solid 1px rgb(230, 230, 230);
    border-bottom: solid 1px rgb(214, 213, 211);

}

.section-title  h1 { 
    display: inline-block;

    font-size: 	6em;
    font-weight: normal;
    font-family: FranklinThin;
    color: rgb(0,0,0);
}

.section-title  h5 {
    display: inline-block;
    margin: 0 35px;	

    font-size: 1.4em;
}

/* -----------------------------------------
   2. Global Shell and common CSS rules
----------------------------------------- */


.main-wrapper {
    width: 100%;
    max-width: 1012px; /* TODO: goes in desktop definitions */
    margin: 0 auto;
    overflow: hidden;
    background-color: white;
}

.lt-ie9 .main-wrapper {
	width: 1012px;
}

.main-wrapper .shell {
    float: left;

    width: 100%;
    padding: 30px 20px;

    border: solid 1px rgb(230,230,230);
    border-top: 0;
    border-bottom: 0;

    font-size: 1.2em; 
}

.lt-ie9 .main-wrapper .shell {
	display: block;
}

.main-wrapper .shell > .eight + .eight {
    border-left: solid 1px #d5d5d5;
}



/* buttons */
.btn-black {
    position: relative;
    height: 40px;

    border: 0;
    background: rgb(70,70,70); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: -moz-linear-gradient(top,  rgb(70,70,70) 0%, rgb(52,52,52) 45%, rgb(40,40,40) 50%, rgb(45,45,45) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(70,70,70)), color-stop(45%,rgb(52,52,52)), color-stop(50%,rgb(40,40,40)), color-stop(100%,rgb(45,45,45))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgb(70,70,70) 0%,rgb(52,52,52) 45%,rgb(40,40,40) 50%,rgb(45,45,45) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgb(70,70,70) 0%,rgb(52,52,52) 45%,rgb(40,40,40) 50%,rgb(45,45,45) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgb(70,70,70) 0%,rgb(52,52,52) 45%,rgb(40,40,40) 50%,rgb(45,45,45) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgb(70,70,70) 0%,rgb(52,52,52) 45%,rgb(40,40,40) 50%,rgb(45,45,45) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#2d2d2d',GradientType=0 ); /* IE6-8 */
	
    box-shadow: 0px 0px 1px 1px rgba(30,30,30, .7);

    color: white;
    font-size: 20px; 
    font-family: Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;

    text-transform: uppercase;	 
    cursor: pointer;
}

.btn-black:hover {
    filter: none;
    background-image: none;
    background-color: #2e6d9d !important;
}

/* <a> version of the btn-black */

a.btn-black {
    padding-top: 10px !important;
    text-align: center;
    text-decoration: none;
}

.btn-black .caret-right {
	position: absolute;
        top: 10px;
        right: 10px;
		
	height: 25px;
	width: 25px;
	
	display: block;
	
	background-image: url(https://s3.amazonaws.com/wp-stat/paywall/help/sign-in-reg-sprite-1x.png);
	background-position: -36px -337px;
}

.lt-ie8 .btn-black .caret-right {
	/* ie7 */
	position: absolute;
	right: 5%;
	top: 7px;
}


/* headings */
.shell h2 {
    font-family: Helvetica, Arial, sans-serif; 
    font-weight: 200;
    font-size: 2.2em;
    color: #2e6d9d;
    text-transform: uppercase;

    padding-bottom: 10px;
    border-bottom: solid 2px #222222;

    margin-bottom: 20px;
}

.shell h2 .circle {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 35px;

    margin-right: 10px;

    background-color: rgb(48,48,48);

    color: rgb(255,255,255);
    font-size: 0.9em;
    font-weight: normal;
    text-align: center;

    border-radius: 50%;	
}

.shell h3 {
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 10px
}

.lt-ie8 .main-wrapper {
    width: 1012px !important;
}

input[type="text"] {
    border-radius: 0;
}

/* -----------------------------------------
   3. Global Footer
----------------------------------------- */

.main-wrapper footer {
    box-sizing: border-box;
    float: left;
    width: 100%;

    border: solid 1px rgb(230,230,230);
    border-top: 0;

}

footer .sub-footer {
	display: none;
	
    padding: 15px 10px;
    margin: 30px auto;

    background-color: rgb(240,240,240);
    width: 100%;
    max-width: 900px;
    overflow: hidden;
}

.lt-ie8 footer .sub-footer {
    width: 900px !important;
}

.sub-footer ul:first-child {
    border-left: 0;
}

.sub-footer ul {
    display: inline-block;
    vertical-align: top;

    min-height: 110px;

    padding: 0 2% 5px 2%;

    border-left: solid 1px rgb(200,200,200);

}

.lt-ie8 .sub-footer ul {
    height: 110px !important;
}



.sub-footer ul li:first-child {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.8em;
    font-weight: 200;
    text-transform: uppercase;

    color: rgb(150,150,150);

    -webkit-font-smoothing: antialiased;
}


.sub-footer ul li {
    list-style: none;
    line-height: 1.4em;
    font-size: 1.4em;
    font-weight: bold;
}

.main-wrapper footer > .bottom-footer  {
    float: left;

    width: 100%;
    padding: 25px 0;

    color: rgb(190,190,190);
    background-color: rgb(35,35,35);

    text-align: center; 
}

.bottom-footer .copyright {
    width: 100%;
    padding: 0;
    margin: 0;

    font-size: 1.5em;
    line-height: 2em;
}

.bottom-footer .copyright a {
    margin-right: 10px; 

    text-decoration: none;
    color: rgb(190,190,190);
    font-weight: normal;
}

.bottom-footer .footer-links {
    width: 90%;
    margin: 0 auto;
}

.bottom-footer .footer-links li {
    display: inline-block;
    padding: 5px;
}

.lt-ie8 .bottom-footer .footer-links li {
	display: inline;
}

.footer-links li a {
    color: rgb(190,190,190);

    font-weight: 100;
    font-size: 1.35em;
    text-decoration: none;
}


/* -----------------------------------------
   4. Form Styles
----------------------------------------- */

form { margin: 0 0 19.41641px; }

.row form .row { margin: 0 -6px; }
.row form .row .column, .row form .row .columns { padding: 0 6px; }
.row form .row.collapse { margin: 0; }
.row form .row.collapse .column, .row form .row.collapse .columns { padding: 0; }

label { font-size: 12px; color: #595959; cursor: pointer; display: block; font-weight: 500; margin-bottom: 3px; white-space: nowrap }
label.right { float: none; text-align: right; }
label.inline { line-height: 28px; margin: 0 0 12px 0; }
label.wrap { white-space: normal; line-height: 1.2em;}
label > .sub-label {
    font-size: 10px; 
    color: rgb(150,150,150);
    line-height: 20px;
}

.prefix, .postfix { display: block; position: relative; z-index: 2; text-align: center; width: 100%; padding-top: 0; padding-bottom: 0; height: 28px; line-height: 27px; }

a.button.prefix, a.button.postfix { padding-left: 0; padding-right: 0; text-align: center; }

span.prefix, span.postfix { background: #f2f2f2; border: 1px solid #cccccc; }

.prefix { left: 2px; -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; border-top-left-radius: 2px; -moz-border-radius-bottomleft: 2px; -webkit-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; overflow: hidden; }

.postfix { right: 2px; -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; border-top-right-radius: 2px; -moz-border-radius-bottomright: 2px; -webkit-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px; }

input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea
{
    background-color: white;
    border: 1px solid rgb(204, 204, 204);
    border-radius: 0;
    box-shadow: inset 2px 1px 1px rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0);
    display: block;
    font-family: inherit;
    font-size: 1.3em;
    height: 30px;
    margin: 0 0 10px 0;
    padding: 5px;
    transition: all 0.15s linear;
    width: 100%;
    -webkit-appearance: none; /* for iphone to pickup styles correctly */
}

input[type="text"].oversize, input[type="password"].oversize, input[type="date"].oversize, input[type="datetime"].oversize, input[type="email"].oversize, input[type="number"].oversize, input[type="search"].oversize, input[type="tel"].oversize, input[type="time"].oversize, input[type="url"].oversize, textarea.oversize
{
    font-size: 12px;
    padding: 4px 6px;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, textarea:focus
{
    border: solid 1px rgb(131,173,211)\9 !important;
    box-shadow: 0 0 2px 3px rgba(131, 173, 211, .78) !important;
}
input[type="text"][disabled], input[type="password"][disabled], input[type="date"][disabled], input[type="datetime"][disabled], input[type="email"][disabled], input[type="number"][disabled], input[type="search"][disabled], input[type="tel"][disabled], input[type="time"][disabled], input[type="url"][disabled], textarea[disabled]
{
    background-color: #ddd;
}

textarea { height: auto; }

select {
	opacity: 0;
}

.customSelect { 
    width: 100%; 
    height: 30px; 

    color: rgb(0, 0, 0);
    font-size: 13px;
    line-height: 1.4em;

    border: solid 1px rgb(204,204,204);
    border-radius: 0;
    background-color: white;
    box-shadow: none;
    box-shadow: 1px 1px 1px rgba(0,0,0, 0.2) !important;
    background-image: url('https://s3.amazonaws.com/wp-stat/paywall/help/sign-in-reg-sprite-1x.png');
    background-repeat: no-repeat;
    background-position: right -423px;

    padding: 5px;
    margin: 0 0 10px 0; 
}

.customSelectFocus {
	border: solid 1px rgb(131,173,211)\9 !important;
	box-shadow: 0 0 2px 3px rgba(131, 173, 211, .78) !important;
}

option {
	font-size: 13px;
}


input[type="checkbox"] {
    margin: 0;
}


/* ERRORS */
.errors ul {
    margin: 0 0 10px 0;
}

.error {
    color: #CD151E !important;
}

form label.error {
    margin-bottom: 5px;
    margin-top: -5px;
}

::-webkit-input-placeholder {
   font-size: 12px;
   padding-top: .2em;
}

:-moz-placeholder { /* Firefox 18- */
   font-size: 12px;
   padding-top: .2em;
}

::-moz-placeholder {  /* Firefox 19+ */
   font-size: 12px;
   padding-top: .2em;
}

:-ms-input-placeholder {  
   font-size: 12px;
   padding-top: .2em;
}



/* -----------------------------------------
   5. Small Devices (TODO: put this in a separate file)
----------------------------------------- */
@media only screen and (max-width: 767px) {

    header .user-links {
        display: none;
    }

    .main-wrapper .shell > .eight + .eight,
    .overlay-template .overlay > .eight + .eight {
        border: none;
    }

    .sub-footer ul {
        padding: 5px 0 !important;

        border: 0;
        border-bottom: solid 1px rgb(200,200,200);
        text-align: center;
    }

    .sub-footer ul:last-child {
        border: 0;
    }

    .section-title {
        height: 70px;
        line-height: 70px;
    }

    .section-title h1 {
        font-size: 3.3em;
    }


    .main-wrapper .shell {
        padding: 15px 0;
    }

    .shell h2 {
        font-size: 1.8em;
        margin-bottom: 10px;
    }

    .shell h2 .circle {
        width: 30px;
        height: 30px;
        line-height: 30px;
    }
    
    .top-bar {
        background-position-x: center;
    }
    
    .top-bar > .wp-home {
        width: 75%;
    }

    .m .close-btn,
    .dl .close-btn {
        position: absolute;
        top: 7px;
        right: 10px;

        color: transparent;
        
        font-size: .8em;
        font-weight: bold;
        line-height: 2em;
        text-decoration: none;
        background-image: url('/actmgmt/images/common/acquisition-sprite.png');
        background-position: -24px -528px;
        width: 25px;
        height: 25px;
        
    }
}

/* -----------------------------------------
   6. Overlay styles todo: move to another file
----------------------------------------- */

.overlay-template {    
    width: 100%;
    margin: 0 auto;
    background-color: white;
    padding: 0 20px;
}

.overlay-wrapper {
    background-color: white;
}

.overlay-wrapper.row {
	min-width: 0; /* hack for overlay */
}

.overlay {
    background-color: white;
    
}

.overlay p {
    line-height: 22px;
    font-size: 1.5em;
}

.overlay.row {
    margin: 0;
}

.overlay > .eight + .eight {
    border-left: solid 1px #d5d5d5;
}

/* overlay header styles */
.overlay-template header {
    height: 135px;
    position: relative;
    padding-top: 60px;
    border-bottom: solid 2px black;
    margin-bottom: 25px !important; /*sorry!*/
}

.overlay-template header .logo {
    position: absolute;
    top: 15px;
    left: 0;
}

.overlay-template header .lines {
    position: relative;
    z-index: 1;

    float: left;
    width: 35.6%;

    margin-top: 15px;
    height: 5px;

    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;

}

.overlay-template header .twp-logo { 
    width: 190px;
    height: 32px;
    overflow: hidden;
    
    background-image: url('https://s3.amazonaws.com/wp-stat/paywall/help/sign-in-reg-sprite-1x.png');
    background-position: -12px -174px;
    background-repeat: no-repeat;
    float: left;
    margin: 0px 10px;
}

.overlay-template .products-montage {
    position: absolute;
    z-index: 2;
    
    width: 145px;
    height: 110px;
    overflow: hidden;
    background-image: url('https://s3.amazonaws.com/wp-stat/paywall/help/sign-in-reg-sprite-1x.png');
	background-position: -12px -21px;
	
    top: 0;
    left: -5px;
}
.overlay-template header h1 {
    text-align: center;
    font-size: 2.5em;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    text-align: center;    
    
    color: rgb(0,0,0);
}

.overlay-template header h2 {
    color: rgb(153,153,153);
    font-size: 12px;
    font-weight: 200;
    text-align: center;   
    margin-bottom: 5px;
}

.overlay-template hr {
    border: solid 1px black;
    margin: 0 0 25px 0;
}

.overlay-template .loading-wrapper {
	padding-top: 20% !important; /* override foundation */
}


.overlay-template .loading-wrapper img {
	max-width: none; /* override foundation */
}

/* overlay headings */	   
.overlay h2 {
    
    font-family: Helvetica, Arial, sans-serif; 
    font-weight: 200;
    -webkit-font-smoothing: antialiased;
    font-size: 2.1em;
    color: rgb(0,0,0);

    margin-bottom: 10px;
}


@media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    .top-bar {
        background-image: url('/actmgmt/images/common/thewashingtonpost-2x.png');
        background-position: center;
    }

    .m .top-bar {
        background-size: 170px;
    }

    .m .close-btn, .dl .close-btn {
        background-image: url('/actmgmt/images/common/acquisition-sprite-2x.png');
        background-position: -18px -1094px;
        background-size: auto 610px;
    }

}


/* patch fix to compensate for Parature update - 9/2015 */
/* SEARCH RESULTS */
.searchResults{
    margin-top: 20px;
}
.searchResults .searchResultItem a{
    font-size: 18px;
    color:black;
}
.searchResults .searchResultItem a:hover{
    color: #428bca;
    text-decoration: underline;
}
.searchResults .searchResultItem span.articleText{
    display: none;
}
.searchResults .searchResultItem span.articleLocation{
    display: none;
}

/* article answer */
#breadcrumbs{
    display:none;
}
#ratingContent{
    display:none;
}
#treeView{
    display:none;
}
#relatedTopics{
    display:none;
}
#topicInformation{
    display:none;
}
#kbutility{
    display:none;
}
#parature_search{
    display:none;
}
#parature_footer{
    display:none;
}