/* Put client-controlled css customizations here 
Upload to /ext/resources/safetyandhealthmagazine.css
*/

/* SPECIAL ARTICLE STYLES */

.looy-call-out-link {
font-size:24px; 
border-top: #dddddd 1px solid; 
border-bottom: #dddddd 1px solid; 
padding: 15px;
margin: 30px 0px 30px 0px;
text-align:center;
}

.looy-internal-caption {
color:rgb(51, 51, 51);
display:block;
font-family:Lato, sans-serif;
font-size:16px;
}

/* PRINT SIDEBAR BOX */
.looy-sbar-box {
border:#efefef 3px solid;
padding:20px;
font-size:17px;
background-color: #eeeeee;
margin: 25px 0px 25px 0px;
}

/* PULL QUOTE STYLES */

/*	put inside a div */
.looy-pullquote-container {
border-top: 3px solid #cccccc; 
border-bottom: 3px solid #cccccc; 
padding:10px 40px;   
margin: 30px 0px;
text-align:center;
}

/*	put inside a span */
.looy-pullquote-quote {
font-family: "Crimson Text", times, serif;
font-size:36px;  
line-height:35px;
letter-spacing:-1px;
font-weight:normal;
color:#333333;
}
/*	put inside a span */
.looy-pullquote-qmark {
color: #8b0000;
font-weight:bold;
font-family: "Crimson Text", times, serif;
font-size:36px;  
line-height:35px;
}
/*	put inside a p, separated by br's if more than one line */
.looy-pullquote-whosaid {
font-family: Lato, arial, sans-serif; 
font-size:16px; 
text-transform:uppercase; 
color: #555555;
margin-top: 15px;
}


/*BIG NUMBERS*/
.looy-number {
float:left;
margin: 0 10px 10px 0;
background-color: #6d6d6d;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
color: rgb(255, 255, 255);
display: inline-block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 42px;
font-weight: bold;
height: 42px;
line-height: 42px;
padding-bottom: 2px;
padding-left: 9px;
padding-right: 9px;
padding-top: 2px;
}

/* to avoid single word widow on safety leadership lists add 25px bottom padding to the number div like this:
<div class="number" style="margin-bottom:25px;">5</div>

or try making the numbers smaller for just that article:
.looy-number {
font-size:26px;
height:20px
line-height:20px;
}
*/


/*MISC*/

/*signup box in newsletter topic descriptsions
put in the p tag*/
.looy-signup {
font-family:Lato, sans-serif;
font-size:17px;
background-color:#eeeeee;
padding:20px;
width:100%;
}


/*big nudge to visit next page for multipage articles, put inside a p tag
like this
<p class="looy-nextpage"><a href="?page=2">NEXT:  Training types &gt;&gt;</a></p>
*/
.looy-nextpage  {
	text-align:right;
	margin:40px 0px;
	font-weight:bold;
	font-size:22x;
}
.looy-nextpage a {
	font-style:italic;
	font-weight:bold;
	font-size:22x;
	border-bottom: 1px solid #e9e9e9;
    color: #008EB8;
    text-decoration: none;
}


/*used on enewsletters page */
.looy-figcaption {
box-sizing:border-box;
color:rgb(51, 51, 51);
display:block;
font-family:"Crimson Text", serif;
font-size:16px;
font-style:italic;
padding:10px;
text-align:center;
}

/*will stack on mobile, but keeps left margin -- use inside a figure tag  */
.looy-figure {
background-color:rgb(239, 239, 239);
box-sizing:border-box;
color:rgb(51, 51, 51);
display:block;
float:right; 
margin-left:20px;
max-width:400px;
}

/*testing on anti-retaliation sept 2016 stage id 14198 -- only use for small photos under 250px wide because no media queries, treat like column footer */
.looy-figure img {
width:100%;
height:auto;
}

/* polldaddy holder for wyo page*/
.looy-wyo-container  {
padding:30px; 
border: 8px solid #ddd;
margin-bottom: 30px;
background-color:#fafafa;
}

.looy-column-thumb {
	float:right;
	padding: 0px 0px 10px 15px;
	}

.looy-table {
border:1px solid #bbbbbb;
width:100%;
margin: 20px 0px;
}
.looy-table td {
vertical-align:top;
font-size:16px;
font-family:Lato, sans-serif;
}
.looy-table th {
border-bottom: 1px solid #666666;
background-color: #888888;
color: #ffffff;
font-family:Lato, sans-serif;
}

