/* 
  303Computers.com v1.1 stylesheet 
  created 22 february 2010
  updated 2 august 2010
  created by www.souldesigngroup.com
  copyright 303 Computers 
*/

* {
	margin:0px;
	padding:0px;
	outline:none;
}

html {height:100%;}

body {
	width:100%;
	background:url(img/bg-left-column.gif) top left repeat-y;
	font-family:Helvetica, Verdana, Arial, sans-serif;
	font-size:11px;
	line-height:1.4em;
	letter-spacing:1.4px;
    color:#333;
	margin:0;
	border:none;
}

p {margin-bottom:20px;}

p a {border-bottom:1px dotted #ED1B24;}

p a:hover {border-bottom:1px dotted #ED1B24; color:#ED1B24;}

h1 {
	font-size:36px;
	line-height:36px;
}

h2 {
	font-size:14px;
	line-height:14px;
}

h3 {
	font-family:Georgia, serif;
	font-style:italic;
	font-size:24px;
	line-height:24px;
	color:#888;
}

h4 {
	font-size:13px;
	line-height:16px;
	font-weight:bold;
	margin-bottom:10px;
}

a:link {text-decoration:none; color:#666;}
a:visited {text-decoration:none; color:#666;}
a:hover {text-decoration:none; color:#ED1B24;}
a:active {text-decoration:none; border:none; color:#666;}

.clear {clear:both;}
.clear-right {clear:right;}
.clear-left {clear:left;}

img {border:none;}

.bg-img-right {float:right; text-indent:-9999px;}
.bg-img-left {float:left; text-indent:-9999px;}

.red {color:#ed1b24;}

/*************** rotating content */
.jsclass body .randomordercontent{display:none;}


/********************************************************* BASIC LAYOUT */
#page {
	width:100%;
	min-width:800px;
	height:100%;
	min-height:590px;
	_height:590px;
	background:url(img/circuitry-bg.gif) top left no-repeat;
}


/********************************************************* HEADER */
#header {
	width:100%;
	height:140px;
	margin:12px 0;
	background:url(img/header-bg.gif) repeat-x top left;
}

/*************** logo */
#brand {
	width:292px;
	height:215px;
	position:absolute;
	top:-5px;
	left:5px;
	background:url(img/brand/logo-303-computers.png) no-repeat top left;
	_background:url(img/brand/logo-303-computers.gif) no-repeat top left;
}


/********************************************************* NAVIGATION */
#nav-wrapper {
	position:absolute;
	right:0px;
	top:128px;
	font-family:'Century Gothic', 'Apple Gothic', sans-serif;
	font-size:12px;
	letter-spacing:-.2px;
	z-index:49;
}

.nav-item a:link {color:#BBB;}
.nav-item a:visited {color:#BBB;}
.nav-item a:hover {color:#ED1B24;}
.nav-item a:active {color:#BBB;}


.nav-item {
	padding:1px 10px;
	_padding:1px 14px 1px 2px;
	float:right;
	display:inline;
	border-right:1.5px solid #ED1B24;
	list-style:none;
	white-space:nowrap;
}

.nav-item li ul li {white-space:normal;}

.nav-item li {position:relative;}

/*************** drop-down menu */
.nav-item ul li a {color:#BBB;}
.nav-item ul li a:hover {color:#ED1B24;}

.nav-item li ul li{
	width:110px;
	margin:0 0 2px 0;
	padding:5px 5px;
	font-size:10px;
	letter-spacing:1px;
	background:url(img/black-85.png) repeat;
	_background:#333;
	line-height:10px;
	border-right:5px solid #000;
}

#nav-wrapper ul ul {
	position:absolute;
	display:none;
	list-style:none;
}

#nav-wrapper ul li:hover ul{
	display:block;
	top:15px;
	left:5px;
}

/*************** nav on */
#on-left {margin:-10px -8px -7px 0; _display:none;}
#on-right {margin:-10px 0 -9px -7px; _display:none;}

.on {}

.on-home {display:none;}
#home .on-home {display:inline; _display:none;}

.on-my303 {margin-top:-18px; display:none;}
#my303 .on-my303 {display:inline; _display:none;}

.on-feedback {margin-top:-18px; display:none;}
#feedback .on-feedback {display:inline; _display:none;}

.on-products {margin-top:-18px; display:none;}
#products .on-products {display:inline; _display:none;}

.on-inventory {margin-top:-18px; display:none;}
#inventory .on-inventory {display:inline; _display:none;}

.on-services {margin-top:-18px; display:none;}
#services .on-services {display:inline; _display:none;}

.on-contact {margin-top:-18px; display:none;}
#contact .on-contact {display:inline; _display:none;}

.on-about {margin-top:-18px; display:none;}
#about .on-about {display:inline; _display:none;}


/********************************************************* LEFT COLUMN */
#left-column {
	width:25%;
	overflow:visible;
}

#quick-info {
	position:absolute;
	top:250px;
	left:25px;
	background:url(img/white-80.png) repeat;
	border-top:1px solid #EEE;
	border-right:1px solid #EEE;
	border-bottom:1px solid #EEE;
	letter-spacing:.5px;
	white-space:nowrap;
	z-index:10;
}

#quick-info h2 {padding:3px 15px 0 0;}

.info-diagonal-border {
	width:5px;
	height:50px;
	margin:0 5px 0 0;
	background:url(img/diagonal-lt-gray.gif) repeat;
	float:left;
}

.quick-info h2{float:left;}

#promo {
	width:110px;
	height:125px;
	position:absolute;
	top:600px;
	left:20px;
	text-align:center;
	overflow:hidden;
	z-index:10;
}

#promo-image-PC {
	width:110px;
	height:125px;
	margin-top:10px;
	background:url(img/promo/$100pc.png) no-repeat;
	_background:url(img/promo/$100pc.gif) no-repeat;	
}

#promo-image-recycle {
	width:110px;
	height:125px;
	margin-top:10px;
	background:url(img/promo/recycle.png) no-repeat;
	_background:url(img/promo/recycle.gif) no-repeat;	
}

#promo-image-usa-proud {
	width:110px;
	height:125px;
	margin-top:10px;
	background:url(img/promo/usa-proud.png) no-repeat;
	_background:url(img/promo/usa-proud.gif) no-repeat;	
}

#promo-image-free-diagnosis {
	width:110px;
	height:70px;
	margin-top:10px;
	margin-bottom:55px;
	background:url(img/promo/free-diag-coupon-sm.jpg) no-repeat;
}

