/* Screen Styles for Volacious Creative Media - Coded by Eric Murrell */

html {
	margin: 0;
	padding: 0;
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	font-size: 62.5%; /* enables you to easily size text with ems */
	color: #464646;
	font-family: Arial, Helvetica, sans-serif;
	background: url(../images/structure/header_background.jpg) repeat-x;
	height: 100%;
}

h1, h2, h3, h4, h5, h6, h7, p, form, ul, ol, li, blockquote { /* resets most browser styles to enhance cross-browser compatibility */
	margin: 0;
	padding: 0;
}

#main-content a:link, #footer a:link {color: #a1a1a1; text-decoration: none;}
#main-content a:visited, #footer a:visited {color: #a1a1a1; text-decoration: none;}
#main-content a:hover, #footer a:hover {color: #a1a1a1; text-decoration: none; border-bottom: 1px dotted #a1a1a1;}
#main-content a:active, #footer a:active {color: #a1a1a1; text-decoration: none;}

#main-content a.emphasis:link {font-style: italic; color: #46a7de; text-decoration: none; text-transform: uppercase;}
#main-content a.emphasis:visited {font-style: italic; color: #46a7de; text-decoration: none; text-transform: uppercase;}
#main-content a.emphasis:hover {font-style: italic; color: #46a7de; text-decoration: none; text-transform: uppercase;}
#main-content a.emphasis:active {font-style: italic; color: #46a7de; text-decoration: none; text-transform: uppercase;}

#container {
	width: 610px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -149px auto;
}

/* Main Navigation */

#main-navigation {
	position: absolute;
	top: 49px;
	margin: 0 0 0 300px;
}

#main-navigation li {
	float: left;
	list-style-type: none;
	color: #7a7a7b;
	font-size: 1.6em;
	text-transform: lowercase;
	margin: 0 30px 0 0;
}

#main-navigation li.services a:link {color: #7a7a7b; text-decoration: none; padding: 0 0 5px 0; border-bottom: 5px solid #46a7dd; display: block;}
#main-navigation li.services a:visited {color: #7a7a7b; text-decoration: none; padding: 0 0 5px 0; border-bottom: 5px solid #46a7dd; display: block;}
#main-navigation li.services a:hover {color: #7a7a7b; text-decoration: none; padding: 0 0 5px 0; border-bottom: 9px solid #46a7dd; display: block;}
#main-navigation li.services a:active {color: #7a7a7b; text-decoration: none; padding: 0 0 5px 0; border-bottom: 5px solid #46a7dd; display: block;}

#main-navigation li.portfolio a:link {color: #7a7a7b; text-decoration: none; padding: 0 0 5px 0; border-bottom: 5px solid #86b340; display: block;}
#main-navigation li.portfolio a:visited {color: #7a7a7b; text-decoration: none; padding: 0 0 5px 0; border-bottom: 5px solid #86b340; display: block;}
#main-navigation li.portfolio a:hover {color: #7a7a7b; text-decoration: none; padding: 0 0 5px 0; border-bottom: 9px solid #86b340; display: block;}
#main-navigation li.portfolio a:active {color: #7a7a7b; text-decoration: none; padding: 0 0 5px 0; border-bottom: 5px solid #86b340; display: block;}

#main-navigation li.about a:link {color: #7a7a7b; text-decoration: none; padding: 0 0 5px 0; border-bottom: 5px solid #b71f35; display: block;}
#main-navigation li.about a:visited {color: #7a7a7b; text-decoration: none; padding: 0 0 5px 0; border-bottom: 5px solid #b71f35; display: block;}
#main-navigation li.about a:hover {color: #7a7a7b; text-decoration: none; padding: 0 0 5px 0; border-bottom: 9px solid #b71f35; display: block;}
#main-navigation li.about a:active {color: #7a7a7b; text-decoration: none; padding: 0 0 5px 0; border-bottom: 5px solid #b71f35; display: block;}

#main-navigation li.contact a:link {color: #7a7a7b; text-decoration: none; padding: 0 0 5px 0; border-bottom: 5px solid #f16222; display: block;}
#main-navigation li.contact a:visited {color: #7a7a7b; text-decoration: none; padding: 0 0 5px 0; border-bottom: 5px solid #f16222; display: block;}
#main-navigation li.contact a:hover {color: #7a7a7b; text-decoration: none; padding: 0 0 5px 0; border-bottom: 9px solid #f16222; display: block;}
#main-navigation li.contact a:active {color: #7a7a7b; text-decoration: none; padding: 0 0 5px 0; border-bottom: 5px solid #f16222; display: block;}

