/* 303Computers.com stylesheet  ::  created january 12 2009  ::  updated september 30 2009  ::  created by www.souldesigngroup.com  ::  copyright 303computers */

* {
	margin:0px;
	padding:0px;
	outline:none;
	behavior: url(iepngfix.htc);
}

html {height:auto;}

body {
	background:url(images/bg-left-column.gif) repeat-y #FFF;
	font-family:'OCR-A', 'Verdana', 'Arial', sans-serif;
	font-size:11px;
	line-height:1.2em;
	letter-spacing:1.3px;
    color:#333;
	margin:0 auto;
	border:none;
}

p {padding:4px 0;}

h1 {
	font-size:24px;
	line-height:24px;
	font-family:'OCR-A', 'Verdana', 'Arial', sans-serif;
	color:#333;
}

h2 {
	font-size:18px;
	line-height:18px;
	font-family:Verdana, Arial, sans-serif;
	color:#333;
	line-height:20px;
}

h3 {
	font-size:14px;
	line-height:14px;
	font-weight:bold;
	font-family:Helvetica, Verdana, Arial, sans-serif;
	color:#333;
}

.text-alt-small {
	font-family:Helvetica, Verdana, Arial, sans-serif; 
	font-size:10px; 
	line-height:1em;
	letter-spacing:.8px;
}