#promo-image-repair-vs-replace {
	width:110px;
	height:92px;
	margin-top:10px;
	margin-bottom:33px;
	background:url(img/promo/handbrace.png) no-repeat;
	_background:url(img/promo/handbrace.gif) no-repeat;	
}


/********************************************************* CONTENT */
#content-wrapper {
	width:100%;
	position:absolute;
	top:217px;
	_top:202px;
	left:0;
}

#content-main {
	width:100%;
}

#content-main ul {
	font-size:10px;
	line-height:13px;
	margin:-5px 0 25px 35px;
	list-style:url(img/list-arrow.png);
	_list-style:url(img/list-arrow.gif);	
}

#content-spacer-left {margin:0 25px 25px 250px; _margin:0 25px 25px 265px;}

.content-header {
	height:10px;
	margin:0 0 25px 20px;
	overflow:visible;
}

.content-row { 
	background:url(img/content-bg.png) repeat;
	_background:#EEE;
	border:1px solid #FFF;
	margin:0 0 25px 0;
	padding:25px 25px 5px 25px;
	clear:both;
}

/*************** forms */
.form-field {
	width:200px;
	margin:8px 20px 0 0;
	padding:2px 3px;
	background:#FFF;
	border:none;
	color:#777;
}

.form-field-mssg {
	width:328px;
	_width:320px;
	height:55px;
	margin:8px 0 0 0;
	padding:1px 3px;
	background:#FFF;
	border:none;
	white-space:normal;	
}

.form-field-submit {
	margin:8px 0 0 0;
	padding:0 5px;
	background:#FFF;
	text-align:center;
	border:none;
	cursor:pointer;
}

