/* Dragon Labs | Core Stylesheet 

Table of Contents

&&> 1. Typography
&&&&>  a. Paragraphs
&&&&>  b. Headings
&&&&>  c. Links
&&&&>  d. Lists
&&&&>  e. Link Lists
&&&&>  f. Block Quotes
&&&&>  g. Four Eyes

&&> 2. Navigation
&&&&>  a. Positioning
&&&&>  b. Buttons
&&&&>  c. Hover
&&&&>  d. Current Page

&&> 3. Header
&&&&>  a. Basics
&&&&>  b. Link
&&&&>  c. Splash
&&&&>  d. Page Specifics

&&> 4. North
&&&&>  a. Basics

&&> 5. South
&&&&>  a. Basics
&&&&>  a. Freshmen
&&&&>  c. Left
&&&&>  d. Center
&&&&>  e. Right

&&> 6. Footer
&&&&>  a. Basics
&&&&>  b. Sitemap

&&> 7. Sitemap
&&&&>  a. Basics
&&&&>  b. Definitions
&&&&>  b. Links

&&> 8. Anorexia
&&&&>  a. Basics


&&> z. Portfolio
&&&&>  a. Basics
&&&&>  b. Panels

&&> y. Contact
&&&&>  a. Basics
&&&&>  b. Contact Form

&&> x. Engines
&&&&>  a. Octopus Engine
&&&&>  b. Jellyfish
&&&&>  c. Marshmallow
&&&&>  d. Mocha

&&> x+1. Patches
&&&&>  a. Clearfix

*//* Let the games begin! */

html * {
	margin: 0;
	padding: 0;
	}


body {
	background: #131313 url(../i/background.gif) repeat-x top;
	color: #ccc;
	font: 11px/20px "lucida grande",verdana,sans-serif;
	}


/* --- Closed */

/* -- Closed --*/

.light {
	background: #111;
	position: absolute;
	border: 3px solid #ccc;
	padding: 35px 100px;
	position: absolute;
	top: 150px;
	left: 50%;
	margin: 0 0 0 -180px;
	z-index: 10;
	}

#darkness {
	background: #000;
	display: block;
	position: fixed;
	top: 0;
	left: 0;

	filter:alpha(opacity=90);
	-moz-opacity: 0.9;
	opacity: 0.85;

	height: 1900px;
	width: 2560px;
	}

/*&&&&&> 1. Typography */

/*&&&>  a. Paragraphs */

#south p {
	background: transparent;
	color: #ccc;
	font: 11px/20px "lucida grande",verdana,sans-serif;
	margin: 0 0 5.5px 0;
	}

/*&&&>  b. Headings */

#south h1,#south h1 a {
	color: #ffce40;
	font: 16px/20px "lucida grande","trebuchet ms",verdana,sans-serif;
	margin: 0 0 5px 0;
	text-decoration: none;
	}

#south h1 a:hover {
	color: #fff2b5;
	}


#south h2,#south h2 a,#south h1 span a {
	color: #6dcff6;
	font: 13px/20px "lucida grande","trebuchet ms",verdana,sans-serif;
	margin: 0;
	text-decoration: none;
	}

#south h2 a,#south h1 span a {
	padding: 0 13px 0 0;
	background: url(../i/raquo_blue.gif) no-repeat right -2px;
	}

#south h1 span a {
	margin: 0 3px 0 6px;
	}

.foureyes #south h2 a {
	background-position: right 5px;
	}

#south h2 a:visited {
	}

.foureyes #south h2 a:visited {
	background-position: right 4px;
	}

#south h2 a:hover,#south h1 span a:hover {
	color: #b6e7fb;
	background-image: url(../i/raquo_blue_light.gif);
	}

#south h3 {
	font: 11px/20px "lucida grande","trebuchet ms",verdana,sans-serif;
	color: #b6e7fb;
	margin: 0 0 5.5px 0;
	}

/*&&&>  c. Links */

#south p a,#splash p a {
	background: url(../i/raquo_blue.gif) no-repeat right -3px;
	color: #6dcff6;
	padding: 0 11px 0 0;
	text-decoration: none;
	}

.foureyes #south p a,.foureyes #splash p a {
	text-decoration: underline;
	}

#south p a:visited,#splash p a:visited {
	text-decoration: none;
	}

