/*&&&&&>> Dragon Labs | Table of Contents 

&&> 1. Typography
&&&&>  a. General
&&&&>  b. Headings
&&&&>  c. Hyperlinks
&&&&>  d. Lists
&&&&>  e. Blockquotes

&&> 2. Navigation
&&&&>  a. General
&&&&>  b. Hover
&&&&>  c. Current

&&> 3. Page Structure
&&&&>  a. General
&&&&>  b. Header
&&&&>  c. splash
&&&&>  d. Left Column
&&&&>  e. Center Column
&&&&>  e. Right Column
&&&&>  g. Footer
&&&&>  h. Dual Column
&&&&>  i. Portfolio
&&&&>  j. Contact
&&&&>  k. Error
&&&&>  l. Home
&&&&>  m. Articles

&&> 4. Engines
&&&&>  a. Octopus Engine
&&&&>  b. Jellyfish

&&> 5. Patches
&&&&>  a. Clearfix
&&&&>  b. Clearfix

Begin Style.css */

html * {
	font: 12px/22px "Trebuchet MS",verdana,sans-serif;
	margin: 0;
	padding: 0;
	}

body {
	background: #222 url(../i/background.png) repeat-x top;
	padding: 60px 0 0px 0;
	margin: 0 auto;
	min-width: 650px;
	}

.null {
	position: absolute;
	top: -5000px;
	left: -5000px;
	}

.left {
	float: left;
	}

.right {
	float: right;
	}

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

p {
	color: #ccc;
	font: 12px/24px "Trebuchet MS",verdana,sans-serif;
	margin: 0 0 5px 0;
	}

p span {
	color: #fff;
	}

img { /* Alt */
	border: 0 none;
	color: #fff !important;
	}

/*&&&> b. Headings */

h1,label {
	color: #ddd;
	font: 18px "Trajan Pro","Trebuchet MS",verdana,sans-serif;
	text-transform: uppercase;
	}

h1 span,.p {
	color: #ffce40;
	font: 18px "Trebuchet MS",verdana,sans-serif;
	}

h2,h2 span {
	color: #ddd;
	font: 700 13px "Trebuchet MS",verdana,sans-serif;
	text-transform: uppercase;
	}

h2 span {
	color: #ffce40;
	}

/*&&> b2. Links */

h1 a:link,h1 a:visited, h2 a:link, h2 a:visited {
	background: url(../i/bullets/bullet_yellow.gif) no-repeat 0 5px;
	color: #ffce40;
	font: 700 12px "Trebuchet MS",verdana,sans-serif;
	padding: 0 0 0 14px;
	text-decoration: none;
	}

h1 a:hover,h2 a:hover {
	background-image: url(../i/bullets/bullet_blue.gif);
	color: #6dcff6;
	}

a:link h2, a:visited h2 {
	background: url(../i/bullets/link_yellow.gif) no-repeat center right;
	display: inline;
	padding: 0 15px 0 0;
	}

a:hover h2 {
	background: url(../i/bullets/link_blue.gif) no-repeat center right;
	color: #6dcff6;
	}

/*&&&> c. Hyperlinks */

a {
	text-decoration: none;
	}

p a:link,p a:visited {
	background: url(../i/bullets/link_yellow.gif) no-repeat center right;
	color: #eee;
	color: #ffce40; /* ??? */
	padding: 0 14px 0 0;
	}

p a:hover {
	background-image: url(../i/bullets/link_blue.gif);
	color: #6dcff6;
	}
	
div a:active {
	color: #acf128 !important;
	}

.top:hover {
	background-image: url(../i/bullets/blue_up.gif);
	}

/*&&&> d. Lists */

div div ul { /* Excludes Navigation */
	list-style: none;
	margin: 10px;
	padding: 0;
	}

div div ul li {
	background: url(../i/bullets/bullet_grey.gif) no-repeat center left;
	font: 12px/22px "Trebuchet MS",verdana,sans-serif;
	}

div div ul li span {
	padding: 0 0 0 15px;
	color: #ccc;
	}

div div ul li a {
	background: url(../i/bullets/bullet_blue.gif) no-repeat center left;
	color: #ccc;
	padding: 0 0 0 15px;
	}

div div ul li a:hover {
	background-image: url(../i/bullets/bullet_yellow.gif);
	}

/*&&> d2. Dual Column */

