/* MAKE LAYOUT RESPONSIVE AT 480px FOR MOBILE DEVICES */


/* ---------------------------------------------------------------------------------------------- */
/* ---------- HEADER ---------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */


#header {
	height: 250px;
	}

#logo {
	background-image: url(../images/evaluATOD_logo_stacked.png);
	width: 212px;
	height: 113px;
	top: 90px;
	}


/* ---------- SEARCH BOX ------------------------------------------------------------------------ */


#search {
	width: 90%;
	}

input.searchform {
	width: 73.33%;
	}

input.searchbutton {
	width: 16.67%;
	}


/* ---------------------------------------------------------------------------------------------- */
/* ---------- TOP-LEVEL NAVIGATION BAR ---------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */


#navigation {
	height: auto;
	}


/* ---------- NAVIGATION TABS ------------------------------------------------------------------- */



#menu {
	position: relative;
	width: 90%;
	margin-left: 5%;
	}

#menu > li {
	float: none;
	width: 100%;
	}

#menu > li > a > div {
	width: 11.11%;
	}


/* ---------- NAVIGATION DROPDOWN MENUS---------------------------------------------------------- */


#menu ul {
	position: relative;
	top: 0;
	width: 100%;
	background-color: #fff;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	}

#menu ul li {
	background-color: #d9d9d9;
	float: none;
	border-bottom: 1px solid #d9d9d9;
	}

#menu ul li a {
	display: block;
	background-color: #fff;
	height: auto;
	width: auto;
	color: #000;
	padding: 0.875em 10px;
	margin-left: 11.11%;
	}

#menu ul li a:hover {
	color: #fff;
	}


/* ---------------------------------------------------------------------------------------------- */
/* ---------- HOME PAGE ROTATING FEATURE -------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */


#feature01, 
#feature02, 
#feature03, 
#feature04, 
#feature05, 
#feature06, 
#feature07, 
#feature08, 
#feature09, 
#feature10 {
	border-top: 10px solid #fff;
	min-height: 0;
	}


/* ---------- FEATURE 1: Shared risk and protective factors (Online Learning) ------------------- */


#f01_message {
	width: 90%;
	float: none;
	}

#f01_image {
	display: none;
	}

#f01_button {
	width: 100%;
	margin-left: 0;
	}


/* ---------- FEATURE 2: Evaluation Decision Making (Online Learning) --------------------------- */


#feature02 {
	background-image: url(../images/feature02_mobile.jpg);
	}

#f02_button {
	width: 100%;
	margin-bottom: 100px;
	}


/* ---------- FEATURE 3: Evaluation 101 (Online Learning) --------------------------------------- */


#f03_message {
	width: 90%;
	float: none;
	}

#f03_image {
	display: none;
	}

#f03_button {
	width: 100%;
	margin-left: 0;
	}


/* ---------- FEATURE 4: Assessing community needs and readiness (Resources) -------------------- */


#f04_message {
	width: 100%;
	float: none;
	min-height: 0;
	}

#f04_callout {
	width: 100%;
	min-height: 0;
	float: none;
	}

#f04_text {
	color: #fff;
	width: 90%;
	padding-left: 5%;
	}

#f04_image {
	display: none;
	}

#f04_link {
	background: #753f00;
	width: 100%;
	padding: 0;
	}

#f04_button {
	margin-left: 5%;
	margin-bottom: 26px;
	}


/* ---------- FEATURE 5: MN Evidence-Based Practices Workbook (Resources) ----------------------- */


#feature05 {
	background-color: #32421a;
	}

#f05_image {
	background-color: #546e2b;
	width: 100%;
	height: 360px;
	float: none;
	}

#f05_message {
	width: 100%;
	float: none;
	}

#f05_text {
	width: 90%;
	min-height: 0;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 0;
	}


/* ---------- FEATURE 6: Evaluation on a shoestring budget (Resources) -------------------------- */


#feature06 {
	background-image: url(../images/feature06_mobile.jpg);
	min-height: 550px;
	}

#f06_message {
	width: 90%;
	margin-left: 5%;
	}


/* ---------- FEATURE 7: Mapping (Webinar) ------------------------------------------------------ */


#f07_text {
	width: 80%;
	}


/* ---------- FEATURE 8: Effective visual presentation of data (Webinar) ------------------------ */


#f08_image {
	background-image: url(../images/feature08_mobile.png);
	width: 90%;
	margin-right: 0;
	margin: 0 auto;
	min-height: 170px;
	border-bottom: none;
	float: none;
	}

#f08_message {
	width: 90%;
	padding: 40px 5%;
	min-height: 0;
	}

#f08_text {
	color: #fff;
	width: 83.333%;
	margin-left: 16.667%;
	}


/* ---------- FEATURE 9: Needs Assessment Workbook (Project-specific tools) --------------------- */


#feature09 {
	background-image: url(../images/feature09a_mobile.png);
	}

#f09_message {
	background-image: none;
	width: 80%;
	padding: 160px 0 40px 0;
	margin: 0 auto;
	min-height: 200px;
	}

#f09_text {
	width: 100%;
	margin: 0;
	}


/* ---------- FEATURE 10: Coalition Functioning Survey (Project-specific tools) ----------------- */


#f10_image {
	display: none;
	}

#f10_message {
	width: 80%;
	padding-right: 10%;
	padding-left: 10%;
	margin-right: 0;
	float: none;
	}


/* ---------------------------------------------------------------------------------------------- */
/* ---------- BODY CONTENT ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */


/* ---------- HOME PAGE COLUMN SETUP ------------------------------------------------------------ */


.bodyHome {
	width: 90%;
	margin-left: 5%;
	float: none;
	}

.bodyHome p:last-child {
	margin-bottom: 2em;
	}


/* Home Page Sidebar Styles */


.sidebarHome {
	width: 90%;
	margin-left: 5%;
	margin-right: 0;
	float: none;
	}

.sidebarHome ul {
    width: 100%;
    margin-left: 0;
    }

.sidebarHome li {
	margin-left: 1em;
    }


/* ---------- LANDING PAGE COLUMN SETUP & SPECIFIC BODY CONTENT STYLES -------------------------- */


.bodyLanding {
	width: 90%;
	float: none;
	margin-bottom: 2.5em;
	}

.portal {
	width: 90%;
	float: none;
	}

.portalCol {
	width: 100%;
	margin-right: 0%;
	float: none;
	}

.portalCol ul:last-child {
	margin-bottom: 2.5em;
	}

.portalCol:last-child {
	margin-bottom: -1em;
	}


/* ---------- GENERAL PAGE COLUMN SETUP & SPECIFIC BODY CONTENT STYLES -------------------------- */


.contentText {
	width: 90%;
	margin-left: 0;
	padding: 0 5%;
	float: none;
	}


/* Interior Page Sidebar */


.contentSidebar {
	width: 90%;
	margin: 2.5em 0 -45px 0;
	padding: 2.5em 5% 1em 5%;
	float: none;
	background: #0e1472;
	}

.contentSidebar h1, 
.contentSidebar h2, 
.contentSidebar h3, 
.contentSidebar h4, 
.contentSidebar h5, 
.contentSidebar h6 {
	color: #fff;
	}

.contentSidebar li.on {
	color: #fff;
    }

.contentSidebar a {
	color: #fff;
	}

.contentSidebar a:hover {
	color: #fff;
	}


/* ---------------------------------------------------------------------------------------------- */
/* ---------- SUB-NAVIGATION -------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */


#secondaryNavigation {
	width: 90%;
	margin-left: 5%;
	float: none;
	}

ul.subnavList {
	width: 100%;
	float: none;
	}

ul.contactList {
	width: 100%;
	float: none;
	margin-top: 2.5em;
	}


#partners {
	width: 90%;
	margin-left: 5%;
	margin-right: 0;
	float: none;
	}

#wilder {
	margin-top: 2.5em;
	}