.foureyes #south p a,.foureyes #splash p a {
	color: #b6e7fb;
	color: #5ae;
	}

#south p a:hover,#splash p a:hover {
	color: #b6e7fb;
	background-image: url(../i/raquo_blue_light.gif);
	}

.foureyes #south p a:hover,.foureyes #splash p a:hover {
	color: #fff;
	}

#south p a:active,#splash p a:active,#south h2 a:active {
	background-image: url(../i/raquo_green.gif);
	color: #acf128;
	}

#south p a:visited:hover,splash p a:visited:hover,#south h2 a:visited:hover {
	background-image: url(../i/raquo_green.gif);
	}

/*&&&>  e. Link Lists */

#south ul {
	list-style: none;
	margin: 0 0 11px 0;
	}

#south ul a {
	background: url(../i/raquo_blue_light.gif) no-repeat 0 2px;
	display: block;
	color: #999;
	padding: 3px 0 3px 17px;
	text-decoration: none;
	}

#south ul a:hover {
	color: #b6e7fb;
	background-image: url(../i/raquo_blue.gif);
	}

#south ul a.current {
	background-image: url(../i/raquo_orange.gif);
	color: #fff;
	}

/*&&&>  e. Link Lists -- Definitions */

#south dl {
	margin: 0 0 5.5px 0;
	}

#south dl dt a {
	background: url(../i/raquo_777.gif) no-repeat 0 2px;
	display: block;
	color: #999;
	padding: 3px 0 0px 14px;
	text-decoration: none;
	}

#south dl dd  {
	color: #555;
	margin: 0 0 5.5px 0;
	}	

#south dl dt a:hover {
	color: #bbb;
	background-image: url(../i/raquo_blue.gif);
	}
	
#south dl dt a.current {
	background-image: url(../i/raquo_orange.gif);
	color: #fff;
	}

#south dl dt a.current:hover {
	color: #ddd;
	}

/*&&&>  g. Four Eyes */

.foureyes #south p {
	font: 13px/24px "lucida grande",verdana,sans-serif;
	}

.foureyes #south h2,.foureyes #south h2 a {
	font: 16px/24px "trebuchet ms",verdana,sans-serif;
	}

.foureyes #south h1 {
	font: 22px/24px "lucida grande","trebuchet ms",verdana,sans-serif;
	}

.foureyes #footer {
	font-size: 14px;
	}

/*&&&&&> 2. Navigation */

/*&&&>  a. Positioning */

#navigation {
	overflow: hidden;
	list-style: none;
	
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0 0 0 -350px;
	
	height: 50px;
	width: 700px;
	}

/*&&&>  b. Buttons */

#navigation li {
	float: left;
	height: 50px;
	margin: 0 1px 0 0;
	}

#navigation li a {
	background: url(../i/navigation.jpg) no-repeat top center;
	color: #ccc;
	display: block;
	font: 11px/48px arial,sans-serif;
	padding: 0 25px;
	text-decoration: none;
	height: 50px;
	}

#navigation a span {
	visibility: hidden;
	}

#navigation .back {
	margin: 0 15px 0 0;
	visibility: hidden;
	}

.back #navigation .back {
	display: block; 
	}

#navigation li a.home {
	background-position: center -700px;
	}

#navigation li a.articles {
	background-position: center -750px;
	}

#navigation li a.services {
	background-position: center -800px;
	}

#navigation li a.portfolio {
	background-position: center -850px;
	}

#navigation li a.about {
	background-position: center -900px;
	}

#navigation li a.contact {
	background-position: center -950px;
	}

#navigation li a.back {
	background-position: center -1000px;
	}
	
/*&&&>  c. Hover */

#navigation a:hover {
	color: #66ccff;
	}

#navigation li a.home:hover {
	background-position: center -350px;
	}

#navigation li a.articles:hover {
	background-position: center -400px;
	}

#navigation li a.services:hover {
	background-position: center -450px;
	}

#navigation li a.portfolio:hover {
	background-position: center -500px;
	}

#navigation li a.about:hover {
	background-position: center -550px;
	}

#navigation li a.contact:hover {
	background-position: center -600px;
	}

#navigation li a.back:hover {
	background-position: center -650px;
	}

/*&&&>  d. Current Page */

.home #navigation li .home {
	color: #ffce40 !important;
	}

.home #navigation li a.home {
	background-position: center -0px;
	}

