@import url("search.css");
/* CSS Document */

/* ******FONTS***** */
.body {
	font-family: Helvetica, Verdana, sans-serif;
	font-size: 18px; /* Was 13px */
	font-weight: 400;
	line-height:125%;

}


.bold_body {
	font-family: Helvetica, Verdana, sans-serif;
	font-size: 18px; /* Was 13px */
	font-weight: bold;
}

.font_dept_head {
	text-transform:uppercase;
	font-family: Helvetica, Verdana, sans-serif;
	font-size: 18px; /* Was 13px */
	font-weight: bold;
}

.font_toc_head {
	text-transform:uppercase;
	font-family: Helvetica, Verdana, sans-serif;
	font-size: 13px; /* Was 13px */
	font-weight: bold;
}

.font_toc {
	text-transform:uppercase;
	font-family: Helvetica, Verdana, sans-serif;
	font-size: 28px; /* Was 13px */
	font-weight: bold;
	float: left;
    position: relative;
    left: 13%;
	
}

.font_expert_head {
	text-transform:uppercase;
	font-family: Helvetica, Verdana, sans-serif;
	font-size: 20px; /* Was 13px */
	font-weight: 400;
}

.font_expert_body {
	text-transform:lowercase;
	font-family: Helvetica, Verdana, sans-serif;
	font-size: 14px; /* Was 13px */
	font-weight: 300;
	line-height: 170%;
}

a.font_expert_body:link active hover visited {
color:#CC0000;
}

.font_twitter {
	text-transform:uppercase;
	font-family: Helvetica, Verdana, sans-serif;
	font-size: 17px; /* Was 13px */
	font-weight: bold;
	text-align:center;
}

.font_facebook {
	text-transform:uppercase;
	font-family: Helvetica, Verdana, sans-serif;
	font-size: 16px; /* Was 13px */
	font-weight: bold;
	text-align:center;
}

.font_podcast {
	text-transform:uppercase;
	font-family: Helvetica, Verdana, sans-serif;
	font-size: 17px; /* Was 13px */
	font-weight: bold;
	text-align:center;
}

.font_editorspick {
	text-transform:uppercase;
	font-family: Helvetica, Verdana, sans-serif;
	font-size: 22px; /* Was 13px */
	font-weight: bold;
	color:#F3AC09;
	display:inline-block;
}

.font_editorspick_head {
	text-transform:uppercase;
	font-family: Helvetica, Verdana, sans-serif;
	font-size: 13px; /* Was 13px */
	font-weight: bold;
}




a:link {
	color: #333;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #333;
}

a:hover {
	color: #CC0000;
	text-decoration: underline;
}
a:active {
	text-decoration: none;
	color: #000000;
}


/* HR RULES */

hr.style1{
	border-top: 1px solid #CC0000;
	margin-right:5px;
}

hr.style2{
	border: 0;
    height: 3px;
    background: #000;
}

hr.style3{
	border: 0;
    height: 1px;
    background: #000;
}

#logo { /*want to push logo down to navbar */

}

/*This contains the entire layout of the page */
#wrapper {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	border: 1px solid #000;
	margin-top: 15px;
	margin-bottom: 15px;
}

/* SEARCH STYLES */
input[type=search] {
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	background: #ededed url(images/elements/search-icon.png) no-repeat 9px center;
	border: solid 1px #CCC;
	font-family: inherit;
	font-size: 100%;
	width: 15px;
	color: transparent;
	cursor: pointer;
}
input[type=search]:hover {
	background-color: #FFF;
}
input[type=search]:focus {
	width:130px;
	padding-left: 32px;
	color:#000;
	background-color: #FFF;
	cursor: auto;
}

input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
	display: none;
}
/* END SEARCH STYLES */

#headertagline {
	font-family:arial, helvetica, san-serif;
	color: #999;
	font-size:16px;
	padding-top:5px;

	  }