#main-navigation li.services_s a:link, #main-navigation li.services_s a:visited, #main-navigation li.services_s a:hover, #main-navigation li.services_s a:active {color: #7a7a7b; text-decoration: none; padding: 0 0 5px 0; border-bottom: 9px solid #46a7dd; display: block;}
#main-navigation li.portfolio_s a:link, #main-navigation li.portfolio_s a:visited, #main-navigation li.portfolio_s a:hover, #main-navigation li.portfolio_s a:active {color: #7a7a7b; text-decoration: none; padding: 0 0 5px 0; border-bottom: 9px solid #86b340; display: block;}
#main-navigation li.about_s a:link, #main-navigation li.about_s a:visited, #main-navigation li.about_s a:hover, #main-navigation li.about_s a:active  {color: #7a7a7b; text-decoration: none; padding: 0 0 5px 0; border-bottom: 9px solid #b71f35; display: block;}
#main-navigation li.contact_s a:link, #main-navigation li.contact_s a:visited, #main-navigation li.contact_s a:hover, #main-navigation li.contact_s a:active {color: #7a7a7b; text-decoration: none; padding: 0 0 5px 0; border-bottom: 9px solid #f16222; display: block;}


/* Main Content */

#main-content {
	font-family: Myriad, Arial, Helvetica, sans-serif;
	margin: 16px 0 0 0;
}

/* Home Page Styles */

#home-copy {
	width: 345px;
	float: left;
}

#home-copy h2 {
	color: #46a7de;
	font-size: 2.2em;
	padding: 37px 0 26px 5px;
}

#home-copy p {
	font-family: Myriad, Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	line-height: 150%;
	padding: 0 0 15px 5px;
	text-indent: 1.5em;
}

/*--- */

#recently-hatched {
	width: 190px;
	float: left;
	margin: 0 0 0 57px;
}

#recently-hatched h3 {
	background: url(../images/structure/recently_hatched.jpg) no-repeat;
	display: block;
	width: 190px;
	height: 39px;
	text-indent: -9000px;
	margin: 37px 0 0 0;
}

.portfolio-thumb {
	background: url(../images/structure/portfolio_item_background.jpg) no-repeat;
	width: 190px;
	height: 90px;
	margin: 0 0 10px 0;
}

.portfolio-thumb img {
	margin: 5px 0 0 5px;
}

.portfolio-thumb h4 {
	margin: 4px 0 0 6px;
	font-size: 1em;
}

.portfolio-thumb2 {
	background: url(../images/structure/portfolio_item_background.jpg) no-repeat;
	width: 190px;
	height: 90px;
	margin: 0 10px 10px 0;
	float: left;
}

.portfolio-thumb2 img {
	margin: 5px 0 0 5px;
}

#subpage-content .portfolio-thumb2 h4 {
	margin: 4px 0 0 0;
	font-size: 1em;
}

#main-content .portfolio-thumb a:link, #main-content .portfolio-thumb h4 a:link, #main-content .portfolio-thumb2 a:link, #main-content .portfolio-thumb2 h4 a:link {color: #a5a5a4; text-decoration: none; font-size: 1.1em}
#main-content .portfolio-thumb a:visited, #main-content .portfolio-thumb h4 a:visited, #main-content .portfolio-thumb2 a:visited, #main-content .portfolio-thumb2 h4 a:visited {color: #a5a5a4; text-decoration: none; font-size: 1.1em}
#main-content .portfolio-thumb a:hover, #main-content .portfolio-thumb h4 a:hover, #main-content .portfolio-thumb2 a:hover, #main-content .portfolio-thumb2 h4 a:hover {color: #a5a5a4; text-decoration: none; font-size: 1.1em; border-bottom: none;}
#main-content .portfolio-thumb a:active, #main-content .portfolio-thumb h4 a:active, #main-content .portfolio-thumb2 a:active, #main-content .portfolio-thumb2 h4 a:active {color: #a5a5a4; text-decoration: none; font-size: 1.1em}

/* footer */

.footer-padding {
	height: 149px;
}

#footer {
	height: 99px;
	width: 100%;
	background-color: #cecece;
	margin: 36px 0 0 0;
	padding: 10px 0 0 0;
	border-top: 4px solid #eaeaea;
}

.inner-footer {
	background-color: #d7d7d7;
	width: 610px;
	margin: 0 auto;
}

.inner-footer img {
	float: left;
	margin: 4px 10px 4px 10px;
}

.inner-footer strong {
	color: #727272;
	font-weight: 300;
}

.inner-footer p {
	font-size: 1.2em;
	color: #cecece;
	padding: 14px 0 0 0;
}