.red {color:#ed1b24;}

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

a.ul:link {text-decoration:none; color:#888; border-bottom:1px dotted #ed1b24;}
a.ul:visited {text-decoration:none; color:#888; border-bottom:1px dotted #ed1b24;}
a.ul:hover {text-decoration:none; color:#ed1b24; border-bottom:1px solid #ed1b24;}
a.ul:active {text-decoration:none; color:#888; border-bottom:1px dotted #ed1b24;}

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

img {border:none;}

#tt {position:absolute; display:block; background:url(images/tt_left.gif) top left no-repeat}
#tttop {display:block; height:5px; margin-left:5px; background:url(images/tt_top.gif) top right no-repeat; overflow:hidden}
#ttcont {display:block; padding:2px 12px 3px 7px; margin-left:5px; background:#CDC; color:#333; font-size:9px;}
#ttbot {display:block; height:5px; margin-left:5px; background:url(images/tt_bottom.gif) top right no-repeat; overflow:hidden}

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

#page {
	width:100%;
	min-height:590px;
	_height:590px;
	background:url(images/bg-circuitry.jpg) no-repeat top left;
	padding-top:10px;
}


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

#brand {
	background:url(images/logo-303-computers.png) no-repeat;
	_background:url(images/logo-303-computers.gif) no-repeat;
	width:292px;
	height:215px;
	text-indent:-9999px;
	margin:-20px 0 0 -5px;
	float:left;
}


/********************************
	  NAVIGATION -all but <IE6
*********************************/
#nav {
	position:absolute;
	right:0;
	top:0;
	margin:125px .5% 0 0;
	color:#CCC;
	letter-spacing:0px;
}

.nav-divider {width:1px; height:16px; background:#ED1B24; float:right; margin:4px 5px 0 5px;}

.nav-item {
	float:right;
	_display:none;
}

	/** individual buttons link controls **/
		/** about us **/
a.nav-link-about:link, a.nav-link-about:visited {
	float:right; 
	height:25px;
	width:67px;
	overflow:hidden;
	text-indent:-9999px;
	background:url(images/nav-about-us.png) no-repeat 0 0;
	_background:url(images/nav-about-us.gif) no-repeat 0 0;
}
a.nav-link-about:hover {background-position:0 -25px; text-indent:-9999px; overflow:hidden;}
a.nav-link-about:active {background-position:0 -50px; text-indent:-9999px; overflow:hidden;}
		/** feedback **/
a.nav-link-feedback:link, a.nav-link-feedback:visited {
	float:right; 
	height:25px;
	width:75px;
	overflow:hidden;
	text-indent:-9999px;
	background:url(images/nav-feedback.png) no-repeat 0 0;
	_background:url(images/nav-feedback.gif) no-repeat 0 0;
}
a.nav-link-feedback:hover {background-position:0 -25px; text-indent:-9999px; overflow:hidden;}
a.nav-link-feedback:active {background-position:0 -50px; text-indent:-9999px; overflow:hidden;}
		/** services **/
a.nav-link-services:link, a.nav-link-services:visited {
	float:right; 
	height:25px;
	width:64px;
	overflow:hidden;
	text-indent:-9999px;
	background:url(images/nav-services.png) no-repeat 0 0;
	_background:url(images/nav-services.gif) no-repeat 0 0;
}
a.nav-link-services:hover {background-position:0 -25px; text-indent:-9999px; overflow:hidden;}
a.nav-link-services:active {background-position:0 -50px; text-indent:-9999px; overflow:hidden;}
		/** inventory **/
a.nav-link-inventory:link, a.nav-link-inventory:visited {
	float:right; 
	height:25px;
	width:69px;
	overflow:hidden;
	text-indent:-9999px;
	background:url(images/nav-inventory.png) no-repeat 0 0;
	_background:url(images/nav-inventory.gif) no-repeat 0 0;
}
a.nav-link-inventory:hover {background-position:0 -25px; text-indent:-9999px; overflow:hidden;}
a.nav-link-inventory:active {background-position:0 -50px; text-indent:-9999px; overflow:hidden;}
		/** products **/
a.nav-link-products:link, a.nav-link-products:visited {
	float:right; 
	height:25px;
	width:65px;
	overflow:hidden;
	text-indent:-9999px;
	background:url(images/nav-products.png) no-repeat 0 0;
	_background:url(images/nav-products.gif) no-repeat 0 0;
}
a.nav-link-products:hover {background-position:0 -25px; text-indent:-9999px; overflow:hidden;}
a.nav-link-products:active {background-position:0 -50px; text-indent:-9999px; overflow:hidden;}
		/** my303 **/
a.nav-link-my-303:link, a.nav-link-my-303:visited {
	float:right; 
	height:25px;
	width:54px;
	overflow:hidden;
	text-indent:-9999px;
	background:url(images/nav-my-303.png) no-repeat 0 0;
	_background:url(images/nav-my-303.gif) no-repeat 0 0;
}
a.nav-link-my-303:hover {background-position:0 -25px; text-indent:-9999px; overflow:hidden;}
a.nav-link-my-303:active {background-position:0 -50px; text-indent:-9999px; overflow:hidden;}
		/** contact **/
a.nav-link-contact:link, a.nav-link-contact:visited {
	float:right; 
	height:25px;
	width:65px;
	overflow:hidden;
	text-indent:-9999px;
	background:url(images/nav-contact.png) no-repeat 0 0;
	_background:url(images/nav-contact.gif) no-repeat 0 0;
}
a.nav-link-contact:hover {background-position:0 -25px; text-indent:-9999px; overflow:hidden;}
a.nav-link-contact:active {background-position:0 -50px; text-indent:-9999px; overflow:hidden;}
		/** home **/
a.nav-link-home:link, a.nav-link-home:visited {
	float:right; 
	height:25px;
	width:52px;
	overflow:hidden;
	text-indent:-9999px;
	background:url(images/nav-home.png) no-repeat 0 0;
	_background:url(images/nav-home.gif) no-repeat 0 0;
}
a.nav-link-home:hover {background-position:0 -25px; text-indent:-9999px; overflow:hidden;}
a.nav-link-home:active {background-position:0 -50px; text-indent:-9999px; overflow:hidden;}


	/** drop down sub-menu controls **/
#nav a {
	color:#CCC;
	text-decoration:none;
}

#nav ul {
	list-style:none;
	display:inline;
}

#nav ul li {
	font:bold 10px arial, helvetica, sans-serif;
	height:100%; 
	display:inline;
	background:none;
	position:relative;
	float:left;
	width:100%;
	margin-left:-1px;
	}
	
