/***********************************************
* EBYTES COMPUTERS (EBYTESONLINE.COM)
* HANDCRAFTED BY STEFAN SOBERING
* 
* CREATED ON: AUGUST 30TH, 2008
* LAST REVISED ON: SEPTEMBER 1ST, 2008
***********************************************/

*, button, textinput, textarea{ margin: 0; padding: 0; outline: 0; border: 0; }

div.clear{ clear: both; }

body{
	background: #e0e0e0;
	font-size: 13px;
	color: #3c3c3c;
	margin: 0 0 15px 0;
	font-family: Helvetica, Arial, sans-serif;
}

/***********************************************
* LAYOUT
***********************************************/

/* HEADER & NAVIGATION */

div#header{ 
	width: 100%; height: 136px;
	margin: 0 0 15px 0;
	background: url(img/body-background.jpg) repeat-x top left;
}
	#header h1 a{
		display: block;
		width: 279px; height: 45px;
		text-indent: -7777px;
		margin: 0 0 0 31px;
		position: relative;
		top: 43px;
		background: url(img/header-logo.jpg) no-repeat top left;
		border: 0;
	}
	#header h1 a:hover{ background: url(img/header-logo-hover.jpg) no-repeat top left; }
	
div#header-wrapper{
	width: 1000px;
	margin: 0 auto;
	z-index: 0;
}

div#navigation{
	float: right;
	position: relative;
	top: 55px;
	right: 30px;
	height: 30px;
}
	#navigation a{
		text-shadow: 1px 1px #000;		color: #fff;
		font-size: 12px;
		font-weight: bold;
		text-decoration: none;
		padding-left: 10px;
		background: url(img/navigation-normal-left.jpg) no-repeat top left;
	}
		#navigation a:hover, li#active a{ background: url(img/navigation-left.jpg) no-repeat top left; cursor: pointer; }
		#navigation a span{
			padding-right: 10px;
			background: url(img/navigation-normal-right.jpg) no-repeat top right;
		}
			#navigation a:hover span, li#active span{ background: url(img/navigation-right.jpg) no-repeat top right; }
	#navigation a, #navigation a span{ display: block; float: left; line-height: 30px; }
	#navigation ul{ list-style: none; }
	#navigation li{ float: left; margin: 0 5px 0 0; }
	
/*	#navigation ul{
		white-space: nowrap;
	}
	#navigation ul li{
		display: inline;
		list-style-type: none;
	}
	#navigation ul li a{
		background: url(img/navigation-normal-left.jpg) no-repeat top left;
		padding: 7px 0 7px 10px;
		margin: 0 5px 0 0;
		color: #fff;
		font-size: 12px;
		font-weight: bold;
		text-decoration: none;
	}
		#navigation li a:hover{ background: url(img/navigation-left.jpg) no-repeat top left; }
	#navigation ul li span{
		background: url(img/navigation-normal-right.jpg) no-repeat top right;
		padding: 7px 10px 7px 0;
		display: inline;
	}
		#navigation ul li a:hover span{ background: url(img/navigation-right.jpg) no-repeat top right; }
	#navigation ul li#active a{
		background: url(img/navigation-left.jpg) no-repeat top left;
	}
	#navigation ul li#active span{
		background: url(img/navigation-right.jpg) no-repeat top right;
	} */

/* MAIN CONTENT BOX */

div#wrapper{ 
	margin: 0 auto; 
	width: 962px;
	background: url(img/box-background.jpg) repeat-y top left; 
}

div#padding-div{
	padding: 11px 15px;
}

div#box-top{ height: 4px; background: url(img/box-top.jpg) no-repeat top left; }
div#box-bottom{ height: 4px; background: url(img/box-bottom.jpg) no-repeat top left; }


div.middle-float{ float: left; margin: 0 15px 0 0; }

div#left-bar, div#right-bar{ width: 200px; }
div#right-bar{ margin: 0; float: right; }

div#main-box{ width: 502px; }

div.side-box{
	width: 180px;
	padding: 10px;
	background: url(img/sidebar-background.jpg) no-repeat bottom left;
	margin: 0 0 15px 0;
}

/* FOOTER */

div#footer{
	width: 962px;
	text-align: center;
	margin: 13px auto 20px;
}
	#footer ul li{
		display: inline;
		list-style-type: none;
		padding: 0 20px 0 0;
		font-size: 12px;
	}
	
/***********************************************
* TYPOGRAPHY
***********************************************/

h2{ color: #8d1919; margin: 0 0 10px 0; font-size: 20px; }

h3{ margin: 15px 0 10px 0; font-size: 16px; }

h4{ color: #8d1919; margin: 0 0 10px 0; font-size: 14px; }

p{
	line-height: 20px;
	margin: 0 0 15px 0;
}

p.center{ text-align: center; padding: 15px 0 0 0; }

p.cite{ text-align: right; font-size: 11px; font-style: italic; font-family: "Georgia";}

.side-box p{ margin: 0; font-size: 12px; }

p.address{ text-align: center; }

p.position{ margin: 0 0 5px 0; }

p + p{ margin: 0; }

#footer p{ color: #959595; font-size: 12px; margin: 0 0 3px 0; }

/***********************************************
* SPECIAL HEADINGS
***********************************************/

h2#tech-tips{
	display: block;
	width: 200px; height: 35px;
	background: url(img/tech-tips-heading.jpg) no-repeat top left;
	text-indent: -7777px;
	margin: 0;
}

h2#quick-deals{
	display: block;
	width: 200px; height: 35px;
	background: url(img/quick-deals-heading.jpg) no-repeat top left;
	text-indent: -7777px;
	margin: 0
}