.articles #navigation li a.articles {
	background-position: center -50px;
	}

.services #navigation li a.services  {
	background-position: center -100px;
	}

.portfolio #navigation li a.portfolio  {
	background-position: center -150px;
	}

.about #navigation li a.about  {
	background-position: center -200px;
	}

.contact #navigation li a.contact  {
	background-position: center -250px;
	}

.back #navigation li a.back  {
	background-position: center -300px;
	}

/*&&&>  e. Active */

#navigation li a.home:active {
	background-position: center -1050px;
	}

#navigation li a.articles:active {
	background-position: center -1100px;
	}

#navigation li a.services:active  {
	background-position: center -1150px;
	}

#navigation li a.portfolio:active  {
	background-position: center -1200px;
	}

#navigation li a.about:active  {
	background-position: center -1250px;
	}

#navigation li a.contact:active  {
	background-position: center -1300px;
	}

#navigation li a.back:active  {
	background-position: center -1350px;
	}

/*&&&&&> 3. Header */

/*&&&>  a. Basics */

#header {
	background: #333 url(../i/header_2.jpg) no-repeat top center;
	margin: 10px;
	position: relative;
	height: 138px;
	}
	
.freshman #header {
	background-image: url(../i/header_welcome.jpg);
	}

#header img {
	display: none;
	}

/*&&&>  b. Link */


#header a {
	border: 0 none;
	display: block;
	position: absolute;
	top: 10px;
	left: 50%;
	width: 125px;
	margin: 0 0 0 -90px;
	height: 120px;
	}

.anorexia #header a {
	display: none;
	}

#header a span {
	display: none;
	}

.freshman #header a {
	width: 350px;
	margin: 0 0 0 -175px;
	height: 75px;
	top: 75px;
	}

/*&&&&&> 4. North */

/*&&&>  a. Basics */

#north {
	max-width: 1024px;
	margin: 60px auto 10px auto;
	}
	
#north .container {
	width: auto;
	padding: 0;
	margin: 0 auto;
	text-align: left;
	}

/*&&&&&> 5. South */

/*&&&>  a. Basics */

#south {
	background: url(../i/south.gif) repeat-x top;
	text-align: center;
	padding: 10px 10px 15px 20px;
	}

#south .container,#sitemap .container {
	width: auto;
	max-width: 994px;
	padding: 0;
	margin: 0 auto;
	text-align: left;
	}

/*&&&>  b. Freshman */

.senior #south .freshman {
	display: none;
	}

.freshman #south .freshman {
	display: block;
	}

/*&&&>  c. Left */

#south .west {
	float: left;
	width: 275px;
	}

/*&&&>  d. Center */

#south .center {
	margin: 0 310px 0 285px;
	}

/*&&&>  e. Right */

#south .east {
	float: right;
	width: 300px;
	padding: 0 0 10px 0;
	}

/*&&&&&> 6. Footer */

/*&&&>  a. Basics */

#footer {
	background: url(../i/footer_blue.jpg) repeat-x top;
	clear: both;
	color: #ccc;
	padding: 2px 0 0 0;
	height: 135px;
	text-align: center;
	}

#footer p {
	background: url(../i/footer_blue_glow.jpg) no-repeat top center;
	padding: 25px 0 0 0;
	}

/*&&&>  b. Font Sizer */

#footer a {
	color: #ccc;
	text-decoration: none;
	cursor: pointer;
	}

#footer .font_foureyes {
	color: #aaa;
	font: 700 14px verdana,sans-serif;
	}

#footer .font_normal {
	color: #aaa;
	font: 700 10px verdana,sans-serif;
	}

#footer .font_normal,.foureyes #footer .font_foureyes {
	color: #66ccff;
	color: #ffce40;
	}

#footer a:hover {
	color: #66ccff;
	}

.foureyes #footer .font_normal {
	color: #aaa;
	}

/*&&&&&> 7. Sitemap */

/*&&&>  a. Basics */

#sitemap {
	background: url(../i/south.jpg) repeat-x top;
	clear: both;
	display: none;
	padding: 10px 10px 15px 20px;
	text-align: center;
	}

#sitemap h1 {
	display: none;
	}

#sitemap dl {
	float: left;
	width: 45%;
	margin: 0;
	}	

/*&&&>  b. Definitions */

/*&&&>  c. Links */

