/*******************************************************
this stylesheet is used for the general styling of the 
Verve website
*******************************************************/
body 
{
	background:#D9DaDC url('../images/bodyBg.jpg') repeat-x;
	margin:0;
	padding:0;
	text-align:center;
	font:12px Arial, sans-serif;
	color:#878686;
}

/*this add's transparency to the png images
used for IE6 and less*/
#leftVerve, #countdown
{ 
	behavior: url('pngFix/png.htc'); 
}

/*site heading in orange*/
h4
{
	font:bold 105% Arial, sans-serif;
	margin:0 20px 10px 40px;
	color:#FF6103;
}

/*general link style*/
a
{
	font:12px Arial, sans-serif;
	color:#FF6103;
	text-decoration:none;
}

a:hover
{
	text-decoration:underline;
}

.bold
{
	font-weight:bold;
}

/****************************************************
site styling --- this should not be changed
****************************************************/

#container
{
	width:970px;
	min-height:751px;
	text-align:left;
	margin:0 auto;
}

#header
{
	width:970px;
	float:left;
	height:208px;
}

#logo
{
	width:486px;
	height:211px;
	position:absolute;
	top:0px;
	z-index:3;
}

#logo img, #signUp img, #businessSticker, #buttonMiddle img
{
	border:none;
}

.phoneBold
{
	font:bold 18px Arial, sans-serif;
	color:#FF6103;
}

#businessSticker
{
	float:left;
	margin-right:25px;
}

#signUp
{
	width:293px;
	height:165px;
	float:right;	
}

#leftVerve
{
	width:259px;
	height:557px;
	top:208px;
	position:absolute;
	z-index:1;
	background:transparent url('../images/verveCan.png') no-repeat left top;
}

/***************************************************
navi styling -- this shpuld not be changed 
except on comment lines as stated
***************************************************/
#navi
{
	width:550px;
	position:relative;
	top:169px;
	left:450px;
	height:30px;
}

.nav
{
	width:95px;
	float:left;
	text-align:center;
	padding-top:3px;
}

.imgHeight
{
	height:25px;
}

.floatLeft
{
	float:left;
	display:inline;
	margin:-1px 0 0 3px;
}

#navi a
{ 
	color:#666; /* the colour of the links in the navigation */
	text-decoration:none;
	font:12px Arial, sans-serif; /* the font family and size of the links in the navigation */
}

#navi a:hover
{
	color:#FF6103; /* the hover colour of the links in the navigation */
}

#navi img
{
	border:none;
}

#homeLink img, #homeLink a
{
	padding-left:30px;
}

body#home a#lHome, body#buy a#lBuy, body#paid a#lPaid, body#contact a#lContact, body#energy a#lEnergy
{
	color:#FF6103; /* the current link colour of the links in the navigation */
}

/**********************************************************
content box styling -- this should not be changed
**********************************************************/
#contentOuter
{
	width:760px;
	float:right;
	margin-top:7px;
}

#buttonBox
{
	width:760px;
	float:right;
	margin-top:10px;	

}

#contentTop
{
	width:754px;
	height:24px;
	float:left;
	background:transparent url('../images/contentTop.jpg') no-repeat;
}

#contentMiddle
{
	width:754px;
	height:auto;
	float:left;
	background:transparent url('../images/contentMiddle.jpg') repeat-y;
}

#contentBoxScroll
{
	width:753px;
	height:345px; /*set this height to 'auto' if you want expand the whole page vertically without the scrollbar */
	float:left;
	overflow :auto;
	overflow-x:hidden; /*if height is set to 'auto' you should comment this line out */
	overflow-y:scroll; /*if height is set to 'auto' you should comment this line out */
}

#contentMiddle p /* do not use p tags when you want to wrap text around an image or video */
{
	width:680px;
	padding:0 20px 0 40px;
	font:12px Arial, sans-serif;
	color:#878686;
}

 .p /*use this div class instead when you want to wrap text around an image or video */
 {
	padding:0 20px 15px 40px;
 }
 
#contentBottom
{
	width:754px;
	height:26px;
	float:left;
	background:transparent url('../images/contentBottom.jpg') no-repeat;
}

/********************************************************************
example height and width of a video content box 
can be changed or you can create your own size of video box 
********************************************************************/
.videoBox 
{
	width:289px;
	float:right;
	margin:0 15px 10px 20px;
	
}

.videoTop
{
	width:289px;
	height:27px;
	float:left;
	background:transparent url('../images/videoTop.jpg') no-repeat;
}

.videoTop h4
{
	font:125% Arial, sans-serif;
	margin:5px 0 0 10px;
	color:#000;
}

.videoMiddle
{
	width:289px;
	min-height:200px;
	height:auto;
	float:left;
	background:transparent url('../images/videoMiddle.jpg') ;
}

.videoBottom
{
	width:289px;
	height:29px;
	float:left;
	padding-top:5px;
	background:transparent url('../images/videoBottom.jpg') no-repeat;
}

.videoBottom a
{
	margin-left:190px;
}

/********************************************************************
footer styling -- this should not be changed
********************************************************************/
#footer
{
	width:970px;
	margin:0 auto;
	clear:both;
	font:11px Arial, sans-serif;
	color:#666;
	margin-top:-20px;
}

#footer p
{
	float:right;
	text-align:right;
	margin-right:10px;
}

#footer a
{
	font:11px Arial, sans-serif;
	color:#666;
	text-decoration:none;
}

#footer a:hover
{
	text-decoration:underline;
}

/********************************************************************
bottom buttons styling -- this should not be changed
********************************************************************/
#buttonLeft
{
	width:314px;
	height:165px;
	float:left;
	margin-right:16px;
	background:transparent url('../images/buttonLeft.jpg') no-repeat;
}

#buttonMiddle
{
	width:205px;
	height:165px;
	float:left;
	margin-right:16px;
	background:transparent url('../images/buttonMiddle.jpg') no-repeat;
}

#buttonRight
{
	width:202px;
	height:165px;
	float:left;
	background:transparent url('../images/buttonRight.jpg') no-repeat;
}

#orderButton
{
	cursor:hand;
}

/********************************************************************
bottom buttons styling -- this should not be changed
********************************************************************/
label
{
	text-align:left;
}

.red
{
	color:Red;
}

.forms
{
	border-width:1px; 
	border-color:rgb(255,102,0); 
	border-style:solid;
}

.forms td
{
	padding:0 30px;
}

.submit
{
	background-color:#FF6103;
	padding:3px 10px;
	color:#fff;
	border:none;
	cursor:hand;
	font:bold 12px Arial, sans-serif;
}

/****************************************************************
general stylings
****************************************************************/
#countdown
{
	font:bold 16px Arial, sans-serif;
	padding:43px 0 20px 85px;
	margin:10px 0 0 -15px;
	background:#fff url('../images/countdown.png') no-repeat;
	width:674px;
	height:10px;
}