#mobilelogo {display:none;}

/* CREATING SCALABLE COLUMNS */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

body { margin: 0; }

#header {
	
	display: -webkit-flex; /* Safari */
    display: flex;
	margin-top: 5px;
}

#columncontainers3 {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
}

/* BEGIN COLUMNS BELOW NAVIGATION */
#column1 {
	display:inline-block;
	width: 100%;
    min-width:300px;
	vertical-align:top;
	margin-left:10px;
}

#column2 {
	display:inline-block;
    min-width:650px;
	height:auto;
	vertical-align:top;
	margin-left: 5px;
	margin-right: 5px;
}

#column3 {
	display:inline-block;
	width: 100%;
    min-width:300px;
	vertical-align:top;
	margin-right:10px;
}

.thumb {
	object-fit: cover;
	background-repeat: no-repeat;
    border: 1px solid #000;
    margin: 5px;
    width: 75px;
    height: 75px;
	margin-right: 10px;
}

.toc {
	margin-top:10px;	;
}


/* BEGIN EDITOR'S PICK SPECIAL FEATURES */
.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}

.wrap    {
	
	display:flex;
	flex-wrap:wrap;
	display: -webkit-flex; /* Safari */
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
}  
.wrap li {
	display:flex;
	flex-wrap:wrap;
	display: -webkit-flex; /* Safari */
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
}

.flex-item {
  width: 150px;
  margin: 5px;
  height: auto;
  color: white;
  text-align: left;
}



/* BEGIN BOXES WITHIN COLUMNS */

.box1 { 
  border: 1px solid #000; 
  display: inline-block;
  width: 300px;
  margin-left:10px;
  padding-top:15px;
}
  
.box2 { 

  display: inline-block;
  width: 650px;
  margin-left: 5px;
  margin-right: 5px;

}

.box3 {
  display: inline-block;
  width: 300px;
  margin-right:10px;
}
  
.box4 { 
	margin:10px;
	height:auto;
}

.box5 { 
  border: 1px solid #000; 
  width: 300px;
  height: auto;
 }
  
.box6 { 
  width: 300px;
  height: auto;
  margin-bottom: 5px;
}
  
.box7 { 
  width: 300px;
  height: auto;
  margin-bottom: 5px;
   }
  
.box8 { 
  width: 300px;
  height: auto;
  margin-bottom: 5px;
   }
  
.box9 { 
  width: 300px;
  height: auto;
  display: -webkit-flex; /* Safari */
  -webkit-justify-content: space-around; /* Safari 6.1+ */
  display: flex;
  justify-content:center;
  margin-top:10px;
}
   
  
.box10 { 
  border: 1px solid #000; 
  height: auto;
  margin-bottom:5px;
   }
  
.box11 { 
  height: auto;
  margin-bottom:5px;
  max-width:650px;
  text-align: center;
   }
  
.box12 { 
   margin-bottom:5px;
  height: auto;
   }

.dept_head {
	display:inline-block;
	margin-bottom: 5px;
}

.dept_head_threshold {
	width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #000; 
   line-height: 0.1em;
   margin: 10px 0 20px;
}

.dept_head_threshold span { 
    background:#fff; 
    padding:0 10px; 
	text-transform:uppercase;
	font-size: 24px; /* Was 13px */
}

.box13 { 
  margin-bottom:5px;
  height: auto;
  max-width:650px;
   }


.box14 { 
  margin-bottom:5px;
 
  height: auto;
   }

.box15 { 

   margin-bottom:5px;

  height: auto;
   }

.box16 { 
  width: 300px;
  height: auto;
  float:left;
  margin-bottom:10px;
   }

.box17 { 
  width: 300px;
  height: auto;
  margin-bottom:10px;
  float:left;
   }

.box18 { 
  border: 1px solid #000; 
  width: 300px;
  height: auto;
  margin-bottom:10px;
  float:left;
   }

