/*  CSS for http://marylizbender.com/ 
	Design and Development MaryLiz Guillemi (nee Bender)
*/

/*##############################
	=General Styles
##############################*/

* {margin:0; padding:0; border:none; outline:none}
article, section, nav, header, aside, footer {display:block}
a {color:#54cec1; text-decoration:none}
small {font-size:.58em; font-style:italic; font-weight:normal}

body {font-size:100%; font-family:Helvetica, Arial, sans-serif; color:#fff; background-color:#92a8b0}

header {float:left; width:1236px; margin:35px}
	header #logo {float:left; margin:3px 0 0 0; width:477px; height:83px}
	#home header #logo {margin:0; width:452px; height:290px}
		#home header #logo a {display:block; width:452px; height:290px}
	header nav {float:right; width:742px; height:102px; background:transparent url(../images/nav-bg.png) left top no-repeat}
		header nav #site_nav {float:left; list-style-type:none; width:440px; height:102px}
			header nav #site_nav li {float:left; width:109px}
			header nav #site_nav #music {background:#fff url(../images/music.jpg) center center no-repeat}
			header nav #site_nav #design {background:#fff url(../images/design.jpg) center center no-repeat}
			header nav #site_nav #about {background:#fff url(../images/about.jpg) center center no-repeat}
			header nav #site_nav #contact {background:#fff url(../images/contact.jpg) center center no-repeat}
				header nav #site_nav li a {display:block; width:55px; padding:35px 20px; text-indent:-999em}
		header nav #social_networks {float:right; list-style-type:none; width:255px; height:80px; margin:5px 5px 0 0; border-left:1px solid #b1b0b1; background:#ccc url(../images/social-network-bg.jpg) left top repeat-x}
			header nav #social_networks li {float:left}
			header nav #social_networks #twitter {border-left:1px solid #fff}
				header nav #social_networks li a {display:block; padding:25px 9px 0 9px; height:60px}

section {clear:both; float:left; width:1265px}
	article {padding:60px 35px; background:transparent url(../images/text-bg.png) left top repeat}
		article a:hover, #home #logo a:hover {border-bottom:1px dotted #fff}
				
	#intro_content {float:left; width:430px}
		#intro_content p {margin-bottom:1.5em; font-size:1.4em; line-height:1.25em; font-weight:bold}		
	#main_content {float:right; width:665px}
		#main_content h1 {margin-bottom:25px; font-size:1.75em; text-transform:uppercase}		
		#main_content h2 {margin-bottom:15px; padding-top:20px; border-top:1px dotted #fff}
		#main_content p {margin-bottom:20px; line-height:1.25em}

/*##############################
	=Contact Page Styles
##############################*/

#errors {margin-bottom:30px; padding:30px; color:#860400; background:#fff; opacity:.8}
	#errors ul {list-style-type:none}
		#errors ul li {font-style:italic; font-weight:bold}
#main_content form input {padding:5px; width:95%; font-size:1em; border:1px solid #222}
#main_content form textarea {padding:5px; width:95%; font-family:Helvetica, Arial, sans-serif; font-size:1em; border:1px solid #333}
#main_content form #submit {width:30%; padding:10px; font-weight:bold; color:#0f1f1d; text-shadow:1px 1px #fff; background-color:#54cec1}

/*##############################
	=Portfolio Styles
##############################*/

#portfolio {clear:both; width:1235px; padding:0 35px 60px 35px}
	#portfolio article {clear:both; position:relative; padding:0; background:none}
	#logo-design, #illustration, #print-design {display:none}
		#portfolio nav {width:100%}
			#portfolio nav ul {float:left; width:100%; border-bottom:2px solid #111}
				#portfolio nav ul li {float:left; display:inline; width:25%; height:50px; background-color:#000; opacity:.6}
				#web_design_link {background:#000 url(../images/design/web-design.jpg) 50% 50% no-repeat}
				#logo_design_link {background:#000 url(../images/design/logo-design.jpg) 50% 50% no-repeat}
				#illustration_link {background:#000 url(../images/design/illustration.jpg) 50% 50% no-repeat}
				#print_design_link {background:#000 url(../images/design/print-design.jpg) 50% 50% no-repeat}
				#portfolio nav ul li:hover, #portfolio nav ul .active {opacity:1}
					#portfolio nav ul li a {display:block; width:100%; height:50px; text-indent:-999em}
							#potfolio nav ul li a:hover {border:none}

	/* =Carousel Styles */	
	.slidecontrols, .slide  {list-style-type:none}
	.slide {max-height:530px; height:auto; text-align:center; background:url(../images/text-bg.png) left top repeat}
		.next {position:absolute; right:-43px; top:35%; width:79px; height:113px; text-indent:-999em; background:transparent url(../images/next-arrow.png) left top no-repeat}
		.prev {position:absolute; left:-43px; top:35%; width:79px; height:113px; text-indent:-999em; background:transparent url(../images/previous-arrow.png) left top no-repeat}				
			a.next:hover, a.prev:hover {border:none}
	.carousel-tabs {clear:both}
	.carousel-active-tab {color:red}	
	.carousel-disabled, .mr-rotato-disabled {display:none}
	.slidewrap .carousel-tabs {padding:0; margin:1em 0; clear:both}
		.slidewrap .carousel-tabs li {display:inline-block; padding:0 2px}
			.slidewrap .carousel-tabs a {background:#ddd; display:inline-block; height:10px; text-indent:-9999px; width:10px; border-radius:5px}
		.ie .slidewrap .carousel-tabs li, .ie .slidewrap .carousel-tabs a {display:block; float:left}
			.slidewrap .carousel-tabs .carousel-active-tab a {background:#777}

			#feature .video {float:left; width:47.432024%}
				#feature .video iframe {float:left; display:inline; margin-right:20px; width:100%}
			#feature .video_info {float:right; width:47%}

/*##############################
	=Responsive Styles
##############################*/

@media only screen and (max-width:1273px) {
	header, section {width:80%}
		header nav {clear:both; float:left; margin:30px 0 0 0}
	#intro_content, #main_content {clear:both; float:left; width:670px; margin:0 35px 35px 35px}
	#about #intro_content, #contact #intro_content, #music #intro_content {display:none}
	#portfolio {width:92%}
		#portfolio img {max-width:100%}
}
@media only screen and (max-width:781px) {
	header, section {width:90%}
		header nav {width:100%}
			header nav #site_nav li {width:95px}
			header nav #social_networks {width:auto}
				header nav #social_networks li a {padding:25px 4px 0}
	#intro_content, #main_content {width:90%}
}
@media only screen and (max-width:733px) {
	header nav #site_nav {width:auto}
	header nav #social_networks {width:auto; border:none; background:none}
		header nav #social_networks #twitter {border:none}
			header nav #social_networks li a {padding:25px 2px 0}
}
@media only screen and (max-width:641px) {
	#home header #logo, header #logo {margin:15px auto 0 auto; float:none}	
	header nav {width:100%; height:auto}
		header nav #site_nav {height:auto}	
	header, section {width:100%; margin:0}
	#intro_content, #main_content {width:88.8%; margin:0}
	#portfolio {width:100%; margin:0; padding:0}
		.next {right:-5px}
		.prev {left:-5px}
}
@media only screen and (max-width:578px) {
	#home header #logo, header #logo {width:90%; height:auto}
		#home header #logo a, header #logo a {width:100%; height:auto}
			#home header #logo img, header #logo img {max-width:100%; height:auto}
	header nav #site_nav {width:100%}
		header nav #site_nav li {width:25%}
			header nav #site_nav li a {padding:35px 0; width:100%}
	header nav #social_networks {width:180px; margin:0 auto; float:none}
}
@media only screen and (max-width:485px) {
	#portfolio nav ul li {width:50%}
}
@media only screen and (max-width:347px) {
	header nav #site_nav li {width:50%}
	#portfolio nav ul li {width:100%}
	.next, .prev {top:0}
}