.looy-disclaimer {
box-sizing:border-box;
color:rgb(51, 51, 51);
display:block;
font-family:Lato, sans-serif;
font-size:16px;
font-style:italic;
}



/* inline images full column width
may not need this? happens on its own? leave in though. used in transition for top 10
*/

.looy-in-img {
	width:100%;
	height:auto;
	margin:20px 0px;
}

/* inline images float right on desktop, full column width smaller devices 
Adjust desktop width by adding a style at the bottom of the body field like this:
@media (min-width: 649px) and (max-width: 1500px) {
	.looy-in-img {
		width:200px;
        }
}
*/

@media (min-width: 649px) and (max-width: 3000px) {
	.looy-float-dt-full-other {
		width:300px;
		height:auto;
		float: right;
		padding:10px 0px 20px 20px;
		border:none;
	}
}
@media (min-width: 0) and (max-width: 648px) {
	.looy-float-dt-full-other
		width:100%;
		height:auto;
		margin:20px 0px;
	}
}




/*Hides topics list on advanced search page -- impossible to make a looy style for this*/
.other-search-options {
	display:none;
}
/* Use class in a div containing YouTube embed code */
.video-embed-container {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 35px;
 height: 0;
 overflow: hidden;
}





/*ADVERTISING PAGE*/
.looy-smaller {
font-size:16px;	
}

/*Buttons*/
.looy-button {
border-bottom-style:solid;
border-bottom-width:3px;
border-collapse:collapse;
border-left-color:
rgb(255, 255, 255);
border-left-style:none;
border-left-width:0px;
border-right-color:rgb(255, 255, 255);
border-right-style:none;
border-right-width:0px;
border-top-color:rgb(255, 255, 255);
border-top-style:none;
border-top-width:0px;
box-sizing:border-box;
color:rgb(255, 255, 255);
cursor:auto;
display:inline-block;
font-family:Lato, sans-serif;
font-size:13px;
font-weight:normal;
height:34px;
letter-spacing:2px;
outline-color:rgb(255, 255, 255);
outline-style:none;
outline-width:0px;
padding:5px 10px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
transition-delay:0s;
transition-duration:0.1s;
transition-property:background-color;
transition-timing-function:ease-in-out;
word-wrap:break-word;
-webkit-font-smoothing:antialiased;
}

.looy-blue-but {
background-color:
rgb(36, 121, 152)
;
border-bottom-color:
rgb(22, 93, 112);
}

.looy-white-but {
background-color: #efefef;
border-bottom-color:#cccccc;
color: #333333;
}

.looy-ad-table {
	font-size:16px;
	font-family: Lato, sans-serif;
}
.looy-ad-table td {
vertical-align:top;
border-bottom: 1px solid #dddddd;
padding-right: 20px;
}
.looy-ad-table th {
text-align:left;
font-size:14px;
vertical-align:top;
padding-right: 20px;
border-bottom: 4px solid #dddddd;
}
.looy-choice-wider {
width: 70%;	
}

/*Title for advertiser ftp page and other blanks page pages made in the page tool*/

.looy-page-title, page-title {
color:rgb(51, 51, 51);display:block;
font-family:Lato, sans-serif;
font-size:32px;
font-style:normal;
font-variant:normal;
font-weight:normal;
margin-bottom:10px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
}

.looy-breadcrumbs {
font-size:14px;	
font-family:Lato, sans-serif;
padding-top:0;
}
.looy-breadcrumbs a a:visited {
color:#2e0ac1;
text-decoration:none;
}

/*NY mag cover archive styles */
	
#cover-archive {
	border: 1px solid #EAEAE8;
	border-width: 1px 0;
	clear: both;
	padding-top: 20px;
	padding-top: 20px;
}
#bottom-page-controls {
	margin-top: -10px;
}
#cover-archive ul, #cover-archive ul li {
	font-family: Lato, sans-serif;
	font-size:15px;
	list-style: none;
	margin: 0;
	padding: 0;
}
#cover-archive ul {
	clear: left;
}
#cover-archive ul li.cover {
	background-color: #F4F5F5;
	border: 1px solid #F4F5F5;
	float: left;
	margin: 0 10px 12px 0;
	overflow: hidden;
	width: 172px;
}
#cover-archive ul li.cover:hover, #cover-archive ul li.ie-hover {
	background-color: #ECEAE8;
	border: 1px solid #CFCFCF;
}
#cover-archive dl {
	margin: 10px;
	text-align: center;
}
#cover-archive dl img {
	display: block;
	margin: 0 auto;
}
#cover-archive dd {
	margin: 0;
}
#cover-archive dt {
	color: #303030;
	font-family: Lato, sans-serif;
	font-size:20px;
	margin-bottom: 4px;
}
#cover-archive dt img {
	margin-bottom: 8px;
}
#cover-archive li.cover li {
	display: inline;
}
#cover-archive li.cover li.last {
	border-left: 1px solid #1A1A1A;
	padding: 0 0 0 4px;
	margin-left: 2px;
}
dt img {
width:148px;
height:196px;
}