#footer .inner-footer a.footer-quote:link {color: #46a7de;}
#footer .inner-footer a.footer-quote:visited {color: #46a7de;}
#footer .inner-footer a.footer-quote:hover {color: #46a7de;}
#footer .inner-footer a.footer-quote:active {color: #46a7de;}

/* sub navigation */

#sub-navigation {
	width: 174px;
	float: left;
}

#sub-navigation ul {
	margin: 36px 0 0 0;
}

#sub-navigation li {
	list-style-type: none;
	margin: 0 0 5px 0;
}
#sub-navigation li.seperate {
	margin: 11px 0 5px 0;
}

#sub-navigation li a:link {display: block; color: #fff; background-color: #979797; width: 158px; padding: 4px; text-transform: uppercase; font-weight: 700; border-bottom: none; border-left: 10px #ccc solid;}
#sub-navigation li a:visited {display: block; color: #fff; background-color: #979797; width: 158px; padding: 4px; text-transform: uppercase; font-weight: 700; border-bottom: none; border-left: 10px #ccc solid;}
#sub-navigation li a:hover {display: block; color: #fff; background-color: #979797; width: 152px; padding: 4px 4px 4px 10px; text-transform: uppercase; font-weight: 700; border-bottom: none; border-left: 10px #ccc solid;}
#sub-navigation li a:active {display: block; color: #fff; background-color: #979797; width: 152px; padding: 4px 4px 4px 10px; text-transform: uppercase; font-weight: 700; border-bottom: none;}

#sub-navigation li.seperate a:link {display: block; color: #fff; background-color: #aeadae; width: 158px; padding: 4px; text-transform: uppercase; font-weight: 700; border-bottom: none;}
#sub-navigation li.seperate a:visited {display: block; color: #fff; background-color: #aeadae; width: 158px; padding: 4px; text-transform: uppercase; font-weight: 700; border-bottom: none;}
#sub-navigation li.seperate a:hover {display: block; color: #fff; background-color: #aeadae; width: 158px; padding: 4px; text-transform: uppercase; font-weight: 700; border-bottom: none;}
#sub-navigation li.seperate a:active {display: block; color: #fff; background-color: #aeadae; width: 158px; padding: 4px; text-transform: uppercase; font-weight: 700; border-bottom: none;}

#sub-navigation.portfolio-nav li.seperate.selected a:link {display: block; color: #fff; background-color: #aeadae; width: 158px; padding: 4px; text-transform: uppercase; font-weight: 700; border-bottom: none; border-left: 10px #86b340 solid;}
#sub-navigation.portfolio-nav li.seperate.selected a:visited {display: block; color: #fff; background-color: #aeadae; width: 158px; padding: 4px; text-transform: uppercase; font-weight: 700; border-bottom: none; border-left: 10px #86b340 solid;}
#sub-navigation.portfolio-nav li.seperate.selected a:hover {display: block; color: #fff; background-color: #aeadae; width: 152px; padding: 4px 4px 4px 10px; text-transform: uppercase; font-weight: 700; border-bottom: none; border-left: 10px #86b340 solid;}
#sub-navigation.portfolio-nav li.seperate.selected a:active {display: block; color: #fff; background-color: #aeadae; width: 152px; padding: 4px 4px 4px 10px; text-transform: uppercase; font-weight: 700; border-bottom: none; border-left: 10px #86b340 solid;}

#sub-navigation.services-nav li.selected a:link {display: block; color: #fff; background-color: #979797; width: 158px; padding: 4px; text-transform: uppercase; font-weight: 700; border-bottom: none; border-left: 10px #46a7dd solid;}
#sub-navigation.services-nav li.selected a:visited {display: block; color: #fff; background-color: #979797; width: 158px; padding: 4px; text-transform: uppercase; font-weight: 700; border-bottom: none; border-left: 10px #46a7dd solid;}
#sub-navigation.services-nav li.selected a:hover {display: block; color: #fff; background-color: #979797; width: 152px; padding: 4px 4px 4px 10px; text-transform: uppercase; font-weight: 700; border-bottom: none; border-left: 10px #46a7dd solid;}
#sub-navigation.services-nav li.selected a:active {display: block; color: #fff; background-color: #979797; width: 152px; padding: 4px 4px 4px 10px; text-transform: uppercase; font-weight: 700; border-bottom: none; border-left: 10px #46a7dd solid;}

