/*
Theme Name: Capital E
Author: Chromaplex
*/

/* Import Reset */
@import url("css/reset.css");

html, body { 
}

html {
	position: relative;
	 min-height: 100%;
}

body {
	font-size:62.5%;
	font-family: 'Source Sans Pro', sans-serif;	
	margin:0 0 18px;
	overflow-x: hidden;
}

div#container {
	margin-top:34px;
	position:relative;
}

/*--- HEADER -- */

div#header {
	height:50px;
	background: #e8eaeb url('images/header-gradient.png') no-repeat left center;
	margin-bottom:25px;
}

div#header img#logo {
	position:absolute;
	left:24px;
	top:-8px;
}
div#header div#login {
	float:right;
	position:relative;
	margin:10px 20px 0 0;
}

/*--- LOGIN ---*/

div#login input#login_field, div#header div#login input#password_field {
	width:118px;
	height:28px;
	background:url('images/login-field.png') no-repeat;
	background-color: transparent; 
	border-style: none; 
	padding:0px 8px;
	color:#a1a1a1;
	font-size: 1.1em; /* 11px */
}

div#login input#submit {
	width:57px;
	height:27px;
	background:url('images/submit.png') no-repeat;
	border: none;
	text-transform:uppercase;
	color:#ffffff;
	font-size:1.2em; /* 12 px */
	padding-bottom:2px;
}

div#login span.login_label {
	text-transform:uppercase;
	color:#949393;
	font-size:1.2em; /* 12 px */
}

/*--- MAIN --- */

div#main {
	background:url('images/main-bg.png') repeat-y 1px; /* Used for making the sidebar extend the length of the content */
}

/*--- MAIN HEADER ---*/

div#main-header {
	height:118px;
	border-bottom:1px solid #ced1d4;
	border-top:4px solid #7f858b;
}

div#main-header h2 {
	margin:40px 0 0 52px;
	font-size:3.2em; /* 32px */
	color:#98103a;
	text-transform:uppercase;
	font-weight:normal;
}

div#main-header img {
	float:left;
}

div#main-title {
	background:url('images/content-title-bg.png') repeat-y;
	height:inherit;
	overflow:hidden;
}

div#main-title ul#sub-pages {
	margin:8px 0 0 52px;
}

div#main-title ul#sub-pages li {
	float:left;
	padding:0 12px 1px 12px;
	border-left:1px solid #4c5660;
}

div#main-title ul#sub-pages li:first-child {
	border-left:0px;
	padding-left:0px;
}

div#main-title ul#sub-pages li a {
	text-decoration:none;
	font-size:1.35em; /* 13.5 px */
	color:#4c5660;
}

div#main-title ul#sub-pages li a:hover {
	color:#98103a;
}

div#main-title ul#sub-pages li.current_page_item a {
	color:#98103a;
}

/*--- SIDEBAR ---*/

div#sidebar {
	width:258px;
	height:736px;
	float:left;
	border-right:1px solid #ced1d4;
	background: #e4e9ec url('images/sidebar-bg.png') no-repeat;
	padding-top:32px;
}

div#alt-nav { /* Hide the Dropdown nav initially */
	display:none;
}


div#sidebar ul li {
	font-size:1.6em; /* 16 px */
	background:url('images/list-marker.jpg') left center no-repeat;
	text-transform:uppercase;
	margin-bottom:32px;
	padding-left:45px;
}

div#sidebar ul li a {
	text-decoration:none;
	color:#4c5761;
}

div#sidebar ul li a:hover {
	color:#98103a;
}

div#sidebar ul li:hover {
	background:url('images/list-marker-active.jpg') left center no-repeat;
}

div#sidebar li.current_page_item a, div#sidebar li.current_page_ancestor a {
	color:#98103a;
}

div#sidebar li.current_page_item, div#sidebar li.current_page_ancestor {
	background:url('images/list-marker-active.jpg') left center no-repeat;
}

/*--- CONTENT ---*/

div#content {
	padding:28px 0 30px 52px;
	width:55%;
	float:left;
	color:#464646;
	font-size:1.5em; /* 15 px */
	line-height:22px;
}

/*--- ENTRY - User Pages --- These will change depending on what they need as far as font-sizes */

div.entry h1 {
	font-size:2.2em; /* 22 px */
	font-weight:400;
}

div.entry h2 {
	font-size:1.8em; /* 18 px */
	font-weight:400;
}

div.entry h3 {
	font-size:1.5em; /* 15 px */
	font-weight:400;
}

div.entry ul {
	padding-left: 30px;
	text-indent: -30px;
}

div.entry li {
	list-style-position:inside;
}

div.entry li li {
	text-indent:25px;
}

div.entry li:before { 
	content: "";
	display: inline-block;
	height: 2px;
	width: 15px;
	background: #ccc;
	margin: 0 10px 4px 5px;
}


/*--- TEAM ---*/

div.team {
	position: relative;
	width:100%;
	width:120%;
}

div.team-member {
	line-height:15px;
	line-height: 1.3;
	float:left;
	width:33%;
}



div.team-member h3 {
	font-size:1em; /* 15 px */
	font-weight:600;
}

div.team-member h4 {
	font-size:.933em; /* 14 px */
	font-weight:400;
}

div.team-member div.bio {
	display:none;
	margin-top:5px;
	background-color:white;
	width:35%;
	font-size:.866em; /* 13px */
	padding:30px;
	line-height:1.8;
}

div.team-member a {
	color:#98103a;
	cursor:pointer;
	text-decoration:none;
}

div.team-member img.bio-picture {
	margin-bottom:12px;
	width: 150px;
}

div.team-member div.info {
	width:100%;
	margin-bottom:37px;
}