#sitemap dt,#sitemap dt a {
	color: #ffce40;
	font: 16px "trebuchet ms",verdana,sans-serif;
	margin: 0 0 3px 0;
	text-decoration: none;
	}

#sitemap dd dt,#sitemap dd dt a {
	color: #6dcff6;
	font: 13px/20px "trebuchet ms",verdana,sans-serif;
	margin: 0;
	}

#sitemap dd dt a:hover {
	color: #b6e7fb;
	}

/*&&&&&> 8. Anorexia */

.anorexia #header {	
	background-image: url(../i/header_narrow.jpg);
	height: 111px;
	}

.anorexia #south .east,.anorexia #south .west,.anorexia #south .center {
	background: url(../i/horizontal_stripe.jpg) repeat-x top;
	padding: 10px 0 5px 0;
	margin: 0;
	float: none;
	width: auto;
	}

.anorexia #south .west {
	background: transparent;
	padding: 0 0 5px 0;
	}

/*&&&>  a. Basics */


/*&&&&&> 9. Light Header */

/*&&&>  a. Logo */

#header_light {
	background: url(../i/logo_light.gif) no-repeat top right;
	float: left;
	width: 150px;
	height: 150px;
	margin: 0 0 0 120px;
	}

#header_light img,#header_light span {
	display: none;
	}

#header_light a {
	display: block;
	width: 100%;
	height: 100%;
	}

/*&&&>  b. Splash */

#splash {
	font: 11px/22px "lucida grande","trebuchet ms",verdana,sans-serif;
	margin: 0 0 0 305px;
	padding: 10px 20px 0 0;
	}

#splash p {
	margin: 0 0 10px 0;
	}

/*&&&&&> 10. Page Layout 2 - Contact */

/*&&&>  a. Left */

.contact #south .west,.about #south .west {
	text-align: right;
	padding: 0 15px 0 0;
	width: 245px;
	}

.contact #south .west p,.about #south .west p {
	margin: 0;
	}

.contact #south .west h2,.about #south .west h2 {
	margin: 5.5px 0;
	}

.contact #south .center,.about #south .center {
	margin-right: 5px;
	}

/*&&&>  b. Stripes */

.contact .container,.about #south .container {
	background: url(../i/vertical_stripe.jpg) repeat-y 285px 0;
	}

.contact #south .container,.about #south .container {
	background-position: 265px 0;
	}


/*&&&&&> 11. Page Layout 3 - Articles / Portfolio*/

.articles #south .center,.portfolio #south .center {
	margin-right: 0;
	}

/*&&&&&> 12. Contact Form */

.contact fieldset {
	border: 0 none;
	width: auto;
	}

.contact #formInstructions,.contact #emailSuccess,.contact #formInstructions {
	float: right;
	margin: 25px 10% 0 10px;
	text-align: left;
	padding: 0 5% 0 0;
	width: auto;
	width: 40%;
	}

.contact label {
	padding: 5px 0 5px 0;
	}

.contact input,.contact textarea {
	background: #111;
	border: 1px solid #222;
	margin: 5.5px 0;
	}

.contact #posName,.contact #posEmail {
	background: url(../i/input_raquo_grey.jpg) no-repeat top left;
	display: block;
	color: #999;
	font: 12px/22px "lucida grande","trebuchet ms",verdana,sans-serif;
	padding: 4px 35px 4px 7px;
	width: 205px;
	height: 16px;
	}

.contact #posText {
	background: url(../i/textarea_raquo_grey.jpg) no-repeat top left;
	display: block;
	color: #999;
	font: 12px/22px "lucida grande","trebuchet ms",verdana,sans-serif;
	padding: 4px 35px 4px 7px;
	height: 90px;
	width: 600px;
	}

#sendContactEmail {
	color: #ccc;
	padding: 7px 15px;
	width: 250px;
	}

#contactFormArea input:hover {
	background-image: url(../i/input_raquo_orange.jpg);
	}

#contactFormArea input:focus{
	background-image: url(../i/input_raquo_blue.jpg);
	color: #ccc;
	border-color: #292929;
	}

#contactFormArea #posText:hover {
	background-image: url(../i/textarea_raquo_orange.jpg) !important;
	}

#contactFormArea #posText:focus {
	background-image: url(../i/textarea_raquo_blue.jpg) !important;
	color: #ccc;
	border-color: #292929;
	}