#sub-navigation.portfolio-nav li.selected a:link {display: block; color: #fff; background-color: #979797; width: 158px; padding: 4px; text-transform: uppercase; font-weight: 700; border-bottom: none; border-left: 10px #86b340 solid;}
#sub-navigation.portfolio-nav li.selected a:visited {display: block; color: #fff; background-color: #979797; width: 158px; padding: 4px; text-transform: uppercase; font-weight: 700; border-bottom: none; border-left: 10px #86b340 solid;}
#sub-navigation.portfolio-nav li.selected a:hover {display: block; color: #fff; background-color: #979797; width: 152px; padding: 4px 4px 4px 10px; text-transform: uppercase; font-weight: 700; border-bottom: none; border-left: 10px #86b340 solid;}
#sub-navigation.portfolio-nav li.selected a:active {display: block; color: #fff; background-color: #979797; width: 152px; padding: 4px 4px 4px 10px; text-transform: uppercase; font-weight: 700; border-bottom: none; border-left: 10px #86b340 solid;}

#sub-navigation.about-nav li.selected a:link {display: block; color: #fff; background-color: #979797; width: 158px; padding: 4px; text-transform: uppercase; font-weight: 700; border-bottom: none; border-left: 10px #b71f35 solid;}
#sub-navigation.about-nav li.selected a:visited {display: block; color: #fff; background-color: #979797; width: 158px; padding: 4px; text-transform: uppercase; font-weight: 700; border-bottom: none; border-left: 10px #b71f35 solid;}
#sub-navigation.about-nav li.selected a:hover {display: block; color: #fff; background-color: #979797; width: 152px; padding: 4px 4px 4px 10px; text-transform: uppercase; font-weight: 700; border-bottom: none; border-left: 10px #b71f35 solid;}
#sub-navigation.about-nav li.selected a:active {display: block; color: #fff; background-color: #979797; width: 152px; padding: 4px 4px 4px 10px; text-transform: uppercase; font-weight: 700; border-bottom: none; border-left: 10px #b71f35 solid;}

#sub-navigation.contact-nav li.selected a:link {display: block; color: #fff; background-color: #979797; width: 158px; padding: 4px; text-transform: uppercase; font-weight: 700; border-bottom: none; border-left: 10px #f16222 solid;}
#sub-navigation.contact-nav li.selected a:visited {display: block; color: #fff; background-color: #979797; width: 158px; padding: 4px; text-transform: uppercase; font-weight: 700; border-bottom: none; border-left: 10px #f16222 solid;}
#sub-navigation.contact-nav li.selected a:hover {display: block; color: #fff; background-color: #979797; width: 152px; padding: 4px 4px 4px 10px; text-transform: uppercase; font-weight: 700; border-bottom: none; border-left: 10px #f16222 solid;}
#sub-navigation.contact-nav li.selected a:active {display: block; color: #fff; background-color: #979797; width: 152px; padding: 4px 4px 4px 10px; text-transform: uppercase; font-weight: 700; border-bottom: none; border-left: 10px #f16222 solid;}


/* portfolio container */

#portfolio-container {
	width: 400px;
	float: left;
	margin: 36px 0 0 36px;
}

.big-portfolio-image {
	width: 400px;
	height: 240px;
	background: url(../images/structure/big_portfolio.gif) no-repeat;
}

.big-portfolio-image img {
	margin: 4px 0 0 4px;
}

.portfolio-thumbs {
	width: 378px;
	border-top: 1px solid #dfdede;
	padding-left: 22px;
	margin: 0 0 20px 0;
}

.portfolio-thumbs li {
	list-style-type: none;
	display: block;
	width: 48px;
	height: 43px;
	background: url(../images/structure/portfolio_thumb.gif) no-repeat;
	margin: -1px 6px 0 0;
	float: left;
}

.portfolio-thumbs li img {
	margin: 0 0 0 4px;
	border: 0;
}

#main-content .portfolio-thumbs li a:link {border-bottom: none;}
#main-content .portfolio-thumbs li a:visited {border-bottom: none;}
#main-content .portfolio-thumbs li a:hover {border-bottom: none;}
#main-content .portfolio-thumbs li a:active {border-bottom: none;}

.portfolio-left {
	float: left;
	width: 260px;
}

.portfolio-left h3 {
	margin: 20px 0 10px 0;
	font-size: 1.8em;
	font-weight: 600;
}

.portfolio-left p {
	font-size: 1.1em;
	line-height: 120%;
	padding: 0 0 15px 0;
}

.portfolio-right {
	float: left;
	width: 120px;
	margin: 0 0 0 20px;
}

.portfolio-right h4 {
	margin: 22px 0 10px 0;
	font-size: 1.4em;
	font-weight: 600;
}

.portfolio-right li {
	list-style-type: none;
	margin: 0 0 5px 5px;
}

