@charset "utf-8";
/* CSS Document */

/* GENERAL STYLES */
@import url(//fonts.googleapis.com/css?family=Open+Sans);

body {
	font-size: 14px; font-family: Open Sans, Geneva, sans-serif;
	color: #222;
	background-color: #999;
	margin: 0; padding: 0;
	}
	
#page {
	max-width: 1000px;
	margin: 0 auto; padding: 0px;
	position: relative;	
	background-color: #fff;
	border-width: 8px 6px; border-color: #2e006b; border-style: solid;
	}

a:link { color:#4f3e49;	}
a:visited { color:#4f3e49; }
a:active { color:#006699; }
a:hover { text-decoration: none; }
	
a.btn {
	font-size: 1em; color: #fff;
	text-decoration: none;
	border: 1px solid #eee9d9; 
	background-color: #f58a3d;
	padding: 4px 15px;
	transition: .5s;
	}

a.btn:hover { background-color: rgba(0,0,0,.3);	}	

/*Used for FAQ items on Consumer page*/
blockquote.smallerindent {
	margin-left:30px; margin-right:40px;
	}
	
blockquote.factsheets {
	margin-left:30px; margin-right:40px;
	}	

/* YouTube video on Consumer page
iframe { width:560px; height: 315px; }*/

section.main figure {
	display: table;
	width: auto;
	float: right;	
}

section.main figcaption {
	font-size: 1.1em;
	font-family: "Century Gothic", "Didact Gothic", Arial, sans-serif;
	color: #666;
	text-align: center;
	display: table-caption; caption-side: bottom;
}

iframe {
	width: 350px;
	height: 208px;		
}

img { max-width: 100%; height: auto;
	}

p {
	margin: 0 0 1em 0;
	font-size: 1em;
	}

ul li { font-size: 1em;	}
	
	/* used on Factsheet home to control layout */
ul.indentfactsheets { margin-left: 75px; }

	
ul.indent200 { margin-left: 200px; }
	
ul.indent150 { margin-left: 150px; }

	
.headlinegold {	font-size: 12pt; font-weight:bold; color: #a35e25; }

.smalltext { font-size: .8em; }
	
.smalltextred { font-size: .8em; color: #990000; }

.subheadlineblue {
	font-size: 11.5pt;
	font-weight:bold;
	color: #036;
}

.subheadlinegold { font-size: 10.5pt;	font-weight:bold; color: #a35e25;}

.subheadlineredunderline { font-size: 11.5pt; font-weight:bold; color: #900000;	border-bottom: 1px solid; }

.headlinegray {	font-size: 14pt; font-family: Open Sans; font-weight:bold; color: #44333e; }

 .medheadlinegray {	font-size: 12pt; font-weight:bold; color: #44333e; } 

/* HEADER */

header {
	height: 130px;
	position: relative;
	margin: auto 10px;
	}

header .right {
	display: inline;
	float: left;
	width: 200px; height: 80px;
	margin-top: 15px; padding-left: 75px;
	}
	
header .left {
	display: inline;
	float: left;
	}
	
header a.logo span { display: none;	}
	
header .title {	font-family: Times New Roman, serif; font-size: 4.2em; color: #444;	}

header .title-right { font-family: Times New Roman, serif; font-size: 5.1em; color: #444; }

header .subtitle {
	font-family: Arial, sans-serif; font-size: 1.7em; color: #666; weight: 700;	font-style: italic;
	margin-left: 40px;
	}	

/* NAVIGATION */

nav {
	background: #2e006b;
	height: 40px; line-height: 40px;
	}
	
/*Strip the ul of padding and list styling*/
nav ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	position: absolute;
	left: 8px;
	top: 130px;
}

/*Create a horizontal list with spacing*/
nav li {
	display:inline-block;
	float: left;
	margin-left: 3px;
}

nav li a {
	display: block;
	height:20px;
	line-height:20px;
	text-align: center;
	font-family: Verdana, sans-serif;
	padding: 10px 20px;
	font-size: 1em;
	color: #fff;
	text-decoration: none;
}



	nav a:link {
	color: #fff;
	}
	
	nav a:visited {
	color: #fff;
	}
	
	nav a:active {
	color: #fff;
	}

	nav a.currentpage {
	color: #ffcc00;
	font-weight: 550;
}


/*Hover state for top level links*/
nav li:hover a {
	background: #444;
	transition: .25s;
	/*text-decoration: underline;*/
}

nav li:hover a.currentpage {
	background: #2e006b;

}

/*Style for dropdown links*/
nav li:hover ul a {
	color: #444;
	height: 40px;
	line-height: 40px;
}

/*Hover state for dropdown links*/
nav li:hover ul a:hover {
	background: #444;
	color: #fff;
}

/*Hide dropdown links until they are needed*/
nav li ul {
	display: none;
}

/*Make dropdown links vertical*/
nav li ul li {
	display: block;
	float: none;
}

/*Prevent text wrapping*/
nav li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
}

/*Display the dropdown on hover*/
	nav ul li a:hover + .hidden, .hidden:hover {
	display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	font-family: "Verdana", sans-serif;
	font-size: 1em;
	text-decoration: none;
	color: #fff;
	background: #2e006b;
	text-align: center;
	padding: 10px;
	display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}
 	
/* SECTIONS - ALL */

section {
	margin: 0 30px;
	}
	
section::after {
	content:'';
	display: block;
	clear: both;
	}
	
/* SECTION FLEXSLIDER */

section.flex {
	margin-top: 15px;
	}

section.flex .left{
	width: 75%; 
	float:left;
	}

section.flex .spotlight {
	width: 19%;
	min-width: 200px;
	max-width: 250px;
	float: left;
	background-color: #e1e1e1;
	padding: 5px;
	margin: 5px auto;
	}
	


/* SECTION MAIN */

section.main {
	margin-top: 20px;
	margin-bottom: 30px;
	padding: 0;
	}

section.main aside {
	font-size: .8em;
	width: 33%;
	float: left;
	text-align: center;
	padding-top: 10px;
}

section.main .content {
	margin: 15px;
	background: #eee9d9 no-repeat center top;
	background-size: 75px 75px; 
	padding: 75px 5px 14px 5px;	
	}
	
section.main h3 a {
	font-size: 1.1em;
	color: #000;
	text-decoration: underline;
}

section.main h3 a:hover {
	text-decoration: underline;
	}
	
section.main .content.parents {
	background-image: url('../images/parents_teens_icon.jpg');
	}

section.main .content.factsheets {
	background-image: url('../images/factsheet_tan.jpg');
	}

section.main .content.help {
	background-image: url('../images/help_tan.jpg');
	
	}

section.main img {
		float: left;
		padding: 5px;
		}
	
section.main img.floatright {
	padding: 10px;
	float: right;
	}	

section.main .icon {
	position: relative;
	top: -8px;
	left: -2px;
}

section.main .feature {
	clear: both;
	float: right;
	margin-left: 20px;
	margin-right: 20px;
	background-color: #e1e1e1;
	display: block;
	border: 1px solid #666;
	width: 30%;
	padding: 5px;
	font-family: Open Sans, sans-serif;
	font-size: 12px;
	color: #000000;
} 
	
	section.main .citation {
	margin-right: 25px;
	margin-left: 25px;
	}
section.main .contentsbox {
	
	background-color:#dddddd; 
	padding:5px; 
	width:300px;
	margin-bottom: 10px; 
}
	
section.main #left {
	float: left;
	width: 45%;
	background-color: #fff;
	overflow:hidden;
}

section.main #right {
	float: left;
	width: 45%;
	margin-left: 25px;
	background-color: #fff;
	overflow:hidden;
}	

section.main img.expandarrow {
	float: none;
	}

section.main .rowimagescontainer {
	text-align: center;
}
section.main .rowimages {
	display: inline-block;
	margin: 5px;
}

section.main span.text-content {
  background: rgba(0,0,0,0.4);
  color: white;
  cursor: pointer;
  display: table;
margin-top: 88px;
margin-left: 5px;
  height: 84px;
  position: absolute;
  width: 250px;
  opacity: 0;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}

section.main span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

section.main .rowimages:hover span.text-content {
	opacity: 1;
	
}

	
/* SECTION - LOGOS */

.logos {
	text-align: center;
margin: 0px auto 10px auto;
	}	
	
.logos a img {
	display: block;
	
	}
	
.logos > a {
	display: inline-block;
	vertical-align: middle;
	}
	
/* FOOTER */

footer {
	height: 30px;
	background: #2e006b;
	font-family: Verdana, Geneva, sans-serif;
	color: #fff;
	font-size: .78em;
	text-align: center;
	}
	
footer a:link {
	color: #fff;
	text-decoration: none;
	}
	
footer a:visited {
	color: #fff;
	text-decoration: none;
	}
	
footer a:hover {
	color: #fff;
	text-decoration: underline;
	}

/*Responsive Styles*/

@media screen and (max-width : 1045px){
nav {
	margin-bottom: 35px;
	text-align: center;
	}

nav li {
	margin-left: -4px;
	padding: 0px;
	font-size: 1em;
}



iframe {
    width:400px;
	height: 225px;
	margin: 0px;
}

header .right {
		padding-left: 40px;
	}
}



/* BREAKPOINT LOGO */
@media screen and (max-width : 950px){
header .title {
	font-size: 3.4em;
	}

	header .title-right {
	font-size: 4.2em;
	}

	header .subtitle {
	font-size: 1.8em;
	margin-left: 0px;
	}	

section.flex {
		margin-top: 50px;
}
		
		section.flex .left{
	width: 100%; 
	margin-left: 0px;
	float:none;
	}
		
	section.flex .spotlight {
		align: center;
		float: none;
		max-width: 250px;
		min-width: 200px;
		margin: 0px auto;
	}
	
	nav {
	padding-left: 45px;
	}

	
nav li a {
	font-size: .9em;
	margin-left: -10px;
	}
	

}

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

	nav {
	padding-left: 20px;
	}
	
nav li a {
	font-size: .85em;
	}

header .right {
		padding-left: 30px;
	}

}

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

	nav {
	padding-left: 6px;
	}

}

/* TABLETS */
@media screen and (max-width : 774px){

.headlinegray {
	margin-top: 45px;
}

iframe {
	width: 100%;
	margin-left: 0;
	padding: 0;
	float: none;
	}
	
	header {
	height: 150px;
	}
	
	header .title {
	font-size: 3.2em;
	}

	header .title-right {
	font-size: 4.0em;
	}
	
	header .right {
		display:none;
		}

	header .subtitle {
	font-size: 1.5em;
	margin-left: 0px;
	}	
	
	header a.logo span {
	display: none;
	}
	
	header .subtitle::after {
		content: 'Alcohol & Drug Abuse Institute, University of Washington';
		display: inline-block;
		font-style: normal;
		font-size: .7em;
		margin-top: 8px;
		}
		
	nav {
	height: 25px;
	line-height: 25px;
	padding-left: 0;
	}
	
	/*Make dropdown links appear inline*/
	nav ul {
		position: static;
		display: none;
		background-color: #444;
	}
	/*Create vertical spacing*/
	nav li {
		font-size: 1.1em;
		margin-bottom: 1px;
		margin-left: 0px;
		background-color: #444;
	}

	nav ul li, li a {
		width: 100%;

	}
	
	nav li a {
		margin-left: -18px;
		}
		
	nav li a:hover {
		background-color: #333;
		text-decoration: none;
		}
	
	nav li:hover a.currentpage {
	background: #333;

}
	.show-menu {
		display:block;
		}

	section.flex {
		display: inline-block;
		margin: 50px auto 0 auto;
		width:100%;
		}
	
	section.flex .spotlight {
		width: 200px;
	}
	
	section.main .feature {
	clear:both;
	float:right;
	border: none;
	background-color: #e1e1e1;
	display: block;
	width:100%;
	margin: 5px 0px;
	padding: 8px 5px;
} 

section.main .feature img.hide {
	display:none;
}



	section.main #left {
	float: none;
	width: 95%;
	display: block;

}

section.main #right {
	float: none;
	margin-left: 0px;
	width: 95%;
	display: block;

}	

section.main img.factsheeticons {
	float: right;

	}
	
	ul.indentfactsheets {
	display: inline-block;
	margin-left: 10px;
	}	

}

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

	
	header .title {
	font-size: 3.0em;
	}

	header .title-right {
	font-size: 3.8em;
	}


	section.main aside {
		align: center;
		float: none;
		width: 200px;
		margin: 0px auto;
}

	section.main img.factsheeticons {
	float: none;
	display: block;
	margin: 30px 0px 0px 50px;
	}
}


/*PHONES*/



@media screen and (max-width : 480px){
	blockquote.smallerindent {
	margin-left:5px;
	margin-right:5px;
}

blockquote.factsheets {
	margin-left:5px;
	margin-right:5px;
	}	

	section.main img.floatright {
	float: none;
	display: block;
	margin: 30px auto 5px auto;
	}
	

	
	ul.indent100 {
	display: inline-block;
	margin-left: 10px;
	}
		
	ul.indent200 {
	display: inline-block;
	margin-left: 10px;
	}
	
	ul.indent150 {
	display: inline-block;
	margin-left: 10px;
	}
	
	ul {
	margin-left: -20px;
	}
	
	ul.indentfactsheets {
	display: inline-block;
	margin-left: -15px;
	}	
	
	.logos {
		display: none;
		}
		
	
	footer {
		height: 50px;
		}
	
	header {
		height: 120px;
		}
	
	header .title {
	font-size: 2.3em;
	}

	header .title-right {
	font-size: 2.8em;
	}

	header .subtitle {
	font-size: 1.1em;
	margin-left: 0px;
	}	

	header a.logo {
	display:none;
	}

	
	

section.main img.expandarrow {
	display: none;
	}
	
}


@media screen and (max-width : 400px){
	
	nav {
	height: 25px;
	line-height: 25px;
	}
	
	footer {
		height: 60px;
		}
	
	header {
		height: 110px;
		}
	
	header .title {
	font-size: 1.8em;
	}

	header .title-right {
	font-size: 2.4em;
	}

	header .subtitle {
	font-size: 1em;
	margin-left: 0px;
	}	
	
	section.main .citation {
	margin-right: 7px;
	margin-left: 7px;
	}
	
	section.main .contentsbox {
	
	background-color:#dddddd; 
	padding:5px; 
	width:100%; 
	font-size: .9em;
	margin: 0;
}	

}

@media screen and (max-width : 335px){
	
	
	
	header {
		height: 100px;
		}
	
	header .title {
	font-size: 1.6em;
	}

	header .title-right {
	font-size: 2.2em;
	}

	header .subtitle {
	font-size: 1em;
	margin-left: 0px;
	}	
	
	

}

@media screen and (max-width : 315px){
	
	
	
	header {
		height: 130px;
		}
	
	header .title {
	font-size: 1.6em;
	}

	header .title-right {
	font-size: 2.2em;
	}

	header .subtitle {
	font-size: 1em;
	margin-left: 0px;
	}	

}