ul.duo li {
	float: left;
	width: 50%;
	}

/*&&&> e. Blockquotes */

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

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

#navigation li {
	display: block;
	float: left;
	height: 50px;
	width: auto;
	}

#navigation li a {
	display: block;
	font: 700 12px/49px "Trebuchet MS",Verdana,sans-serif;
	margin: 0 1px 0 0;
	padding: 0 23px;
	text-decoration: none;
	text-transform: uppercase;
	height: 100%;
	}

#navigation li a:link,#navigation li a:visited {
	color: #ddd;
	}
	
/* Back button hidden except on error pages & articles */

#navigation .back {
	margin-right: 15px;
	display: none;
	}

.error #navigation .back,.dreamhost #navigation .back {
	display: block;
	}

.error #navigation,.dreamhost #navigation {
	width: 800px;
	}

/*&&&> b. Hover */

#navigation li a:hover {
	background: #6dcff6 url(../i/navigation_sprite.jpg) repeat-x 0 -50px;
	color: #111;
	}
	
#navigation li a:active {
	color: #000;
	background-position: 0 -100px;
	}

#navigation li a:link span,#navigation li a:visited span {
	display: none;
	}

/*&&&> c. Current */

.home .home,.articles .articles,.services .services,.portfolio .portfolio,.links .links,.about .about,.contact .contact,.error .back,.dreamhost .back {
	background: #ffce40 url(../i/navigation_sprite.jpg) repeat-x 0 0;
	color: #111 !important;
	}

/*&&&&&> 3. Page Structure */

/* No North Needed on Home */

#north {
	border-bottom: 1px solid #111;
	padding: 0 10px 7px 10px;
	margin: 0;
	text-align: center;
	width: auto;
	}

#south {
	background: url(../i/south.png) repeat-x top;
	border-top: 1px solid #333;
	clear: both;
	margin: 0 auto 10px auto;
	padding: 7px 10px 0 10px;
	text-align: center;
	}

.horizon {
	margin: 0 auto;
	text-align: left;
	max-width: 1024px;
	}

/* Equal Height Columns */

.about #left,.about #center,.articles #left,.articles #center,.dreamhost #center,.dreamhost #left {
	padding-bottom: 32767px !important;
	margin-bottom: -32767px !important;
	}

.about #center,.articles #center,.dreamhost #center {
	border-left: 1px solid #333;
	padding-left: 10px;
	}

.about #left,.articles #left,.dreamhost #left {
	border-right: 1px solid #111;
	padding-right: 9px;
	}

.about #south,.articles #south,.dreamhost #south {
	overflow: hidden;
	}

/*&&&> b. Header */

.home #header,.articles #header,.about #header,.links #header,.error #header,.dreamhost #header {
	background: url(../i/header_blue.jpg) repeat-x center center;
	border: 1px solid #333;
	display: block;
	float: none;
	margin: 0 auto 0 auto;
	position: relative;
	text-align: center;
	height: 138px;

	width: auto;
	min-width: 600px;
	max-width: 1024px;
	}

#header a {
	background: none;
	border: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px 0 0 -100px;
	height: 56px;
	width: 200px;
	}

#header img {
	display: none;
	}

#header {
	background: url(../i/logo.png) no-repeat center center;
	border-right: 1px solid #111;
	float: left;
	position: relative;
	text-align: center;

	top: -2px;
	height: 138px !important;
	width: 250px;
	}

/*&&&> c. Splash */

.home #splash,.about #splash,.error #splash,.links #splash,.articles #splash,.dreamhost #splash {
	display: none;
	}

#splash {
	border-left: 1px solid #333;
	min-height: 138px;
	margin: 2px 0 0 251px;
	padding: 0 0 0 10px;
	}

/*&&&> d. Left Column */

#left {
	clear: left;
	float: left;
	padding: 0;
	margin: 0;
	width: 240px;
	}

.dreamhost #left {
	width: 340px;
	}

/*&&&> e. Center Column */

.home #center {
	margin: 0 32% 0 250px;
	width: auto;
	}

.dreamhost #center {
	margin-left: 350px;
	}

/*&&&> f. Right Column Expansion */

.home #right,.services #right {
	display: block;
	float: right;
	padding: 0 10px 0 15px;
	width: 30%;
	}

.services #right {
	border-top: 2px solid #151515;
	background: #222;
	padding-top: 7px;
	}

