/* UNIVERSAL STYLES
================================================================================*/

html, body
{
	padding:0;
	margin:0;
	font:normal 14px Arial, Helvetica, sans-serif;
	color:#282828;
	background:#0b1e2d url(../images/bg.jpg) no-repeat top center;  
}
	
/*fixing firefox outline*/

a:active
{
	outline:none;
}
	
:focus
{
	outline:none;
}
	
img, form
{
	padding:0;
	margin:0;
	border:none;
}
	
	
/*
	Set this to the same settings as the main content area
	This way, SPAW boxes will have this background (font, etc) insted of the
	cascaded background, font, etc.
	Especially important if body.background-image is set to something, but content
	area is set to background-color:white (eg).
*/
.spaw_body
{
	width:959px;
	background-color:#fff;
	padding:5px 15px 5px 15px;
	background-image:none;
}
	
	
	
	
	
/*TEXT STYLES
================================================================================*/

h1
{
	padding:0 0 24px 0;
	margin:0;
	font:bold 1.4 em Arial, Helvetica, sans-serif;
	color:#2d2d83;
	line-height:125%;
	border-bottom:1px solid #2d2d83;
}
	
h2{
	padding:0 0 35px 0;
	margin:0;
	font:bold 25px Arial, Helvetica, sans-serif;
	color:#282828;
	line-height:100%;
	}
	
h3
{
	padding:0 0 20px 0;
	margin:0 0 20px 0;
	font:bold 1.3em Arial, Helvetica, sans-serif;
	color:#2d2d83;
	line-height:100%;
	border-bottom:1px solid #2d2d83;
}
	
h4
{
	padding:0 0 4px 0;
	margin:0;
	font:bold 1.3em Arial, Helvetica, sans-serif;
	color:#282828;
	line-height:100%;
}


.submit {
	 background: url('http://www.stenicproducts.com/imgs/btn_cart_SM.gif') no-repeat top left;
	 border: none;
	 padding: 0;
}


.tinytext {
	font-size: 0.74em;	
}



/* NAVIGATION STYLES
================================================================================*/

/* This is the big-huge list of nav style 
	#nav is the "top" nav menu.  Stenic does not have other menus, but if so, you would
		do something simliar to the ul li structure here. Just replace #nav with
		the ID of your other menu.  #side, #rightmenu, #bottom, whatever

	Some significant classes shared amongst all tiers:

	.first 	= This is the first item in this menu (or sub menu).  Some sites will render
		  their first-listed item differently than all others.

	.more	= This menu item contains sub-menu items. This class is attached to the
		  a tag, and usually is handled by tacking a "more.jpg" image to its background
*/
#nav
{
	background:url(../images/nav_bg.jpg) repeat-x 0 0;
	width:983px;
	height:48px;
	border-top:1px solid #d6d6d6;
}

/* Any first li under nav gets no border */
#nav li .first
{
	border-top: none;
}
	
/* #nav tier1 */

#nav ul
{
        padding:0;
        margin:0;
        line-height:100%;
        list-style:none;
        z-index: 200;
}


#nav ul li
{
        margin:0 2px 0 0;
        float:left;
	font:bold 17px Arial, Helvetica, sans-serif;
        color:#fff;
        position: relative;
        height: 43px;
}

#nav ul li a:link, #nav ul li a:visited, #nav ul li a:active {
	text-decoration:none;
	color:#fff;
	display:inline-block;
	height:34px;
	padding:15px 14px 0 15px;
	}

#nav ul li a:hover, #nav ul li a.active 
{
	text-decoration:none;
	color:#0090ff;
}


/* end #nav Tier 1 */


/* Nav Tier 2 */
#nav ul ul 
{
        float: left;
        display: none;
        width: 220px;
        position: absolute;
        top: 100%;
        border: 1px solid white;
        background-image: url('../images/submenu_backing.png');
        right: 100%;
        left: 220px;
        left: 0;
        z-index: 200;
	background: #666;
}


#nav ul ul li 
{
        height: auto;
        border-top: 1px solid white;
        width: 220px;
}

#nav ul ul li.first 
{
        border-top: none;
}

#nav ul ul li a:link, #nav ul ul li a:visited, #nav ul ul li a:active, #nav ul ul li a:hover 
{
        text-transform: none;
        padding: 0;
        font-size: 16px;
        background-color: transparent;
        border: none;
        font-size: 14px;
        font-weight: normal;
        height: auto;
        padding: 8px 11px;
        width: 198px; /* 220 - 11 - 11 */
}

#nav ul ul li a:hover 
{
        background-color: #666;
}

#nav ul ul li a.more:link, #nav ul ul li a.more:visited, #nav ul ul li a.more:active, #nav ul ul li a.more:hover 
{
        background: url('../images/submenu_arrow1.gif') no-repeat 100% 50%;
        padding-right: 30px;
        width: 179px; /* 220 - 11 - 30 */
}

#nav ul ul li a.more:hover 
{
        background: url('../images/submenu_arrow_on.gif') no-repeat 100% 50%;
}


/* #nav TIER 3 */

#nav ul ul ul 
{
        position: absolute;
        left: 100%;
        top: -1px;
        width: 220px;
        z-index: 200;
}

#nav ul ul ul li 
{
        width: 220px;
}


#nav ul li ul li ul li
{
	background:#999;
}
	
	
	
.divider
{
	float:left;
	background:url(../images/divider.jpg) no-repeat 0 0;
	width:3px;
	height:48px;
}







/* LAYOUT STYLES
================================================================================*/

#container
{
	margin:0 auto 0 auto;
	width:989px;
}
	