#nav ul li ul li{
	background:url(images/subnav-bg.png) repeat;
	_background:#333;
	margin:0 0 2px 0;
	padding:3px 3px;
	width:100px;
	line-height:10px;
	border-right:5px solid #000;
}

#nav ul li a{display:block;}

#nav ul li a:hover {color:#ED1B24;}	

#nav ul ul {
	position:absolute;
	top:15px;
	display:none;
	list-style:none;
}

#nav ul li:hover ul{
	display:block;
	top:20px;
	left:15px;
}


/********************************
 	      NAVIGATION <IE6
*********************************/
#nav-ie6 {
	display:none;
	_display:block;
}

.nav-item-ie6 {
	float:right;
	margin-top:6px;
}

.nav-divider-ie6 {width:1px; height:14px; background:#ED1B24; margin:6px 5px 0 5px; float:right;}

#ie6-subnav {
	display:none;
	_display:block;
	text-align:right;
}

.subnav-divider-ie6 {width:1px; height:14px; background:#ED1B24; margin:6px 5px 0 5px;}


/********************************
       NAV ITEM ON MARKER
*********************************/
#nav-home-on {
	float:right;
	width:52px;
	height:25px;
	margin:0 0px -26px 0;
	_display:none;
}

#nav-about-on {
	float:right;
	width:67px;
	height:25px;
	margin:0 508px -26px 0;
	_display:none;
}

#nav-contact-on {
	float:right;
	width:64px;
	height:25px;
	margin:0 435px -26px 0;
	_display:none;
}

#nav-services-on {
	float:right;
	width:64px;
	height:25px;
	margin:0 361px -26px 0;
	_display:none;
}

#nav-inventory-on {
	float:right;
	width:69px;
	height:25px;
	margin:0 283px -26px 0;
	_display:none;
}

#nav-products-on {
	float:right;
	width:65px;
	height:25px;
	margin:0 209px -26px 0;
	_display:none;
}

#nav-feedback-on {
	float:right;
	width:75px;
	height:25px;
	margin:0 125px -26px 0;
	_display:none;
}

#nav-my303-on {
	float:right;
	width:54px;
	height:25px;
	margin:0 62px -26px 0;
	_display:none;
}


/********************************
	     CONTENT WRAPPER
*********************************/
#content-wrapper {
	width:100%;
	margin:0px;
}

/********************************
	       LEFT COLUMN
*********************************/
#left-column {
	width:210px;
	height:100%;
	float:left;
}

#address {
	height:65px;
	margin:85px 0 0 30px;
	text-align:center;
	letter-spacing:.5px;
	background:url(images/address-bg.png) no-repeat top center;
	_background:url(images/address-bg.gif) no-repeat top center;
}

#promo {
	margin:200px 0 25px 20px;
	width:110px;
	height:125px;
	overflow:hidden;
	text-align:center;
	font-weight:bold;
	color:#999;
}

.jsclass body .randomordercontent {
display: none;
}

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

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

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

/********************************
	       MAIN CONTENT
*********************************/
#main-content {
	position:absolute;
	top:220px;
	left:210px;
}

.main-content-section {
	background:url(images/content-bg.png) repeat;
	_background:#EEE;
	border:1px solid #FFF;
	margin:0 25px 10px 25px;
	padding:5px 10px;
}

.main-content-section p {margin:5px 0;}

.main-content-list {
	font-size:10px;
	line-height:13px;
	margin-top:5px;
	margin-left:35px;
	list-style:url(images/list-arrow.png);
	_list-style:url(images/list-arrow.gif);	
}

.main-content-list li {
	padding-bottom:5px;
}


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


#slogan {
	width:414px;
	height:20px;
	text-indent:-9999px;
	background:url(images/slogan.png) no-repeat;
	_background:url(images/slogan.jpg) no-repeat;
	margin:0 auto;
	_margin:0 25px;
}

#slogan-reflect {
	width:432px;
	height:11px;
	text-indent:-9999px;
	background:url(images/slogan-reflect.png) no-repeat;
	_background:url(images/slogan-reflect.jpg) no-repeat;
	margin:0 auto;
	_margin:0 25px;
}