form {margin:0 25px 25px 0;}

.form-field-bot-hide {display:none; visibility:hidden;}


/********************************************************* CONTACT */
.contact-letter {float:left; padding:0 25px 0 4px; background:#EDEDED;}
.contact-info {float:left; margin-bottom:25px;}

#contact .content-row p {clear:both;}



/********************************************************* SLOGAN */
#slogan-wrapper {
	margin:25px auto;
	width:587px;
	height:31px;
	overflow:hidden;
	text-align:center;
}

#slogan {
	width:414px;
	height:20px;
	background:url(img/slogan/slogan.png) no-repeat right;
	_background:url(img/slogan/slogan.jpg) no-repeat right;
	margin:0 auto;
	padding-left:89px;
}

#slogan-reflect {
	width:432px;
	height:11px;
	background:url(img/slogan/slogan-reflect.png) no-repeat right;
	_background:url(img/slogan/slogan-reflect.jpg) no-repeat right;
	margin:0 auto;
	padding-left:80px;
}

#slogan-2 {
	width:562px;
	height:20px;
	background:url(img/slogan/slogan-2.png) no-repeat right;
	_background:url(img/slogan/slogan-2.jpg) no-repeat right;
	margin:0 auto;
	padding-left:105px;
}

#slogan-2-reflect {
	width:580px;
	height:11px;
	background:url(img/slogan/slogan-2-reflect.png) no-repeat right;
	_background:url(img/slogan/slogan-2-reflect.jpg) no-repeat right;
	margin:0 auto;
	padding-left:100px;
}

#slogan-3 {
	width:422px;
	height:20px;
	background:url(img/slogan/slogan-3.png) no-repeat right;
	_background:url(img/slogan/slogan-3.jpg) no-repeat right;
	margin:0 auto;
	padding-left:85px;
}

#slogan-3-reflect {
	width:417px;
	height:11px;
	background:url(img/slogan/slogan-3-reflect.png) no-repeat right;
	_background:url(img/slogan/slogan-3-reflect.jpg) no-repeat right;
	margin:0 auto;
	padding-left:80px;
}

#slogan-4 {
	width:481px;
	height:20px;
	background:url(img/slogan/slogan-4.png) no-repeat right;
	_background:url(img/slogan/slogan-4.jpg) no-repeat right;
	margin:0 auto;
	padding-left:55px;
}

#slogan-4-reflect {
	width:499px;
	height:11px;
	background:url(img/slogan/slogan-4-reflect.png) no-repeat right;
	_background:url(img/slogan/slogan-4-reflect.jpg) no-repeat right;
	margin:0 auto;
	padding-left:47px;
}


/********************************************************* FOOTER */
#footer-nav { 
	margin:100px 0 25px 0;
	border:1px solid #F5F5F5;
	font-size:10px;
	font-variant:small-caps;
	color:#CCC;
	text-align:center;
}

#footer-nav a {color:#BBB;}
#footer-nav a:hover {color:#ED1B24;}

#footer-info { 
	margin:25px 0 25px 0;
	font-family:sans-serif;
	font-size:9px;
	text-align:center;
	letter-spacing:0px;
	color:#CCC;
}

#footer-info a {color:#BBB;}
#footer-info a:hover {color:#ED1B24;}

#logo-footer {
	width:75px;
	height:33px;
	margin:0 auto;
	_margin:0 25px;
	text-indent:-9999px;
	background:url(img/brand/logo-sm.png) center no-repeat;
	_background:url(img/brand/logo-sm.gif) center no-repeat;
}

#print-logo-footer {display:none;}

/********************************************************* FANCY SIRIUS ROLLOVER */
ul.img_list {
	display:inline;
	float:right;
	padding-right:5%;
	height:386px;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
}	
	
li.image_one a {
	display:block; 
	width:400px; 
	height:386px; 
	position:relative;
}	

li.image_one a .rollover {
	display:block; 
	position:absolute; 
	top:0; 
	left:0; 
	width:400px; 
	height:386px; 
	background:url(img/sirius-red.jpg);
}