.box19 { 
  width: 300px;
  height: auto;
  float:left;
  margin-bottom:10px;
   }

.box20 { 
  border: 1px solid #000; 
  width: 300px;
  height: auto;
  float:left;
  margin-top:2px;
  margin-bottom:10px;
   }
   
.footer_container {
	margin: 10px;
}

a.footer {
	text-decoration: none;
	color: #FFFFFF;
}
a.footer:hover {
	text-decoration: underline;
	color: #CC0000;
}
a.footer:visited {
	text-decoration: none;
	color: #FFFFFF;
}

#footer {
border:1px solid;
border-color:#555555;
border-radius:5px;
padding:10px;
line-height:16pt;
font-size:14px;

}


/* MEDIA QUERIES */

@media screen and (max-width: 1279px ) {

#header {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

.box3 { display:none;}

#columncontainers3 {
	width: 100%;
	margin: 0 auto;
	display:flex;
	flex-wrap:wrap;
	 display: -webkit-flex; /* Safari */
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
}

#column1 {
	width:auto;
}
#column2 {
	width:auto;
}

#column3 {
max-width: 650px;
margin-left: 315px;

}

.box12 {
	max-width:650px;
}
.box13 {
	max-width:650px;
}
.box14 {
	max-width:650px;
}
.box15 {
	max-width:650px;
}

.box16 {
	margin-left:15px;
}
.box17 {
	margin-left:20px;
}
.box18 {
	margin-left:15px;
}
.box19 {
	margin-left:20px;
}
.box20 {
	margin-left:15px;
}
}



@media screen and (max-width: 950px ) {

#wrapper {
	border: none;
}

.box1 {display:none;	
}


#column1{
	display:none;
	margin: 0 auto;
	
}

#column2{
	margin: 0 auto;
	margin-top: -60px;
}

.box2 {
	margin: 0 auto;
}

.box5 {
	margin-left:15px;
	float:left;
}
.box6 {
	margin-left:20px;
	float:left;
}
.box7 {
	margin-left:15px;
	float:left;
}
.box8 {
	margin-left:20px;
	float:left;
}
.box9 {
	margin-left:15px;

}

#column3{
	margin: 0 auto;
}

.nav_lines {
	display:none;
}

}


@media only screen and (max-width: 40em )  /* 649 */

{
#column2 {
	width: auto;
    min-width: 0;
	margin-top:0;
}

.box10 { 
  border: 1px solid #000; 

 height:auto;
   }
  
.box11 { 
  

  height: auto;
   }

.wrap li {
	margin: 2px;
}
  
.box12 { 


  height: auto;
   }

.box13 { 

  height: auto;
   }


.box14 { 

  height: auto;
   }

.box15 { 


  height: auto;
   }
   
.box16 {
	margin: 0px auto 5px 5px;
}
.box17 {
	margin: 0px auto 5px 5px;
}
.box18 {
	margin: 0px auto 5px 5px;
}
.box19 {
	margin: 0px auto 5px 5px;
}
.box20 {
	margin: 0px auto 5px 5px;
}
 
}

@media only screen and ( max-width: 40em ) /* 640 */
{

.box4 { height:0px; border: none;} /*makes the nav and search area disappear */

/*This is the Google Search box */
#cse-search-form {
	position:relative;
	padding-top: 8px;
	left: -135px; /*this positions the search box to the left */
	z-index:6;
	}
	

}
@media screen and (max-width:490px){
	#logo {width: 70%; padding-top: 10px;   }
	
	
	.dept_head {
		margin: 0 auto;
		margin-bottom:25px;
		
}

}

@media screen and (max-width:480px){

#logo {width: 60%; padding-top: 10px;  }

#headertagline {
	display:none;
	  }
}

@media screen and (max-width:320px){
/* Shrinking everything down to fix onto smartphone screen */

#cse-search-form {
max-width:50%;
height:auto;
}
}