h2#featured-download{
	display: block;
	width: 200px; height: 35px;
	background: url(img/featured-download-heading.jpg) no-repeat top left;
	text-indent: -7777px;
	margin: 0
}

h2#our-location{
	display: block;
	width: 200px; height: 35px;
	background: url(img/our-location-heading.jpg) no-repeat top left;
	text-indent: -7777px;
	margin: 0
}

h2#staff-profile{
	display: block;
	width: 200px; height: 35px;
	background: url(img/staff-profile-heading.jpg) no-repeat top left;
	text-indent: -7777px;
	margin: 0
}

/***********************************************
* HYPERLINKS & IMG STYLES
***********************************************/

a:link,
a:visited{ color: #8d1919; text-decoration: underline; }
a:hover{ text-decoration: none; }

#footer a:link,
#footer a:visited{ color: #959595; text-decoration: underline; }
#footer a:hover{ text-decoration: none; }

img{ border: none; }

img.side-img{ margin: 0 0 10px 0; }

/***********************************************
* SUBPAGE SPECIFIC
***********************************************/

div#main-box-sub{ width: 717px; margin: 0; }

/***********************************************
* LISTS
***********************************************/

ul.specs{
	font-weight: bold;
	width: 350px;
	margin: 0 0 15px 35px;
	border-top: 1px solid #cecece;
}
	ul.specs li{ 
		line-height: 30px;
		list-style-image: url(img/tick.png);
		border-bottom: 1px solid #cecece;
	}
	
	ul.specs li.phone{ list-style-image: url(img/telephone.png); }
	ul.specs li.fax{ list-style-image: url(img/page_white_text_width.png); }
	ul.specs li.cell{ list-style-image: url(img/phone_sound.png); }
	ul.specs li.building{ list-style-image: url(img/building.png); }
	ul.specs li.email{ list-style-image: url(img/email.png); }
	ul.specs li.price{ list-style-image: url(img/money_dollar.png); }
	
/***********************************************
* WTF DUDE?
***********************************************/

h3.toggler:hover{
	cursor: pointer; text-decoration: underline;
}

span.em{ font-style: italic; color: #5c5c5c; }

td.price{ font-weight: bold;}

td{ line-height: 25px; }

tr:hover{ background: #fdf972; }

p.valid{ width: 88px; float: left; margin-right: 12px; }

/***********************************************
* MOOTOOLS TOOLTIP
***********************************************/

.tool-tip {
	color: #fff;
	width: 350px;
	z-index: 13000;
}
 
.tool-title {
	font-weight: bold;
	font-size: 11px;
	margin: 0;
	color: #f47676;
	padding: 8px 8px 4px;
	background: url(img/bubble.png) top left;
}
 
.tool-text {
	font-size: 11px;
	padding: 4px 8px 8px;
	background: url(img/bubble.png) bottom right;
}
 
.custom-tip {
	color: #000;
	width: 130px;
	z-index: 13000;
}
 
.custom-title {
	font-weight: bold;
	font-size: 11px;
	margin: 0;
	color: #3E4F14;
	padding: 8px 8px 4px;
	background: #C3DF7D;
	border-bottom: 1px solid #B5CF74;
}
 
.custom-text {
	font-size: 11px;
	padding: 4px 8px 8px;
	background: #CFDFA7;
}

/***********************************************
* CSS FRAME
***********************************************/

#message {
  width: 430px;
  padding: 0 0 30px 0;
  float: left;
}

.left_textinput {
  width: 200px;
  margin: 0 30px 0 0;
  float: left;
}

.right_textinput {
  width: 200px;
  float: left;
}

  #message .row {margin: 9px 0 0 0;}

  #message div.textinput {
    background: url(img/textbox-background.gif) 0 0 no-repeat;
    height: 26px;
    margin: 3px 0 0 0;
  }

  #message input {
    background: none;
    width: 188px;
    height: 21px;
    padding: 5px 6px 0 6px;
    border: none;
  }

  #message div.textarea {
    background: url(img/textarea-background.gif) 0 0 no-repeat;
    height: 95px;
    margin: 3px 0 0 0;
  }

  #message textarea {
    background: none;
    width: 418px;
    height: 83px;
    margin: 5px 6px 5px 6px;
    border: none;
  }

  #message button {
    background: url(img/button.gif) 0 0 no-repeat;
    height: 31px;
    width: 99px;
    margin: 16px 0 0 0;
    float: right;
  }

  #message button:hover {background-position: 0 -31px;}
  
  #message span{display:none;}


div#santa{
	display: block;
	width: 41px; height: 48px;
	position: relative;
	background: url(img/santa.png) no-repeat top left;
	float: left;
	top: 22px;
	left: 29px;
	z-index: 2;
}