/* stupid testing things */
/*

background: red;
border: 1px dotted red;
border-right: 5px solid red; 

*/
/*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
			$0 reset styles 
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{ border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; }

:focus { outline: 0; } /* clears mozilla focus jump */

body {  background: white; color: black; line-height: 1; overflow-y: scroll; }
ol, ul { list-style: none; }

table { border-collapse: separate; border-spacing: 0; }

caption, th, td { font-weight: normal; text-align: left; }

blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/* clearfix style */
.clearfix:after{ clear: both; content: "."; display: block; height: 0; line-height: 0; visibility: hidden; }
* html clearfix{ height: 1%; }
* + html clearfix{ height: 1%; }

/*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
			body
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/

body{ background: #fff url(../images/bg.gif) 0 0 repeat-x; font-size: 62.5%; text-align: center; }

/*......................base styles...........................*/

a{ color: #222; text-decoration: none; }
strong{ font-weight: bold; }

/*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
			container 
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/

#container{ font: normal 1.1em Arial, Helvetica, sans; margin: 0 auto; text-align: left; width: 816px; }

/*.....................................premenu stuff..........................................*/

#premenu{ display: block; height: 30px; margin-top: 20px; padding: 0 8px; }
	#premenu:after{ clear: both; content: "."; display: block; height: 0; line-height: 0; visibility: hidden; }
	* html #premenu{ height: 0.01%; }
	* + html #premenu{ height: 0.01%; }
h1{ background: url(../images/h1.gif) 0 0 no-repeat; display: block; float: left; height: 30px; text-indent: -9999px; width: 200px; }
	h1 a{ display: block; height: 30px; width: 200px; }

#premenu ul{ float: right; margin-right: -20px; padding: 10px 0; text-align: right; width: 300px; }
#premenu ul li{ color: #22a5c7; display: inline; font: normal .8em Verdana; letter-spacing: -0.06em; margin-right: 20px; }
	#premenu ul li a{ color: #22a5c7; }

/*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
			menu
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/

#navigation{ background: url(../images/menu-bg.gif) 50% 50% no-repeat; display: block; height: 71px; margin-top: 20px; padding: 0 8px; }
	#navigation:after{ clear: both; content: "."; display: block; height: 0; line-height: 0; visibility: hidden; }
	* html #navigation{ height: 0.01%; }
	* + html #navigation{ height: 0.01%; }
#navigation li{ background: url(../images/menu-div.gif) 100% 15px no-repeat; display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; height: 60px; text-align: center; vertical-align: top; word-wrap: break-word; }
	* html #navigation li{ display: inline; height: 1%; }
	* + html #navigation li{ display: inline; height: 1%; }
	#navigation li a { color: #fff; display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; padding: 20px 40px 20px 30px; text-transform: uppercase; vertical-align: top; word-wrap: break-word; }
	* html #navigation li a{ display: inline; height: 1%; }
	* + html #navigation li a{ display: inline; height: 1%; }
	
	#navigation li span{ color: #2ad0f9; display: block; font-family: Verdana; font-size: .8em; letter-spacing: -0.03em; text-transform: none; }
	
#navigation li.home a{ background: url() 0 100% no-repeat; }

#content{ margin-top: 55px; }
* html #content{ margin-top: 58px; }

.compartment{ background: url(../images/compartment-bg.gif) 50% 0 no-repeat; display: block; height: 220px; margin-bottom: 60px; position: relative; overflow: visible; }
	.compartment .interior{ margin-left: 40px; padding-top: 25px; width: 320px; }

/*.....................................compartment styles..........................................*/

.compartment h3{ background: url(../images/h3-compartment.gif) 0 0 no-repeat; display: block; height: 23px; text-indent: -9999px; }
	#pikistrips h3{ background: url(../images/h3-pikistrips.gif) 0 0 no-repeat; }
	#pikipimp h3{ background: url(../images/h3-pikipimp.gif) 0 0 no-repeat; }
	#pikifx h3{ background: url(../images/h3-pikifx.gif) 0 0 no-repeat; }
	#buttonator h3{ background: url(../images/h3-buttonator.gif) 0 0 no-repeat; }
	#about h3{ background: url(../images/h3-about.gif) 0 0 no-repeat; }
	#vision h3{ background: url(../images/h3-vision.gif) 0 0 no-repeat; }
	#contact h3{ background: url(../images/h3-contact.gif) 0 0 no-repeat; }

.compartment p{ margin-top: 10px; }

.compartment a.more{ background: url(../images/more.gif) 100% 50% no-repeat; display: block; height: 41px; margin-top: 10px; text-indent: -9999px; }
/*.....................................featured styles..........................................*/

.featured{ background: url(../images/featured-bg.gif) 50% 0 no-repeat; color: #c9c9c9; }
	.featured h3{ background: url(../images/h3-deconetwork.gif) 0 0 no-repeat; }
	.featured a{ color: #22a5c7; }
	.featured .icon{ background: url(../images/icon-featured.png) 0 0 no-repeat; display: block; height: 132px; left: 0; margin: -35px 0 0 -45px; position: absolute; text-indent: -9999px; top: 0; width: 87px; }
	* html .featured .icon{ background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/icon-featured.png',sizingMethod='scale'); }

.featured a.more{ background: url(../images/more-featured.gif) 100% 50% no-repeat; }

.other{ background: transparent none; height: auto; }
	* html .other{ height: 1%; }
	* + html .other{ height: 1%; }

.cell{ float: left; margin-left: 40px; position: relative; width: 360px; }
	* html .cell{ display: inline; }
	* + html .cell{ display: inline; }

/*.....................................screenshot base stylez..........................................*/

.screenshot{ bottom: 0; margin-bottom: 9px; margin-right: 25px; position: absolute; right: 0; }

.note{ background: url(../images/about.gif) 0 0 no-repeat; height: 120px; left: 0; margin: 25px 0 0 -130px; position: absolute; text-indent: -9999px; top: 0; width: 120px; }
	.featured .note{ background: url(../images/note.gif) 0 0 no-repeat; margin-top: 65px; }
	
	#pikistrips .note{ background: url(../images/note-pikistrips.gif) 0 0 no-repeat; }
	#pikipimp .note{ background: url(../images/note-pikipimp.gif) 0 0 no-repeat; }
	#pikifx .note{ background: url(../images/note-pikifx.gif) 0 0 no-repeat; }
	#buttonator .note{ background: url(../images/note-buttonator.gif) 0 0 no-repeat; }
	#about .note{ background: url(../images/note-about.gif) 0 0 no-repeat; }
	#contact .note{ background: url(../images/note-contact.gif) 0 0 no-repeat; }

	ul#goals{ background: url(../images/goals.gif) 0 100% no-repeat; display: block; height: 90px; margin-top: 20px; text-indent: -9999px; width: 320px; }
	
a.back{ margin-right: 8px; position: absolute; right: 0; top: 100%; }
/*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
			footer
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/

#footer{ background: #1b1b1b; color: #fff; font: normal 1.1em Arial, Helvetica, sans; padding: 5px 10px 1000px; text-align: right; }