/** Marcia Schenker main CSS file **/

@import url(reset.css); 

body, input, textarea, table {
	font-family: "Lato", sans-serif;
	font-weight: 400;
	font-size: 100%;
	color: #2f4248;
	background: url(images/ms_pattern.png) repeat left top;
}

.container {
	position: relative;
	margin: 0 auto;
}

	#search_form { }

		#search_query {
			position: absolute; 
			top: 7px;
			right: 0; 
			width: 222px; 
			padding: 2px 5px;
			height: 17px; 
			border: none;
		}

		#search_submit {
			position: absolute; 
			top: 7px;
			right: 0; 
			border: none;
			background: url(images/btn-search.png) top left no-repeat; 
			width: 27px;
			height: 21px;
			text-indent: -9999px; 
		}
			#search_submit:hover {
				background-position: center left; 
				cursor: pointer; 
			}
			#search_submit:focus {
				background-position: bottom left; 
			}

#content {
	font-size: 100%; 
	line-height: 1.7em; 
	color: #333;
	margin-top: 20px;
}
	#content p,
	#content ol,
	#content table {
		margin: 1em 0 0 0;
	}

	#content a {
		color: #000; 
	}
		#content a:hover {
			color: #006404;
			text-decoration: none; 
		}

	#content em {
		font-style: italic;
	}

	#content strong {
		font-family: "Lato", sans-serif; 
		font-weight: 900;
		color: #555; 
	}
	
	#content h1 {
		font-family: "Arvo", sans-serif;
		font-weight: 700;
		font-size: 225%;
		margin-bottom: 15px;
		color: #006FBB;
		line-height: 120%;
	}

	#content h2,
	#content h2 a {
		font-family: "Arvo", sans-serif;
		font-weight: 700;
		font-size: 115%; 
		color: #006fbb;
		margin: 0 0 2px 0;
		line-height: 120%;
	}

	#content h3,
	#content h4 {
		margin-top: 1.5em; 
		line-height: 1.3em;
	}
	
	#content h3 {
		color: #690033; 
		font-size: 18px; 
		border-bottom: 1px dotted #ccc; 
		margin-bottom: -0.5em; 
		padding-bottom: 0.25em; 
	}
		#content h2 + h3 {
			margin-top: 0;
		}

		#content h3 + ul,
		#content h3 + ol {
			margin-top: 1.5em; 
		}

	#content h4 {
		font-size: 1em; 
		font-weight: bold; 
		text-transform: uppercase; 
	}

	#content ol li {
		margin: 0 0 0 3em; 
	}

	#content ol li {
		margin: 0 0 0 3em; 
		display: list-item;
		list-style: decimal;
	}

	#content ul.nav { }

		#content ul.nav li {
			display: block;
			list-style: none; 
			margin: 0;
			border-bottom: 1px dotted #ccc; 
		}
			#content ul.nav li a {
				margin: 0;
			}

			#content ul.nav li p {
				margin: 1em 0;
			}

#footer {
	clear: both; 
	border: none;
	font-size: 12px; 
	padding: 2em 0;
}
	#footer p,
	#footer a {
		color: #85aaba; 
	}

	#footer p {
		text-align: center; 
	}

	#footer a:hover {
		text-decoration: underline; 
		color: #004D04; 
	}

/*** Alignment styles that are used by the InputfieldTinyMCE for positioning images in bodycopy. If you are using this field type, you may want to include these or similar styles in your site. ***/
.align_left {
        float: left;
        margin: 0 1em 0.25em 0;
}

.align_right {
        float: right;
        margin: 0 0 0.25em 1em;
}

.align_center {
        display: block;
        margin-left: auto;
        margin-right: auto;
}

/*** WireFatalError is a class that ProcessWire will use to output fatal errors in the design, but only if debug mode is on, or if you are logged in as a superuser. ***/
.WireFatalError {
	background: #a30000; 
	color: #fff; 
	padding: 1em; 
	position: relative;
	z-index: 9999;
}


/******************************************/
/*** Matthew Schenker styles begin here ***/
/******************************************/