div.team-member div.bio h3 {
	margin-bottom:15px;
}

div.team-member a.close {
	position:absolute;
	right:10px;
	top:5px;
	text-transform:uppercase;
}

/*--- FOOTER ---*/

div#footer {
	clear:both;
	background:url('images/footer-bg.jpg') repeat-x;
	color:#ffffff;
	font-size:1em;
	padding-top:10px;
	text-transform:uppercase;
	position: absolute;
    left: 0;
    bottom: 0;
	height: 18px;
	width: 100%;
}

div#footer h3#credit {
	float:left;
	margin-left:25px;
	font-weight:200;
}

div#footer div.right {
	float:right;
	margin-right:35px;
}

div#footer h3 {
	font-weight:200;
	float:right;
	margin-left:15px;
}
div#footer a {
	text-decoration:none;
	color:#ffffff;
}

/*--- CLEARFIX ---*/

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

/*-- MODAL BOX --*/
#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}


/*-- MEDIA QUERIES --*/


/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
div#login {
	display:none;
}
div#content {
	width:90%;
	padding: 28px 0 30px 5%;
}
div#sidebar {
	display:none;
}

div#alt-nav {
	display:inline-block;
}

div#alt-nav select {
	width:300px;
}

div#main {
	background:none;
}

div#main-header img {
	display:none;
}

div.team-member div.info {
	width:100%;
}

	div.team-member div.bio {
		overflow-y: scroll;
	}

}

@media only screen  
and (min-device-width: 320px)
and (max-device-width : 640px) {
	/* Styles */
	div#login {
		display:none;
	}
	div#content {
		width:90%;
		padding: 28px 0 30px 5%;
	}
	div#sidebar {
		display:none;
	}

	div#alt-nav {
		display:inline-block;
	}

	div#alt-nav select {
		width:300px;
	}

	div#main {
		background:none;
	}

	div#main-header img {
		display:none;
	}

	div.team-member div.info {
		width:100%;
	}

	div.team-member div.bio {
		overflow-y: scroll;
	}
}
/* @media only screen 
and (min-device-width : 720px) 
and (max-device-width : 1280px) { */
	/* Styles */
	/* div#login {
		display:none;
	}
	div#content {
		width:90%;
		padding: 28px 0 30px 5%;
	}
	div#sidebar {
		display:none;
	}

	div#alt-nav {
		display:inline-block;
	}

	div#alt-nav select {
		width:500px;
	}

	div#main {
		background:none;
	}

	div#main-header img {
		display:none;
	}

	div.team-member div.info {
		width:100%;
	}
} */



/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
/*div#content {
	width:90%;
} */


div.team-member div.info {
	width:100%;
}


}




@media screen and (max-width:750px)  {
	body{
	    width:750px;
   }
    div#login {
    	display:none;
    }
	div#sidebar {
		display:none;
	}
	
	div#alt-nav {
		display:inline-block;
	}
	
	div#alt-nav select {
		width:300px;
	}
	
	div#main {
		background:none;
	}

	div#main-title {
		height: auto;
	}

	div#main-title ul#sub-pages {
		margin: 8px 0 36px 52px;
		height: auto;
		display: table;
	}

	div#main-title ul#sub-pages li {
		padding: 0 12px 6px 0;
		border: none;
		width: 100%;
	}

	div#main-header {
		height: auto;
	}
	
	div#main-header img {
		display:none;
	}
	
	div.team-member div.info {
		width:100%;
	}
	
	div.team-member img.bio-picture {
		float:none;
	}
}

@media screen and (max-width:750px) {
	div#content {
		width:80%;
		padding: 28px 0 30px 10%;
	}
	
}

@media screen and (max-width:640px) {
	body {
		width:620px;
	}
	
	div#content {
		width:80%;
		padding: 28px 0 30px 10%;
	}
	
	div.team-member {
		width:50%;
	}

	div.team-member div.bio {
		overflow-y: scroll;
		max-height: 70%;
		width: 70%;
		top: 10% !important;
	}
}
 
@media screen and (max-width:480px) {
	body {
		width:460px;
	}
	
	div#content {
		width:80%;
		padding: 28px 0 30px 10%;
	}
	
	div.team-member h4 {
		display:block;
		margin:0;
	}
	
	div.team-member {
		float:none;
	}

	div.team-member div.bio {
		overflow-y: scroll;
		max-height: 70%;
		width: 70%;
		top: 10% !important;
	}
}

@media screen and (max-width:360px) {
	body {
		width:340px;
	}
	
	div#content {
		width:70%;
		padding: 28px 0 30px 12%;
	}
	
	div.team-member h4 {
		display:block;
		margin:0;
	}

	div.team-member div.bio {
		overflow-y: scroll;
		max-height: 70%;
		width: 70%;
		top: 10% !important;
	}
}


@media screen and (max-width:321px) {
	body {
		width:300px;
	}
	
	div#content {
		width:70%;
		padding: 28px 0 30px 12%;
	}
	
	div.team-member h4 {
		display:block;
		margin:0;
	}
	

	div.team-member div.bio {
		overflow-y: scroll;
		width: 70%;
		max-height: 70%;
		top: 10% !important;
	}
	
}



/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
	/* Styles */
	div#login {
		display:none;
	}
	div#content {
		width:90%;
		padding: 28px 0 30px 5%;
	}
	div#sidebar {
		display:none;
	}

	div#alt-nav {
		display:inline-block;
	}

	div#alt-nav select {
		width:300px;
	}

	div#main {
		background:none;
	}

	div#main-header img {
		display:none;
	}

	div.team-member div.info {
		width:100%;
	}

	div.team-member div.bio {
		overflow-y: scroll;
		width: 70%;
		max-height: 70%;
		top: 10% !important;
	}
}