* {

	vertical-align: baseline;

	font-weight: inherit;

	font-family: inherit;

	font-style: inherit;

	font-size: 100%;

	border: 0 none;

	outline: 0;

	padding: 0;

	margin: 0;

}

	

body {

	background: #aaaaaa;

	background-image: url('../images/site/background_drill_blur.jpg');

	background-size: 100%;

	background-attachment: fixed;

	text-align: center;

	color: #222222;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 16px;

}



img {

	border: none;

}



h1,

h2,

h3,

h4 {

	color: #ffffff;

}



h1 {

	font-size: 2.0em;

	font-weight: bold;

	padding: 4px 9px;

}



h2 {

	color: #ff6600;

	font-size: 1.6em;

	padding: 0 9px 4px 9px;

}



h3 {

	font-size: 1.3em;

	padding: 4px 9px;

	margin: 0;

}



h4 {

	font-size: 1.1em;

	padding: 2px 4px;

	color: #ff6600;

}



p {

	font-size: 1.0em;

	margin: 0 4px;

}



ul {

	padding: 4px 28px;

}



ol {

	padding: 4px 28px;

}



a {

	color: #aaaaaa;

	text-decoration: none;

}

	

a:hover {

	color: #cccccc;

	text-decoration: underline;

}



form {

	color: #ffffff;

}



input {

	margin: 8px 0 8px 0;

	padding: 0;

	display: inline;

	color: #ffffff;

	font-size: 1.4em;

	height: 35px;

	text-align: left;

	vertical-align: middle;

	border-radius: 12px;

	border: none;

}



input[type="text"] {

	font-weight: bold;

	border: none;

	width: 72%;

	color: #333333;

	padding-left: 10px;

	margin-right: 10px;

}



input[type="text"]:focus {

	background-color: #ffffff;

}



::-moz-placeholder {

	color: #555555;

}



:-moz-placeholder {

	color: #555555;

}



::-webkit-input-placeholder {

	color: #555555;

}



:-ms-input-placeholder {

	color: #555555;

}



input[type="radio"] {

	vertical-align: middle;

	margin: 0;

	margin-top: -5px;

	margin-right: 5px;

	border: none;

}



input[type="submit"] {

	border: none;

	width: 25%;

	font-weight: bold;

	text-align: center;

}



input[type="submit"]:focus {

	background-color: #980046;

}



label { cursor: pointer;

	display: inline;

	text-align: left;

}



textarea {

	padding: 14px;

	margin: 8px;

	width: 200px;

	display: inline;

	font-size: 1.4em;

	height: 25px;

}



select {

	padding: 14px;

	margin: 8px;

	width: 200px;

	display: inline;

	font-size: 1.7em;

	height: 25px;

}



#header {

	height: 52px;

	border-top: 8px solid #ff6600;

	/*background-color: #980046;*/

	background-color: #79063a;

	margin: 0 auto 20px auto;

}



#header img {

	margin: 0 auto;

}



#header a {

	font-size: 2.0em;

	margin: auto;

}



#docbody {

	width: 982px;

	min-height: 1024px;

	margin: 0 auto;

	text-align: left;

}



#stay a {

	padding-top: 10px;

	bottom: 0px;

	margin: 0 0 0 985px;

	position: fixed;

	width: 50px;

	height: 50px;

	background-color: #ff6600;

	border-radius: 12px 12px 0 0;

	text-align: center;

	font-weight: bold;

	font-size: 1.0em;

	color: #ffffff;

	display:block;

	text-decoration: none;

}



#stay a:hover {

	background-color: #ee5500;

}



#stay a:focus {

	background-color: #980046;

}

/*

#slideshow {

	position: relative;

	height: 350px;

	width: 100%;

}



#slideshow img {

	position: absolute;

	border-radius: 12px;

	z-index: 8;

}



#slideshow img.active {

	z-index: 10;

}



#slideshow img.last-active {

	z-index: 9;

}

*/