/*&&&&&> 13. Portfolio Page*/

.portfolio #south .west p {
	color: #555;
	}

.portfolio .center {
	margin: 0;
	}

.portfolio a.jellyfish {
	background: #111 url(../i/portfolio/exploding.jpg) no-repeat center center;
	border: 1px solid #252525;
	display: block;
	margin: 10px 0 5px 0;
	max-width: 760px;
	padding: 0;
	height: 187px;
	width: auto;
	}

.anorexia.portfolio a.jellyfish {
	max-width: 800px;
	margin: 15px auto 10px auto;
	}

.portfolio a.jellyfish .border {
	border: 1px solid #111;
	border-width: 0 1px;
	padding: 5px 0 0 0;
	}

.portfolio a.jellyfish:hover .borderbottom {
	background: url(../i/portfolio_stripe_top_blue.jpg) no-repeat bottom center;
	}

.portfolio a.jellyfish:hover .border {
	background: url(../i/portfolio_stripe_top_blue.jpg) no-repeat top center;
	}

.portfolio a.jellyfish .borderbottom {
	padding: 0 0 5px 0;
border: 0 none;
	}

.portfolio .jellyfish img {
	display: none;
	}

.portfolio a.jellyfish .north {
	border: 1px solid #252525;
	filter: alpha(opacity=100); 
	-moz-opacity: 1;
	opacity: 1;
	}

.jellyfish .borderbottom * { /* Resets .east & .west attributes */
	margin: 0 !important;
	float: none !important;	
	width: auto !important;
	padding: 0 !important;
	}

.portfolio .jellyfish .nw {
	height: 160px;
	}

#exploding {
	background-image: url(../i/portfolio/exploding.jpg);
	}

#upward {
	background-image: url(../i/portfolio/upward.jpg);
	}

#natural {
	background-image: url(../i/portfolio/natural.jpg);
	}

#april {
	background-image: url(../i/portfolio/april.jpg);
	}
	
#trinity {
	background-image: url(../i/portfolio/trinity.jpg);
	}
	
#hollywood {
	background-image: url(../i/portfolio/hollywood.jpg);
	}

#gearworx {
	background-image: url(../i/portfolio/gearworx.jpg);
	}

#justmoon {
	background-image: url(../i/portfolio/justmoon.jpg);
	}

#indieed {
	background-image: url(../i/portfolio/indieed.jpg);
	}

#social {
	background-image: url(../i/portfolio/social.jpg);
	}
	
#brentshapiro {
	background-image: url(../i/portfolio/brentshapiro.jpg);
	}

#mediastorm {
	background-image: url(../i/portfolio/mediastorm.jpg);
	}

#gillis {
	background-image: url(../i/portfolio/gillis.jpg);
	}

/* Engines */

/*&&&>  b. Jellyfish */

.jellyfish {
	border: 1px solid #262626;
	}

.jellyfish * {
	border: 1px solid #000;
	}

.jellyfish .north {  
	filter: alpha(opacity=70); 
	-moz-opacity: .75;
	opacity: .75;}
.jellyfish .east { 
	filter: alpha(opacity=60); 
	-moz-opacity: .7;
	opacity: .70;}
.jellyfish .south { 
	filter: alpha(opacity=50); 
	-moz-opacity: .7;
	opacity: .7;}
.jellyfish .west { 
	filter: alpha(opacity=30); 
	-moz-opacity: .6;
	opacity: .6;}
.jellyfish .ne { 
	filter: alpha(opacity=15); 
	-moz-opacity: .6;
	opacity: .6;}
.jellyfish .se { 
	filter: alpha(opacity=10); 
	-moz-opacity: 6;
	opacity: .6;}
.jellyfish .sw { 
	filter: alpha(opacity=5); 
	-moz-opacity: .3;
	opacity: .3;}
.jellyfish .nw { 
	filter: alpha(opacity=2); 
	-moz-opacity: .3;
	opacity: .3;}

#header .nw {
	height: 122px; /* 138 - 16 = 122 */
	}

.anorexia #header .nw {
	height: 95px;
	}

/* Patches */

/*&&&>  a. Clearfix */

.clear {
	clear: both;
	}

.clearfix:after {
	content: "."; 
	display: block;
	height: 0; 
	clear: both; 
	visibility: hidden;
	}
	
.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */