/*&&&&&>> 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; /* ??? */
	color: #eee;
	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: 10px 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,.services #header,.links #header,.error #header,.dreamhost #header {
	background: url(../i/header_latest.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,.services #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 {
	overflow: hidden;
	clear: left;
	float: left;
	padding: 0;
	margin: 0;
	width: 240px;
	}

.dreamhost #left {
	width: 340px;
	}

.home #left,.services #left {
	width: 300px;
	}

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

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

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

.home #center,.services #center {
	margin-left: 315px !important;
	}

/*&&&> 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;
	font: 11px verdana,sans-serif;
	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;
	}

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

#justmoon .nw {
	height: 146px;
	}

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

#natural .nw {
	height: 146px;
	}

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

#redmoon .nw {
	height: 136px;
	}

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

#arcadia .nw {
	height: 145px;
	}

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

#perfectshare .nw {
	height: 136px;
	}

#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);
	}

.jelly #header {
	background-image: url(../i/header_jelly.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; 
	}

.sIFR-flash {
	visibility: visible !important;
	overflow: hidden;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
	overflow: hidden;
	margin: 0;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

#south .sIFR-hasFlash h1 {
	visibility: hidden;
	}

/*&&&&&> 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; }