.thing0 {

	margin: 0 0 20px 0;

	padding: 10px 10px;

	background: hsla(220,50%,0%,0.45);

	float: left;

	width: 962px;

	border-radius: 20px;

	min-height: 30px;

}



.thing0 img {

	float: left;

	margin: 10px;

	border-radius: 12px;

}



.thing0 iframe {

	border-radius: 12px;

	padding: 0;

	margin: 10px;

	border: none;

}



#crumbs {

	font-weight: bold;

}



#crumbs h3 {

	padding-bottom: 0;

}



#banner {

	margin: 0;

	padding: 0;

	border-radius: 12px;

	display: block;

	clear: both;

	float: left;

}



#banner a {

	margin: 0;

	padding: 0;

	display: block;

	font-size: 18px;

	clear: both;

}



#rotate-no {

	position: relative;

	margin: 0;

	padding: 0;

	margin-bottom: 20px;

	clear: both;

	display: block;

	float: left;

	height: 239px;

}

#rotate-no img {

	position: absolute;

	border-radius: 12px;

	z-index: 8;

}



#rotate {

	position: relative;

	margin: 0;

	padding: 0;

	margin-bottom: 20px;

	clear: both;

	display: block;

	float: left;

	height: 353px;

}



#rotate img {

	position: absolute;

	border-radius: 12px;

	z-index: 8;

}



#rotate img.active {

	z-index: 10;

}



#rotate img.last-active {

	z-index: 9;

}



#rotate a {

	position: absolute;

	border-radius: 12px;

	z-index: 8;

	display: block;

	clear: both;

	float: left;

}



#rotate a.active {

	z-index: 10;

}



#rotate a.last-active {

	z-index: 9;

}



.choose {

	margin: 10px;

	width: 300px;

	height: 84px;

	float: left;

	font-weight: bold;

}



.choose h1 {

	padding: 24px 0;

	/*padding: 14px;*/

	text-transform: capitalize;

}



.choose a {

	border-radius: 12px;

	display: block;

	text-align: center;

	height: 100%;

}



.choose a:hover {

	text-decoration: none;

}



.choose a.primary {

	background-color: #79063a;

}



.choose a.primarydeselected {

	/*background-color: #550022;*/

	background-color: #333333;

}



.choose a.secondary {

	background-color: #ff6600;

}



.choose a.secondarydeselected {

	/*background-color: #883300;*/

	background-color: #333333;

}



.choose a.tertiary {

	background-color: #336677;

}



.choose a.tertiarydeselected {

	/*background-color: #113344;*/

	background-color: #333333;

}



#search {

	width: 98%;

	float: left;

	margin: 0 10px;

}



#search form {

	margin-top: 5px;

	margin-bottom: 5px;

}



#search label {

	font-size: 0.8em;

}



#search a {

	margin: 10px;

	font-size: 0.8em;

	font-weight: bold;

	color: #ffffff;

}



#search a,

#search p {

	display:inline;

	margin: 3px 10px;

	font-size: 0.8em;

	font-weight: bold;

	color: #ffffff;

}



#search h3,

#search h2 {

	display:inline;

	font-weight: bold;

}



#sort {

	float:left;

	margin-left: 0;

	margin-top: 4px;

	margin-bottom: 0;

}



#sort a {

	color: #ff6600;

}



#sort p {

	margin-left: 0;

}



#more {

	float:right;

	margin-right: 0;

	margin-top: 4px;

	margin-bottom: 0;

}



#more a {

	color: #ff6600;

}



.controls {

	clear: right;

	float: left;

	margin: 7px 20px 0 0;

}



.controls h4 {

	font-size: 1.0em;

	font-weight: bold;

	padding-left: 0;

	padding-bottom: 1px;

}



.tile {

	margin: 10px 10px 12px 10px;

	border-radius: 12px;

	width: 300px;

	height: 200px;

	float: left;

	font-weight: bold;

}