/* Navigation, including logo */
.nav_wrap {  /* Container holdoing the entire area holding the logo and main navigation. */
	background: url(images/nav_bar.svg) repeat-x;
	height: 192px;
}

.nav_container {
	margin: 0 auto 0 auto;
	width: 80%;
}

.logo_box {  /* Box surrounding the logo */
	float: left;
	width: 9.5%;
	height: 190px;
	margin-right: 1%;
}

.nav_box { /* Box surrounding the nav elements */
	overflow: hidden;
	padding-top: 82px;
}

.nav_box li {
    display: inline;
    width: auto;
}

.nav_box a {
	display: block;
	float: left; 
	margin: 0 0 0 .5%;
	padding: 3px 5px 3px 5px;
	color: #f6f6f6;
	font-size: 95%;
}

.nav_box a:hover,
.nav_box a.on {
	color: #f6f6f6;
	background: #004D04;
	border-radius: 5px;
}

	/* Styling for iPads */
	@media only screen 
	and (min-device-width : 768px) 
	and (max-device-width : 1024px)  {
		.nav_container {
			width: 96%;
		}
		
		.logo_box {
			width: 12.5%;
		}
	}

/* Contact area at the top of the page*/
.contact_wrap {
	margin-top: 20px
}

.contact_box { /* Box holding the e-mail and CV actions.  */
	height: 25px;
	margin-left: 65%;
}

.contact_text { /* Style for the text in the "e-mail me" and "download CV" links. */
	font-size: 100%;
}

.contact_icon {
	fill: #006FBB;
}

.contact_icon:hover {
	fill: #587A43;
}

/* Row for Personal Statement and Testimonials. */
.personal_wrap {  /* Container holdoing the entire area holding the personal statement and the testimonials. */
	background-color: #CC9966;
}

.personal_row {  /* Centered area containing the personal statement and the testimonials. */	
	padding: 20px 0 20px 0;
	margin: 0 auto 0 auto;
	width: 80%;
	overflow: hidden;
}

.personal_statement_container {
	font-size: 200%;
	line-height: 120%;
	width: 55%;
	float: left;
}

.testimonial_container {
	float: right;
	width: 43%;
	background-color: #fff;
	opacity: 0.5;
	border-radius: 20px;
}

.testimonials { /* Styling for the bxSlider element, which is a UL of testimonials. */
}

.testimonial_text {  /* Styling for main body of the testimonial. */
	font-size: 97%;
	color: #000;
	font-style: italic;
}

.testimonial_source {  /* Styling for the source of the testimonial. */
	font-size: 85%;
	color: #666;
}

/* Row for the professional areas text and graphics materials. */
.pro_area_text_wrap {
	margin-top: 30px;
}

.pro_area_text_container {   /* Container holding all the professional area text lists and "switch" button. */
	padding: 30px 0 10px 0;
	margin: 0 auto 0 auto;
	overflow: hidden;
	width: 70%;
}

.pro_area_text_item {
	width: 20%;
	float: left;
	margin-right: 5%;
}

.pro_area_text_item ul li {  /* Styling for each pro area "bullet." */
	font-size: 95%;
	margin: 10px 0 10px 0;
	display: table;
	padding:  5px;
	border-radius: 10px;
	background-color: #f6f6f6;
}

.pro_area_text_item ul li:hover {
	background-color: #006404;
	color: #fff!important;
}

.pro_area_text_item ul li a {
	display: table;
	line-height: 120%;
}

.pro_area_text_item ul li a:hover {
	background-color: #006404;
	color: #fff!important;
}

.pro_area_text_item ul li:last-child {  /* Overrides the last-child definition for .pro-_area_item. */
	margin-right: 1.6%;
}

.pro_area_circle_wrap {
	margin-top: 30px;
}

.pro_area_circle_container {  /* Container holding all the professional area circle diagrams and "switch" button. */
	margin: 0 auto 0 auto;
	overflow: hidden;
	width: 90%;
}

.pro_area_circle_item {
	height: 600px;
	width: 25%;
	float: left;	
}