#main-content a.website-link:link {display: block; width: 89px; height: 16px; background: url(../images/structure/view_website_background.jpg); color: #fff; text-transform: uppercase; font-size: 1.1em; border-bottom: none; padding: 5px 0 0 10px; position: absolute; margin: 12px 0 0 280px;}
#main-content a.website-link:visited {display: block; width: 89px; height: 16px; background: url(../images/structure/view_website_background.jpg); color: #fff; text-transform: uppercase; font-size: 1.1em; border-bottom: none; padding: 5px 0 0 10px; position: absolute; margin: 12px 0 0 280px;}
#main-content a.website-link:hover {display: block; width: 89px; height: 16px; background: url(../images/structure/view_website_background.jpg); color: #fff; text-transform: uppercase; font-size: 1.1em; border-bottom: none; padding: 5px 0 0 10px; position: absolute; margin: 12px 0 0 280px;}
#main-content a.website-link:active {display: block; width: 89px; height: 16px; background: url(../images/structure/view_website_background.jpg); color: #fff; text-transform: uppercase; font-size: 1.1em; border-bottom: none; padding: 5px 0 0 10px; position: absolute; margin: 12px 0 0 280px;}


/* subpages */

#subpage-content {
	width: 400px;
	float: left;
	margin: 36px 0 0 36px;
}

#subpage-content p {
	font-family: Myriad, Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	line-height: 150%;
	padding: 0 0 15px 5px;
	text-indent: 1.5em;
}

#subpage-content h2.services {
	color: #46a7de;
	font-size: 2.2em;
	font-weight: 300;
	padding: 0 0 8px 5px;
}

#subpage-content h2.portfolio {
	color: #86b340;
	font-size: 2.2em;
	font-weight: 300;
	padding: 0 0 8px 5px;
}

#subpage-content h2.about {
	color: #b71f35;
	font-size: 2.2em;
	font-weight: 300;
	padding: 0 0 8px 5px;
}

#subpage-content h2.contact {
	color: #f16222;
	font-size: 2.2em;
	font-weight: 300;
	padding: 0 0 8px 5px;
}

#subpage-content h3 {
	font-weight: 300;
	font-size: 1.6em;
	padding: 0 0 20px 5px;
}

#subpage-content h4 {
	font-weight: 700;
	font-size: 1.6em;
	padding: 0 0 20px 5px;
}

#subpage-content h4.services {
	font-weight: 300;
	font-size: 1.6em;
	padding: 0 0 10px 0;
	color: #46a7de;
}

#subpage-content h4.services a:link, #subpage-content h4.services a:visited, #subpage-content h4.services a:hover, #subpage-content h4.services a:active { text-decoration: none; color: #aeadae; border-bottom: 1px dotted #aeadae;}

#subpage-content .decoration {
	float: right;
	margin: 0 0 10px 10px;
}

#subpage-content ul {
	margin: 0 0 35px 0;
}

#subpage-content ul li {
	list-style-type: none;
	margin: 0 0 10px 20px;
	font-size: 1.2em;
	background: url(../images/structure/question.jpg) no-repeat;
	padding: 3px 0 3px 20px;
}

#subpage-content img.float-right {
	float: right;
	margin: 0 0 10px 14px;
}

/* services provided lists */

#sub-navigation h4 {
	font-size: 1.4em;
	margin:  30px 0 10px 0;
}

#sub-navigation ul#services-provided {
	margin: 0;
}
#sub-navigation #services-provided li {
	list-style-type: disc;
	margin: 0 0 5px 20px;
	font-size: 1.2em;
}

/* contact forms */

#contact-form-table {
	margin: 20px 0 0 0;
}

#contact-form-table td {
	vertical-align: top;
}

#contact-form-table td.label-cell {
	padding: 2px 5px 0 10px;
}

#contact-form-table label {
	color: #464646;
	font-size: 1.2em;
	font-weight: 700;
}

#contact-form-table input {
	background-color: #eaeaea;
	border: 1px solid #eaeaea;
	padding: 2px;
	margin: 0 0 12px 0;
}

#contact-form-table select {
	background-color: #eaeaea;
	border: 1px solid #eaeaea;
	padding: 2px;
	margin: 0 0 12px 0;
}

#contact-form-table textarea {
	background-color: #eaeaea;
	border: 1px solid #eaeaea;
	padding: 2px;
	margin: 0 0 12px 0;
	font-family: Arial, Helvetica, sans-serif;
}

.submit-button {
	margin: 0 0 0 300px;
}

#subpage-content h3.delivered-message {
	font-size: 1.2em;
	font-weight: 700;
	color: #f16222;
	margin: 10px 0 0 0;
}