.tile iframe {

	padding: 0;

	margin: 0;

	border: 0;

	height: 100%;

}



.tile a {

	height: 100%;

	color: #eeeeee;

	display: block;

	white-space:nowrap;

	overflow: hidden;

	text-overflow:ellipsis;

}



.tile a:hover {

	text-decoration: none;

	color: #ffffff;

}



.tile a:focus {

	color: #ffffff;

	background-image: none;

	border-radius: 12px;

}



.tile h3 {

	font-size: 1.1em;

	font-weight: bold;

	padding: 0;

	white-space:nowrap;

	overflow: hidden;

	text-overflow:ellipsis;

}



.tile h4 {

	font-size: 0.9em;

	font-weight: normal;

	padding: 0;

	white-space:nowrap;

	overflow: hidden;

	text-overflow:ellipsis;

}



.overlay {

	padding: 7px 10px 3px 10px;

	border-radius: 0 0 11px 11px;

	position: relative;

	bottom: -150px;

	height: 40px;

	width: 280px;

	white-space:nowrap;

	overflow: hidden;

	text-overflow: ellipsis;

}



.overlayprimary { background-color: hsla(331,100%,14%,0.85); }

.overlaysecondary { background-color: hsla(21,100%,33%,0.9); }

.overlaytertiary { background-color: hsla(196,100%,14%,0.85); }



/*.primary { background-color: #980046; }*/

.primary { background-color: #79063a; }

.secondary { background-color: #ff6600; }

.tertiary { background-color: #447788; }



.focus_primary:focus { background-color: #79063a; }

.focus_secondary:focus { background-color: #ff6600; }

.focus_tertiary:focus { background-color: #447788; }



.orange {

	color: #ff6600;

}



.maroon {

	color: #660000;

}



.gray {

	color: #aaaaaa;

}



.white {

	color: #ffffff;

}



.normal {

	font-weight: normal;

}



.inset {

	float: left;

	margin: 10px 10px 10px 10px;

	padding: 10px;

	width: 280px;

	min-height: 300px;

	border-radius: 12px;

	background-color: hsla(331,0%,4%,0.3);

}



.inset h4 {

	padding: 8px 0 0 10px;

	color: #ff6600;

	font-weight: bold;

}



.inset p {

	padding: 3px 0 0 11px;

	color: #ffffff;

	font-weight: 500;

	font-size: 1.1em;

}



.full {

	width: 920px;

	min-height: 400px;

	margin: 10px;

	padding: 10px;

	background-color: #eeeeee;

	border-radius: 12px;

	float: left;

}



.full h1 {

	color: #777777;

	margin: 10px;

}



.full h4 {

	color: #333333;

	margin: 5px 10px;

	padding: 0 9px;

	font-weight: bold;

	font-size: 1.0em;

}



.full ul {

	color: #444444;

	margin: 10px;

}



.full p {

	color: #444444;

	margin: 10px;

	padding: 9px;

}



.full img {

	float: left;

	margin: 10px;

	border-radius: 12px;

}



.rightinset {

	float: right;

	margin: 10px;

	padding: 0;

	width: 280px;

	min-height: 300px;

	/*border-radius: 12px;*/

	background-color: #eeeeee;

	box-shadow: 0 0 18px hsl(6,0%,40%); 

	-moz-box-shadow: 0 0 18px hsl(6,0%,40%);

}



.rightinset h3 {

	color: #ffffff;

	border-radius: 0;

	background-color: #ff6600;

	margin: 0;

	font-weight: bold;

	padding: 16px 8px;

}



.rightinset form {

	border-radius: 0;

	/*background-color: #dddddd;*/

	margin: 0;

	padding: 10px 5px;

}



.rightinset ol {

	padding: 5px 14px;

}



.rightinset input {

	border-radius: 0;

	width: 95%;

	background-color: #cccccc;

	font-size: 1.0em;

}



.rightinset input[type="text"]:focus {

	background-color: #cccccc;

}



.rightinset input[type="submit"] {

	background-color: #ff6600;

	width: 100px;

}



.more-info {

	color: #ffffff;

	background-color: #ff6600;

	font-weight: bold;

	display: block;

	padding: 14px;

	margin: 10px;

	width: 288px;

}



.more-info a {

	color: #ffffff;

}



.external {

	width: 940px;

	height: 480px;

	padding: 10px;

	margin: 0;

	border-radius: 12px;

}



.video iframe {

	width: 940px;

	height: 525px;

}



.required-message,

.error-message,

.ss-q-title,

.ss-secondary-text {

	display: none;

}



#main {

	float: right;

	width: 582px;

	min-height: 500px;

	margin: 10px 10px 10px 0;

	padding: 20px;

	background: #eeeeee;

	border-radius: 12px;

	color: #222222;

}



#main h1,

#main h2,

#main h3,

#main h4 {

	color: #444444;

	font-weight: bold;

	padding: 8px 0 4px 0;

	margin-left: 0;

}



#main p {

	margin: 5px 0;

	font-size: 1.0em;

}



#main a {

	color: #980046;

}



#main img {

	float: left;

}



#welcome {

	color: #ffffff;

	margin-right: 10px;

	float: right;

	width: 624px;

}



