/***********************************************************************************************************
@author: Parris Khachi, Parris Studios
@version: 1.0 Final
Description: The class handles colors, layout, and fonts for surehitter.com,
This page is divided into a few sections.

TABLE OF CONTENTS:
Basic Tags and Borders: -wrapping
Header Styles: -header
Logo Styles: -branding
Menu Styles: -menu
Scroll Bar Styles: -scroll bar
Content Styles: -content
Footer Styles: -footer

LEGAL RIGHTS:
It is unauthorized to copy all or part of this code. It is required that this documentation
be kept. You are free to modify the following lines; however, credit must be retained by 
Parris Khachi and Parris Studios. You may also place yourself as an author if you modify
the code below substaintially. If you wish to use some of this code on another website 
permission must first be gained from Parris Studios. These lines are owned by
Parris Studios and may not be reproduced or distributed. These lines are hereby licensed to
SureHitter.com and J2R2. Please keep this code well documented
*************************************************************************************************************/

/* Basic Tags and Borders, the following styles govern the borders of the content and basic tags: -wrapping */
body {
background-color:#EAEAEA;
margin: 0;
padding: 0;
text-align: center; /* for IE5.x/Win */
vertical-align:middle;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}
#background
{

background-color:#FFFFFF;
width:948px;
margin: 0 auto;
background:url('../assets/background2.jpg') ;
background-repeat:repeat-y;
background-position:center;
padding: 0px 45px 0px 45px;
position:relative;
}

#wrapper {
 /* width and height of the page based on the design */
 /* required for the borders to stay aligned */
text-align: left; /* for IE5.x/Win */
width: 948px;
}

h2 {
font-size:22px;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:20px;
font-weight:600;
padding:0px;
margin:0px;
}

h3 {
font-size:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:19px;
font-weight:600;
display:block;
padding:0px;
margin:0px;
background-color:#000066;
color:#FFFFFF;
border-bottom:#0033FF medium solid;
}

h4 {
font-size:16px;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:20px;
font-weight:600;
padding:0px;
margin:0px;
}

h5{
margin-bottom:0px;
padding-bottom:0px;
}

h6 {
font-size:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:8px;
font-weight:600;
padding:0px;
margin:0px;
}

.img-borders {
padding:3px;
margin: 3px;
border:thin #999999 solid;
}


.standard-list {
list-style-image:url('../assets/bullet_point.gif');
list-style-position:outside;
list-style-type:circle;
padding:5px;
background-position:center left;
}

div.hr {
height: 30px;
background:no-repeat #fff url('../assets/hr1.gif') scroll center;
padding:5px;

}
div.hr hr {
  display: none;
}

input.send-btn {
background:#FFFF00;
border-color:#999999;
outline:solid thin #999999;
}
input.send-btn:hover {
background:#CCCCCC;
border-color:#999999;
outline:solid thin #999999;
}
/**********************************************************************/


/* Header Styles, the following govern some basic header styles: -header */
#header {
background-image: url('../assets/headerUniversal.jpg');
background-repeat:no-repeat;
background-position:top;
width: 952px;
height: 131px;
text-align:center; /* horizontal centering IE */
position:relative;
}

#header2 {
background-image: url('../assets/header2.jpg');
background-repeat:no-repeat;
background-position:top;
width: 952px;
height: 131px;
text-align:center; /* horizontal centering IE */
position:relative;
}

#floating-ball{
float:left;
position:absolute;
left: 929px;
top: 0px;
width:109px; 
height:57px;
}

#money-back{
float:left;
position:absolute;
left: 677px;
top: 321px;
width:175px; 
height:93px;
}

#money-back2{
float:left;
position:absolute;
left: 580px;
top: 330px;
width:175px; 
height:93px;
}

/**********************************************************************/



/* Logo Styles: -branding ********************************************/
#logo{
background: url('../Webdesign/logo.jpg') no-repeat; /* used as a background to maintain
perfect height in IE */
width:245px;
height:63px;
margin:0 0 0 0;
padding:0 0 0 0;
line-height:63px; /* other things to keep specficity, probably not needed*/
position:relative;
float:left;
}
/********************************************************************/


/* Content Styles: -content *****************************************/
#content{
width:952px;
margin:0 0 0 0;
display:table;
}

#page_title{
width:100%;
margin-bottom:10px;
padding: 0px;
background:url('../assets/title_back.jpg') repeat-x bottom;
background-color:#4E4FF9;
line-height:24px;
color:#FFFFFF;
float:left;
}

#top-right-corner{
background:no-repeat top right url('../assets/right-top-corner.gif');
}
#bottom-right-corner{
background:no-repeat bottom right url('../assets/right-bottom-corner.gif');
}

#top-left-corner{
background:no-repeat top left url('../assets/left-top-corner.gif');
}
#bottom-left-corner{
background:no-repeat bottom left url('../assets/left-bottom-corner.gif');
}