/* RISING STARS STYLES -- Also used for Salary Survey 2016 */

.looy-rise-container {
background-color:#efefef; 
border:2px solid #dddddd;
}
.looy-rise-container .looy-in-img {
margin:0;
}
.looy-rise-console-table {
width: 100%;
max-width: 500px;	
}
.looy-rise-console-table td {
align:center;
text-align:center;
vertical-align:top;
}
.looy-rise-console-table td h3 h4{
	margin-bottom:2px;
}
.looy-pagin.clearfix a {
    background: #888888;
    display: inline-block;
    margin-top: 7px;
    padding: 4px 12px;
    text-decoration: none;
    line-height: 1.5em;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
	color:#ffffff;
    text-decoration: none;
	font-size: 150%;
	font-weight:bold;
	margin-bottom:4px;
	font-family: Lato, sans-serif;
}
.looy-pagin.clearfix a:hover {
    background-color: #000000;
    color: #fff;
    text-decoration: none;
	font-size: 150%;
	font-weight:bold;
	margin-bottom:4px;
	font-family: Lato, sans-serif;
}
.looy-pagin.clearfix a:active {
    background-color: #DBAF61;;
    text-decoration: none;
	font-size: 150%;
	font-weight:bold;
	margin-bottom:4px;
	font-family: Lato, sans-serif;
	}
	

.looy-rs-profiles {
	font-family: Lato, Arial, sans-serif;
	font-size:11px;
	color:#666666;	
	margin-bottom:2px;
	padding-top: 5px;
}
.looy-rs-names {
	font-size:18px;
	margin-bottom:12px;
}
.looy-rs-profiles-table {
	padding:20px; 
	width:95%;
}
.looy-rs-profiles-table td {
	vertical-align: top;
	padding-right:15px;
	width:25%;
}

/*for person pages*/
.looy-rs-pic-facts {
	margin-top: 20px;
	font-size:24px;
}
.looy-rs-bio {
	margin-top: 20px;
	font-size:20px;
}


/*For blue text like in Women in Safety, Oct. 2016*/

.looy-blue-text {
	color:#65819d;
}
/* page title for major section pages like ws, resources -- the ones with feeds  */
.looy-page-title {
font-family:Lato,sans-serif;
font-size:24px;
font-weight:normal;
height:34px;
line-height:34.8px;
margin-bottom:20px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
text-rendering:optimizeLegibility;
text-transform: capitalize;
}

/* ePub class with added top and bottom padding */
.video-embed-container {
margin:25px 0px;
}

/* ePub class for image description, mostly used as a photo credit on the features image on articles -- increase font size with inline css in description for use as a caption or use looy-disclaimer class */
.caption {
font-size:11px;
}

/* email signup box */
.email-signup {
font-family: Lato, sans-serif;
font-size:18px;
font-weight:bold;
}


/* constant contact single-newsletter jquery signup */

form#ctct_signup input[type="submit"] {
background-color:#DBAF61; 
color:#ffffff;
font-family:Lato, sans-serif; 
height:40px;
letter-spacing:3px;
font-size:12px;
border:none;
border-bottom-color:#ffffff;
border-bottom-style:solid;
border-bottom-width:3px;
}
.looy-signup-box {
text-align:center;
border-top:1px solid #dddddd;
border-bottom:1px solid #dddddd;
padding:10px 0px 20px 20px;
width:60%;
min-width:320px;
float:left;
margin: 10px 30px 10px 5px;
}
@media (min-width: 0) and (max-width: 500px) {
	.looy-signup-box {
		width:100%;
                max-width:350px;
		margin:20px 0px;
                float:none;
	}
}
.looy-signup-box p {
font-size:15px;
font-weight:bold;
font-family:Lato, sans-serif;
color:#555555;
}

/* hide "Post Comment" and "Report Abusive Comment" links beneath individual comments  */
div.action-links {
display:none;
}