#header
{
	width:983px;
	height:343px;
	border-left:3px solid #fffaf4;
	border-right:3px solid #fffaf4;
}
	
#header_flash
{
	width:969px;
	height:143px;
	background:url(../images/header.jpg) no-repeat 0 0;
	padding:151px 0 0 14px;
}
	
	

	
.cleardiv
{
	clear:both;
	font-size:0;
}


	
#bottom_content
{
	background:url(../images/bottom_content.png) no-repeat 0 0;
	width:959px;
	height:481px;
	padding:18px 0 0 30px;
}
	
#bottom_banners
{
	width:959px;
	padding:0 0 30px 0;
}
	
#banner_left a
{
	float:left;
	width:291px;
	margin:0 28px 0 0;
	background:url(../images/save_25.png) no-repeat 0 0;
	height:186px;
	display:block;
	cursor:pointer;
}
	
#banner_middle a
{
	float:left;
	width:291px;
	margin:0 28px 0 0;
	background:url(../images/save_space.png) no-repeat 0 0;
	height:186px;
	display:block;
	cursor:pointer;
}
	
#banner_right
{
	float:left;
	width:302px;
}
	
#order_online a
{
	background:url(../images/order_online.png) no-repeat 0 0;
	width:302px;
	height:56px;
	display:block;
	margin:0 0 6px 0;
	cursor:pointer;
}
	
#order_phone a
{
	background:url(../images/order_by_phone.png) no-repeat 0 0;
	width:302px;
	height:56px;
	display:block;
	margin:0 0 6px 0;
	cursor:pointer;
}
	
#order_email a
{
	background:url(../images/order_by_email.png) no-repeat 0 0;
	width:302px;
	height:56px;
	display:block;
	cursor:pointer;
}
	
#bottom_text
{
	width:959px;
}
	
#bottom_text_left
{
	float:left;
	width:605px;
	padding:20px 24px 0 10px;
}
	
.bottom_text_row
{
	width:605px;
	padding:0 0 30px 0;
}
	
.bottom_text_cell1
{
	float:left;
	width:255px;
	margin:0 15px 0 0;
}
	
.bottom_text_cell2
{
	float:left;
	width:335px;
}
	
.bottom_text_cell_pic
{
	float:left;
	width:35px;
	background:url(../images/tick.png) no-repeat 0 0;
	height:23px;
}
	
.bottom_text_cell_text
{
	float:left;
	width:220px;
	font:normal 23px Arial, Helvetica, sans-serif;
	color:#000;
}
	
.bottom_text_cell_text2
{
	float:left;
	width:300px;
	font:normal 23px Arial, Helvetica, sans-serif;
	color:#000;
}
	
#bottom_text_right
{
	float:left;
	width:296px;
	background:url(../images/product_outer.png) no-repeat 0 0;
	height:170px;
	text-align:center;
	padding:13px 0 0 0;
}
	
#footer_outer
{
	border-top:4px solid #fff;
	background-color:#2c2d80;
}
	
#footer
{
	padding:20px 0 30px 0;
	margin:0 auto 0 auto;
	width:989px;
	text-align:center;
}
	
#order_text
{
	padding:0 0 22px 0;
	margin:0;
	font:bold 24px Arial, Helvetica, sans-serif;
	color:#fff;
	line-height:120%;
}
	
.big_bold
{
	font:bold 31px Arial, Helvetica, sans-serif;
	color:#fff;
}

#copyright_text
{
	padding:0;
	margin:0;
	font:bold 11px Arial, Helvetica, sans-serif;
	color:#fff;
	line-height:160%;
}
	
#copyright_text a:link, #copyright_text a:visited
{
	text-decoration:none;
	color:#fff;
}
	
#copyright_text a:hover
{
	text-decoration:underline;
}	



/* Page content designs */

/* Any css common to all templates goes here */
#bodyarea
{
	text-align: left;
}


/* Template-specific changes go here. Note the order, it is very important!
	The 'container" div gets the overall css class.  That filters down
	to all other id/classes.  So the overall css class must be first.
	IE: if you create a new template class called 'funpage', then if you want
	specific layouts, you would go:
	.funpage #bodyarea {background: url(somecrazyjpg.jpg);}

*/

.home #bodyarea
{
	width:989px;
}

.inner #bodyarea 
{
	width:890px;
	background-color:#fff;
	padding:60px 70px 80px 29px;
}

.content{}

.home .content
{
	width:959px;
	background-color:#fff;
	padding:5px 15px 5px 15px;
}
	
.inner .content
{
	width:890px;
	border-bottom:1px solid #2d2d83;
	padding:0 0 17px 0;
	margin:0 0 18px 0;
}

.content .left
{
	float: left;
}

.home .content .left
{
	width:300px;
	margin:0 50px 0 0;
}
	
.inner .content .left
{
	width:320px;
	margin:0 5px 0 0;
}

.content .right
{
	float: left;
}

.home .content .right
{
	width:570px;
	padding:55px 0 0 0;
}
	
.inner .content .right
{
	width:540px;
	padding:5px 0 0 0;
}

.home .content .right p
{
	padding:0 0 14px 0;
	margin:0;
	font: 1.2em Arial, Helvetica, sans-serif;
	color:#282828;
	line-height:115%;
}
	
.inner .content .right p
{
	padding:0 0 14px 0;
	margin:0;
	line-height:130%;
}
	
.inner .content .right p a:link, .inner .content .right p a:visited
{
	text-decoration:none;
	color:#0090ff;
}
	
.inner .content .right p a:hover
{
	text-decoration:underline;
}

.home_flashmovie {
	padding: 54px 0 0 48px;
}