#slogan-2 {
	width:562px;
	height:20px;
	text-indent:-9999px;
	background:url(images/slogan-2.png) no-repeat;
	_background:url(images/slogan-2.jpg) no-repeat;
	margin:0 auto;
	_margin:0 25px;
}

#slogan-2-reflect {
	width:580px;
	height:11px;
	text-indent:-9999px;
	background:url(images/slogan-2-reflect.png) no-repeat;
	_background:url(images/slogan-2-reflect.jpg) no-repeat;
	margin:0 auto;
	_margin:0 25px;
}

/********************************
	         FOOTER
*********************************/
#footer-seperator {
	height:10px;
	border:1px dotted #E1E1E1;
	margin:100px 25px 0 25px;
}

#footer-nav {
	font-size:10px;
	font-variant:small-caps;
	color:#CCC;
	text-align:center;
	border:1px dotted #E1E1E1;
	margin:100px 25px 0 25px;
}

#footer-info {
	font-size:8px;
	letter-spacing:0px;
	color:#666;
	text-align:center;
	margin:15px 25px;
}

a.foot {color:#999;}
a.foot2 {color:#666;}
a.foot2:hover {color:#ED1B24}

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

/*********************************
		     LIGHTBOX
*********************************/
#lightbox{
	background-color:#F6F6F6;
	border: 1px solid #e1e1e1;
	padding: 10px;
	}
#lightboxDetails{
	font-size: 0.9em;
	padding-top: 0.4em;
	}	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;} 
#overlay img{ border: none; }

#overlay{ background-image: url(images/overlay.png); }

* html #overlay{
	background-color: #FFF;
	background-color: transparent;
	background-image: url(blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/overlay.png", sizingMethod="scale");
	}
	
	
/*********************************
	       IE6 MESSAGE
*********************************/
#sectionIE {}
#ie6_browsererrorwrapper	{
	position:absolute;
	top:0;
	left:0;
	background-image:url(images/ANoteOnBrowsing_DonWrapperBG.gif);
	background-repeat:repeat;
	width:100%;
	height:100%;
	overflow:hidden;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	display:none;
	_display:block;
}

#ie6_browsermessage	{
	position:relative;
	margin:0 auto;
	_top:25px;
	_left:175;
	padding:30px;
	text-align:center;
	width:900px;
	height:615px;
	overflow:auto;
	background-color:#fff;
	border:15px solid #302b1e;
	display:none;
	_display:block;
}

#ie6_browsermessage p	{
	margin:0 0 15px 0;
}

#ie6_browsermessage h1	{
	margin:0 0 30px 0;
	font-size:22px;
}

#ie6_browsermessage h2	{
	margin:0 0 15px 0;
	font-size:18px;
}

#ie6_col1	{
	text-align:left;
	width:450px;
	float:left;
	padding-bottom:10px;
}

#ie6_col1 h2	{
	margin:30px 0 15px 0;
}

#ie6_col2	{
	text-align:left;
	float:left;
	width:275px;
	margin:0 0 0 50px;
	font-size:11px;
	color:#666666;
	padding-bottom:10px;
}

#ie6_col2 h2	{margin:0 0 0 0; font-size:15px; _font-size:13px;}
#ie6_col2 h3	{margin:0 0 15px 0; font-size:12px; _font-size:11px; color:#888; font-weight:normal;}

#ie6_col2 p em	{color:#333; font-weight:bold;}

#goOnUpgrade1 {
	position:absolute;
	margin:-30px 0 0 -43px;
	}
#goOnUpgrade2 {
	position:absolute;
	margin:-30px 0 0 -43px;
	}
#goOnUpgrade3 {
	position:absolute;
	margin:-30px 0 0 -43px;
	}
#goOnUpgrade4 {
	position:absolute;
	margin:-30px 0 0 -30px;
	}
	
#close_btn {
	position:absolute;
	top:10px;
	right:20px;
	}