#welcome a {

	color: #ff6600;

}



#welcome h4 {

	font-weight: bold;

	padding: 8px 4px 2px 4px;

}



#welcome li {

	padding: 7px 0;

}



#welcome p {

	padding: 7px 0;

}



/*

#welcome {

	float: left;

	width: 620px;

	margin: 0 10px 10px 10px;

	padding: 0;

	color: #ffffff;

}



#welcome h4 {

	font-weight: bold;

	padding: 8px 4px 2px 4px;

}



#welcome p {

}



#welcome a {

	color: #ff6600;

}



#welcome li {

	padding: 0 4px 4px 4px;

}



#welcome img {

	padding: 0;

	margin: 0;

}

*/



.sitemap {

	width: 104px;

	margin: 8px 7px 18px 7px;

	float: left;

}



.sitemap a {

	padding: 0 7px;

	margin: 0;

	text-align: left;

	color: #ffffff;

	font-size: 0.80em;

	display: block;

}



.sitemap a:hover {

	text-decoration: underline;

	color: #ffffff;

}



.sitemap a.footer_heading {

	font-weight: bold;

	font-size: 0.95em;

	color: #ff6600;

}



.sitemap img {

	margin: 1px 5px 1px 0;

}



.sitemap2 {

	width: 100%;

	margin: 11px 7px 11px 7px;

	float: left;

/*  	display: inline; */

}



.sitemap2 a {

	padding: 0 7px;

/* 	margin: 0; */

/* 	padding: 8px 7px 18px 7px; */

	font-size: 1.0em;

	text-align: left;

	color: #ffffff;

/* 	display: inline;  */

/* 	clear: both; */

/* 	float: left; */

	display: inline;

	}



.sitemap2 a.footer_heading {

/* 	padding: 4px 7px; */

/* 	margin: 8px 7px 18px 7px; */

	font-weight: bold;

/* 	font-size: 1.0em; */

	color: #ff6600;

	clear: both;

	float: left;

	display: inline;

}



.sitemap2 a:hover {

	text-decoration: underline;

	color: #ffffff;

}



.sitemap2 img {

	margin: 2px 3px 2px 14px;

/* 	display: inline; */

}



.powered {

	clear: both;

	font-size: 1.1em;

	font-weight: bold;

	text-align: right;

	padding: 0 8px 4px 8px;

}



.powered a {

	font-size: 1.1em;

	color: #ffffff;

	text-decoration: none;

}