/*&&&> g. Footer */

#footer {
	background: url(../i/footer.png) repeat-x top;
	clear: both;
	padding: 15px 0 0 0;
	text-align: center;
	height: 50px;
	}

/*&&&> h. Dual Column - Default */

#center {
	margin: 0 0 0 250px;
	}

#right {
	display: none;
	}

/*&&&> i. Portfolio */

.portfolio a.jellyfish {
	background-color: #111;
	background-position: center;
	background-repeat: no-repeat;
	border: 1px solid #333;
	display: block;
	margin: 5px 0;
	max-width: 760px;
	}

.portfolio a.jellyfish:hover {
	cursor: pointer;
	}

.portfolio .jellyfish img {
	border: 0;
	display: none;
	}

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

.portfolio a.jellyfish:hover .border {
	background: url(../i/stripe.png) repeat-x top;
	}

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

.portfolio a.jellyfish:hover .borderbottom {
	background: url(../i/stripe.png) repeat-x bottom;
	}

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

#hollywood .nw {
	height: 124px;
	}

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

#svi .nw {
	height: 119px;
	}

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

#geneva .nw {
	height: 116px;
	}

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

#wade .nw {
	height: 134px;
	}

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

#gearworx .nw {
	height: 148px;
	}
	
#pinpoint {
	background-image: url(../i/portfolio/pinpoint.jpg);
	}

#pinpoint .nw {
	height: 154px;
	}

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

#polygon .nw {
	height: 163px;
	}

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

#reptileworld .nw {
	height: 124px;
	}

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

#ocrig .nw {
	height: 146px;
	}

/*&&&> j. Contact */

.contact #left,.about #left {
	border-right: 1px solid #111;
	padding: 0 9px 0 0;
	text-align: right;
	min-height: 100%;
	}

.contact #left p,.contact #left p span,.about #left p,.about #left p span {
	color: #ddd;
	font: 12px/16px "trebuchet MS",verdana,sans-serif;
	}

.contact #left h1,.about #left h1 {
	margin-bottom: 5px;
	}

.contact #left h2,.contact #left h2 span,.about #left h2,.about #left h2 span {
	font: 600 16px "Trebuchet MS",verdana,sans-serif;
	margin-bottom: 3px;
	}

.contact #left h2 span,.about #left h2 span {
	color: #ffce40;
	}

/*&&> j2. Contact Form */

.contact fieldset {
	border: 0;
	display: block;
	width: auto;
	}

.contact #loadBar,.contact #emailSuccess,.contact #formInstructions {
	float: right;
	margin: 40px 0 0 25px;
	text-align: left;
	width: 50%;
	}

.contact #formInstructions {
	margin: 20px 50px 0 150px;
	max-width: 425px;
	width: 50%;
	}

.contact #formInstructions h1 {
	color: #ffce40;
	}

.contact #emailSuccess {
	margin: 30px 15px 0 5px;
	}

.contact #emailSuccess h1 {
	color: #acf128;
	}

#cForm {
	border-left: 1px solid #333;
	padding: 0 0 0 10px;
	}

#cForm label {
	font: 600 16px "Trebuchet MS",verdana,sans-serif;
	display: block;
	margin-bottom: 1px;
	width: auto;
	}

#cForm label span {
	font: 600 16px "Trebuchet MS",verdana,sans-serif;
	color: #ffce40;
	}

#cForm input,#cForm textarea {
	background: #333 url(../i/contact_sprite.png) repeat-x;
	border: 1px solid #222;
	color: #ccc;
	padding: 2px 5px 2px 5px;
	display: block;
	height: 18px;
	width: 250px;
	}

#cForm textarea {
	background: #333 url(../i/textarea_sprite.png) repeat-x;
	width: 90%;
	height: 125px;
	}

/*

#cForm input:hover,#cForm textarea:hover {
	color: #222;
	background: #0099ff url(../i/form_blue.jpg) repeat-x top left;
	}

#cForm textarea:hover {
	background-image: url(../i/textarea_blue.jpg);
	}

#cForm input:focus,#cForm textarea:focus {
	background: #ffce40 url(../i/form_yellow.jpg) repeat-x top left;
	color: #000;
	}

#cForm textarea:focus {
	background-image: url(../i/textarea_yellow.jpg);
	}

*/