#primary_column{
width:710px;
float:left;
margin-right:10px;
position: relative;

}

#secondary_column{
width:175px;
float:right;
position: relative;
text-align:left;
background-color:#E9E9E9;
border-left:#999999 thin solid;
padding:5px;
border-bottom:#999999 thin solid;
border-top:#999999 thin solid;
margin-top:10px;

}
/********************************************************************/


/* Footer Styles: -footer *****************************************/
#footer{
float:left;
width:100%;
background: #000066;
color:#FFFFFF;
position:relative;
font-size:13px;
}

#copyright{
float:left;
background: #000066;
color:#FFFFFF;
}

#links{
float:right;
background: #000066;
color:#FFFFFF;
}

#links a{
color:#FFFFFF;
margin-right:10px;
margin-left:10px;
}

/********************************************************************/



a.button, span.button, del.button{
	
	display:-moz-inline-box;
	display:inline-block;
	cursor:pointer;
	border:none;
    font-size:0;
    line-height:0;
    
	/*
	for Safari, read this first
	http://creativebits.org/webdev/safari_background_repeat_bug_fix
	*/
	background-position:0 0;
	background-repeat:no-repeat;
	height:30px;
	text-decoration:none;
	color:#2e523b;
	font-style:normal;
	margin:0 6px 0px 0;
	padding:0 10px 0 0;	
	vertical-align:middle;	
	
    padding-top:-2px;
	_position:relative;
	_width:10px;	
	_overflow-y:hidden;
}



a.button, span.button, del.button,
a.button span, span.button button, span.button input, del.button span{
    background-image:url(form_buttons.png);
    _background-image:url(form_buttons.gif);
}


a.button span, span.button button, span.button input, del.button span{
	
	white-space:nowrap;
	cursor:pointer;
    color:#FF0000;
	display:-moz-inline-box;
	display:inline-block;
	line-height:1;
    letter-spacing:0 !important;
    font-family:"Arial" !important;
    font-size:12px !important;
    font-style:normal;    
    background-color:transparent;
	background-position:100% 0;
	background-repeat:no-repeat;
	height:30px;
	padding:8px 20px 0 10px;
	margin:0 -16px 0 10px;
	border:none;
	vertical-align:text-top;
	zoom:1;
	_position:relative;
    _padding-left:0px;
	_padding-right:12px;
	_margin-right:-10px;	
	_display:block;
	_top:0;
	_right:-5px;
	
}


span.button button{
   line-height:2.5;/*Opera need this*/
}

html.safari a.button span, 
html.safari del.button span{
  line-height:1.3;
}

html.safari span.button button{
  line-height:2.6;
}

html.safari a.button:focus,
html.safari span.button button:focus{
    outline:none;
}



del.button{
	/* cursor:not-allowed;	*/
	background-position:0 -120px;
	
}

del.button span{
	cursor:default;
    color:#aaa !important;
	background-position:100% -120px;
}


span.button button, span.button input{
	padding-top:0px;
	line-height:2.5;/*Opera need this*/
}


/** optional **/
/*
a.button:visited{
	color:#aaa;
}
*/


/*Hover Style*/

a.button:hover, 
span.button:hover,
a.button:focus, 

a.dom-button-focus, 
span.button-behavior-hover{
	background-position:0 -60px;
	color:#222;
	text-decoration:none;
}





a.button:hover span, 
span.button:hover button, 
a.button:focus span, 

span.button-behavior-hover button, 
span.button-behavior-hover input{
	background-position:100% -60px;
}


a.button:active, a.button:focus span{
	color:#444;
}




del.button-behavior-hover, del.button:hover{
	background-position:0 -180px;
	/* cursor:not-allowed; */
}


del.button-behavior-hover span, del.button:hover span{
	background-position:100% -180px;
	/* cursor:not-allowed; */
	
}




/*Optional hack for IE6 to simulate :hover selector*/

span.button button, del.button span, span.button input{


	
	_behavior:expression(
		(function(el){

			if( typeof( behavior_onMouseEnter) == 'undefined'){

				
				behavior_onMouseEnter = function(el){
					
					var dEl = this.parentNode;					
					var sClass = dEl.className ;
					dEl.__defaultClassName = sClass ;
					dEl.className = sClass + ' button-behavior-hover';	
					this.setCapture();
				};

				behavior_onMouseLeave = function(el) {
					var dEl = this.parentNode;
					dEl.className = dEl.__defaultClassName ;
					dEl.__defaultClassName = undefined;
					this.releaseCapture();
				};


			};
			
			
			el.runtimeStyle.behavior = 'none';
			el.onmouseenter = behavior_onMouseEnter;
			el.onmouseleave = behavior_onMouseLeave;
			
			
		})(this));




}