.pro_area_title {
	font-size: 110%;
}

.home_switch { /* Container for the "switch" button o toggle between text and graphic presentation on home page. */
	margin: 0 auto 0 auto;
	overflow: hidden;
	width: 70%;
}

.home_switch a {   /* Styling for the site-search button. */
	font-size: 100%;
	color: #f6f6f6!important;
	text-transform: uppercase;
	background-color: #006506;
	cursor: pointer;
	float: left;
	border: none;
	padding: 0 4px 0 4px;
}

.home_switch a:hover {
	background-color: #0D4A86!important;
}

	/* Styling for iPads */
	@media only screen 
	and (min-device-width : 768px) 
	and (max-device-width : 1024px)  {
		.pro_area_text_container {
			width: 96%;
		}
		
		.pro_area_circle_container {
			width: 96%;
			height: auto;
		}
		
		.pro_area_circle_item {
			width: 50%;
			height: 400px;
			margin-bottom: 20px;
		}
		
		.home_switch {
			width: 96%;
		}
	}

/* Regular Pages */
#regular_page {   /* Container for pages that occupy the center area only. */
	padding: 10px 0 10px 0;
	width: 80%;
	margin: 0 auto 0 auto;
	overflow: hidden;
}

#regular_page ul li {
	margin-bottom: 10px;
}

#regular_page ul li a {
	display: inline;
	padding: 2px;
}

#regular_page ul li a:hover {
	background-color: #006404;
	color: #fff!important;
}

.main_column { /* Left-side column for regular pages. */
	float: left;
	width: 50%;
}

.right_column { /* Right-side column for regular pages. */
	float: left;
	width: 35%;
}

.intro_text {
	font-size: 115%;
	color: #999;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	padding: 10px 0 10px 0;
}

.full_text {
	margin: 30px 0 30px 0;
}

.experience_box { /* Container holding the experiences as text or circle diagram in regular pages. */
	float: right;
	width: 100%;
}

/* About page */
.about_photo {
	float: left;
	margin-right: 1%;
}


/* BxSlider Overrides */
/* See the main BxSlider style sheet for originating styles */
.bx-wrapper,
.bx-viewport {  /* Overrides for bxSlider styling. */
	margin-bottom: 0!important;
	background: transparent!important;
	border:  none!important;
	padding: 10px!important;
	box-shadow: none!important;
}

/* General SVG Styling. */
svg {
	height: 100%;
	width: 100%;
	display: block;
}

/* Cirlce diagrams */
.active_circle {
	opacity: 0.75;
	fill: #58E516;
}

.circle0 {
	font-family: 'Arvo';
	font-weight: 700;
	font-size: 27px;
	fill: #121D0C;
}

.circle1 {
	opacity: 0.75;
	fill: #1F3114;
}

.circle1:hover {
	fill: #004D04;
	cursor: pointer;
}

.circle2 {
	opacity: 0.5;
	fill: #5D943C;
}

.circle2:hover {
	fill: #002827;
	cursor: pointer;
}

.circle2_a { /* Style when the circle represents the active page. */
	opacity: 0.5;
	fill: #0CF446;	
}

.circle3 {
	font-family: 'Lato';
	font-weight: 400;
	font-size: 14px;
}

/* Logo */
.logo1 {
	fill: #F6F6F6;
}

.logo2 {
	font-size:20px;
}

.logo3 {
	font-size:40px;
}

.logo4 {
	font-family: 'Raleway', sans-serif;
	font-weight: 'Extra-Light';
}

.logo5 {
	font-family: 'Raleway', sans-serif;
	font-weight: 'Medium';
}

	/* Mobile Layouts */
	/* iPads */
	@media only screen 
	and (min-device-width : 768px) 
	and (max-device-width : 1024px)  {
		.personal_row {
			width: 96%;
		}
	
		.personal_statement_container {
			font-size: 195%;
			width: 53%;
		}

		.testimonial_container {
			width: 45%;
		}
		
		.testimonial_text {  /* Styling for main body of the testimonial. */
			font-size: 95%;
		}
	}