#cForm input:hover {
	color: #222;
	background: #0099ff url(../i/contact_sprite.png) repeat-x 0 -25px;
	}

#cForm input:focus {
	background: #ffce40 url(../i/contact_sprite.png) repeat-x 0 -50px;
	color: #000;
	}

#cForm textarea:hover {
	background: #0099ff url(../i/textarea_sprite.png) repeat-x 0 -150px;
	}

#cForm textarea:focus {
	background: #ffce40 url(../i/textarea_sprite.png) repeat-x 0 -150px;
	color: #000;
	}

#cForm #sendContactEmail {
	color: #ccc;
	font: 700 12px "Trebuchet MS",verdana,sans-serif;
	padding: 1px 0;
	text-transform: uppercase;
	height: 25px;
	width: 260px;
	}

#cForm #sendContactEmail:hover {
	background: #ffce40 url(../i/form_yellow.jpg) repeat-x top left;
	color: #000;
	}

/*&&&> K. Error */

.error #header {
	background-image: url(../i/header_red.jpg);
	}

/*&&&> l. Home */

.home #center {
	margin-left: 240px;
	margin-right: 33%;
	}

.home #center ul li {
	float: left;
	margin-left: 5%;
	width: 28%;
	}

.home #right {
	width: 33%;
	}

/*&&&> m. Articles */

#rss {
	position: absolute;
	top: 0px;
	left: 0;
	}

#rss img {
	border: 0 none;
	}

.articles #center img {
	display: block;
	text-align: center;
	margin: 15px auto 5px auto;
	}

/* Code */

pre {
	background: #191919;
	border: 1px solid #111;
	border-width: 1px 1px 1px 0;
	color: #999;
	margin: 15px 0;
	padding: 7px 15px 7px 50px;
	}

pre.html {
	background: #191919 url(../i/pre_html.png) repeat-y top left;
	}

pre.css {
	background: #191919 url(../i/pre_css.png) repeat-y top left;
	}

pre.javascript {
	background: #191919 url(../i/pre_javascript.png) repeat-y top left;
	}

pre.photoshop {
	background: #191919 url(../i/pre_photoshop.png) repeat-y top left;
	}

/*&&&> m1. Octopus */

.octopus #header {
	background-image: url(../i/header_purple.jpg);
	}

/*&&&> n. Dreamhost */

.dreamhost #header {
	background-image: url(../i/header_dh1.jpg);
	}

/*&&&&&> 4. Engines */

/*&&&> b. Jellyfish */

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

* html .jellyfish * {
	height: 122px;
	}

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

.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 { 
	height: 122px; /* 138 - 16 */
	filter: alpha(opacity=2); 
	-moz-opacity: .3;
	opacity: .3;}

/*&&&> c. Sweet Titles */

body div#toolTip { 
	background: #222 url(../i/tooltip.png) repeat-x top;
	border-left: 1px solid #444;
	border-right: 1px solid #111;
	border-bottom: 1px solid #111;
	padding: 15px 10px 10px 10px;
	position: absolute;
	text-align: left;
	z-index: 1000;
	
	width: auto;
	max-width: 25em;
	}
	
body div#toolTip p { 
	color: #ddd;
	font: 12px/18px "Trebuchet MS",verdana,sans-serif;
	}

body div#toolTip p em { 
	display:block;
	margin-top:3px;
	color: #ffce40;
	font-style:normal;
	}

body div#toolTip p em span { 
	font-weight:bold;
	color:#fff; 
	}

/*&&&&&> 5. Patches */

body {
scrollbar-face-color: #222;
scrollbar-highlight-color: #333;
scrollbar-3dlight-color: #333;
scrollbar-darkshadow-color: #333;
scrollbar-shadow-color: #333;
scrollbar-arrow-color: #ffce40;
scrollbar-track-color: #444;
}

/*&&&> a. Clearfix */

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

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

/*&&&> b. Opera 8-9 */

@media all and (min-width: 0px){

#north,#south {
	display: block !important; /* Kills Clearfix for Opera */
	}
	
}

/*&&&> c. Safari */

.safari { display: none; }

html*safari:/* */not(:enabled) { display: block; }

/* Kills Clearfix for Safari */

html*#north:/* */not(:enabled) { background-color: #151515; display: block !important; }
html*#south:/* */not(:enabled) { background-color: #151515; display: block !important; }