.powered p {

	margin-top: 10px;

	font-size: 1.1em;

	color: #ff6600;

}



#credit {

	display: none;

}





/* http://davidwalsh.name/detect-ipad */

/* http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript */

/* target small screens (mobile devices or small desktop windows) */

/*@media only screen and (max-width: 480px) {

	

}*/



/* high resolution screens */

/*@media (-webkit-min-device-pixel-ratio: 2),

		(min--moz-device-pixel-ratio: 2),

		(min-resolution: 300dpi) {

	#docbody { width: 343px; }

	.thing0 { width: 321px; }

	input[type="text"] { width: 300px; }

	#stay { margin: 0 0 0 345px; }

	.main { width: 300px; }

}*/



/* low resolution screens */

/*@media (-webkit-max-device-pixel-ratio: 1.5),

		(max--moz-device-pixel-ratio: 1.5),

		(max-resolution: 299dpi) {

}*/



/*

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

Given that string we can create a few code snippets to determine if the user is being a smug, iPad-using bastard.



The JavaScript

// For use within normal web clients 

var isiPad = navigator.userAgent.match(/iPad/i) != null;



// For use within iPad developer UIWebView

// Thanks to Andrew Hedges!

var ua = navigator.userAgent;

var isiPad = /iPad/i.test(ua) || /iPhone OS 3_1_2/i.test(ua) || /iPhone OS 3_2_2/i.test(ua);

A quick String.match regular expression test can check for the presence of "iPad" in the user agent string.



The PHP

$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');

This time we look for the position of "iPad" in the user agent string.

*/





/* Non-Retina */

/*@media screen and (-webkit-max-device-pixel-ratio: 1) {

}*/



/* Retina */

/*@media only screen and (-webkit-min-device-pixel-ratio: 1.5),

only screen and (-o-min-device-pixel-ratio: 3/2),

only screen and (min--moz-device-pixel-ratio: 1.5),

only screen and (min-device-pixel-ratio: 1.5) {

}*/



/* iPhone 4 

@media only screen and (-webkit-min-device-pixel-ratio:2){ 

#innerWrap{ width: 650px; } 

#container{ width: inherit; } 

} 



@media all and (max-device-width: 480px){ 

#innerWrap{ width: 650px; } 

#container{ width: inherit; }	

} 

@media screen and (orientation:portrait) and (min-device-width: 768px) and (max-device-width: 1024px){ 

#innerWrap{ width: 1024px; border: 0px solid yellow; } 

#container{ width: 650px; border: 0px solid violet; } 

} 

@media screen and (orientation:landscape) and (min-device-width: 768px) and (max-device-width: 1024px){ 

#innerWrap{ width: 1024px; border: 0px solid yellow; } 

#container{ width: 650px; border: 0px solid violet; } 

} 

*/



/*(max-width: */

/* iPhone Portrait */

@media screen and (max-device-width: 480px) and (orientation:portrait) {

	#docbody { width: 443px; }

	.thing0 { width: 321px; }

	input[type="text"] { width: 290px; }

	#stay { margin: 0 0 0 270px; }

	#main { width: 260px; }

	#welcome { width: 300px; }

}



/* iPhone Landscape */

@media screen and (max-device-width: 480px) and (orientation:landscape) {

	#docbody { width: 443px; }

	.thing0 { width: 321px; }

	input[type="text"] { width: 290px; }

	#stay { margin: 0 0 0 270px; }

	#main { width: 260px; }

	#welcome { width: 300px; }

}



/* iPad Portrait */

@media screen and (min-device-width: 481px) and (orientation:portrait) {

	#docbody { width: 443px; }

	.thing0 { width: 321px; }

	input[type="text"] { width: 290px; }

	#stay { margin: 0 0 0 270px; }

	#main { width: 260px; }

	#welcome { width: 300px; }

}



/* iPad Landscape */

@media screen and (min-device-width: 481px) and (orientation:landscape) {

}