/* 	-----------------------------------
	
	Please refer to the documentation for
	instructions on modifying this file
	
*/

body 
	{
	background: #eee url("../images/beta/body-bg.png") top center no-repeat; /* This sets the background for the theme. It's set at 2560x640, which is huge, but the filesize is only 23kb. If you're interested in adding your own background, make sure that the dimensions are at least 1920x640 to cater for users with large monitors and high resolutions. It's advised that in order to keep the filesize down, you only use simple images in your body-bg.png - for example if one were to use a 2560x640 picture of a beach with a stunning sunset, then the filesize would be HUGE. If you insist on using a complex image in your background then please keep the dimensions small (such as 1600x640) but make sure to add a gradient to the sides of the background so that the blend doesn't look so harsh. */
	}
	
#header
	{
	background: url("../images/beta/header-bg.png") no-repeat; /* This sets the background for the header. In our case it's a picture of a business man with a laptop in his hands. If you're feeling adventurous you can change it in Photoshop, just open up header-bg.psd and do your thing. */
	}
	
#header2
	{
	background: url("../images/beta/header-bg2.png") no-repeat; /* This sets the background for the header. In our case it's a picture of a business man with a laptop in his hands. If you're feeling adventurous you can change it in Photoshop, just open up header-bg.psd and do your thing. */
	}
	
#navigation li a:link, #navigation li a:visited
	{
	color: #f8f8ef; /* From here you can change the color of text inside the navigation links */
	background-image: url(../images/beta/navigation.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	width: 100px;
	}
#navigation li a:hover, #navigation li a:active, #navigation li a:focus
	{
	background-position: 0 -72px; /* This sets the background position of the navigation. You don't need to edit this unless you're planning on changing the size of the buttons in the navigation. */
	color: #f8f8ef; /* From here you can select the color of the navigation's text links when hovered over */
	}
#welcome-page li#welcome a, #services-page li#services a, #about-us-page li#about-us a, #faq-page li#faq a, #blog-page li#blog a, #contact-us-page li#contact-us a
	{
	color: #2b8ae2;
	background-image: url(../images/beta/active.png);
	background-repeat: no-repeat;
	background-position: 2px;
	}
	
#identity
	{
	background: url("../images/beta/identity.png") no-repeat; /* If you're going to change the logo of the template (you should) then make sure that the logo lines up exactly with the guides in the identity.psd. This is demonstrated inside the .psd */
	}
#identity a:hover
    {
	background: url("../images/beta/identity_on.png") no-repeat;
	}
#tagline
	{
	background: url("../images/beta/tagline.png") no-repeat; /* No doubt you're going to want to change the tagline of the template and make sure if reflects the message your business wants to put out. When editing the tagline.psd, make sure that the text lines up perfectly with the guides. This is demonstrated inside the .psd */
	}
#rss
	{
	background: url("../images/beta/rss.png") no-repeat; /* If you want to change the icon for the RSS button, then you can open up the rss.psd and change it from there. The icon used is from the excellent icon pack provided by the guys over at wefunction.com - to get your hands on it, head on over to http://wefunction.com/2008/07/function-free-icon-set */
	}
#rss a:hover
    {
    background: url("../images/beta/rss_on.png") no-repeat;
	}
#content
	{
	background: #f8f8ef url("../images/beta/content-bg.png") bottom left no-repeat; /* From here you can change the border of the content area. At the moment it is set to a very subtle gray but you can edit it however you wish or remove it completely. */
	color: #422e03;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #dedede;
	border-bottom-color: #dedede;
	border-left-color: #dedede;
	}
#content2
	{
	background: #f8f8ef;
	color: #422e03;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #dedede;
	border-left-color: #dedede;
	}

	#welcome-banner
		{
		background: url("../images/beta/welcome-banner.png") no-repeat; /* If you want to change the text of the 'welcome' banner, you can open up welcome-banner.psd and change it from there. Please make sure that everything lines up correctly (use the guides as a reference). */
		}
#p1-banner
		{
		background: url("../images/beta/p1-banner.png") no-repeat; /* If you want to change the text of the 'welcome' banner, you can open up welcome-banner.psd and change it from there. Please make sure that everything lines up correctly (use the guides as a reference). */
		}
		
#p2-banner
		{
		background: url("../images/beta/p2-banner.png") no-repeat; /* If you want to change the text of the 'welcome' banner, you can open up welcome-banner.psd and change it from there. Please make sure that everything lines up correctly (use the guides as a reference). */
		}
#p3-banner
		{
		background: url("../images/beta/p3-banner.png") no-repeat; /* If you want to change the text of the 'welcome' banner, you can open up welcome-banner.psd and change it from there. Please make sure that everything lines up correctly (use the guides as a reference). */
		}
	#whychooseus-banner
		{
		background: url("../images/beta/whychooseus-banner.png") no-repeat;  /* If you want to change the text of the 'why choose us' banner, you can open up whychooseus-banner.psd and change it from there. Again, please make sure that everything lines up correctly (use the guides as a reference). */ 
		}
	#faq-banner
		{
		background: url("../images/beta/faq-banner.png") no-repeat;  /* If you want to change the text of the 'faq' banner, you can open up faq-banner.psd and change it from there. Again, please make sure that everything lines up correctly (use the guides as a reference). */ 
		}
	#about-us-banner
		{
		background: url("../images/beta/about-us-banner.png") no-repeat;  /* If you want to change the text of the 'about us' banner, you can open up about-us-banner.psd and change it from there. Again, please make sure that everything lines up correctly (use the guides as a reference). */ 
		}
	#buy-it-now-banner
		{
		background: url("../images/beta/buy-it-now-banner.png") no-repeat;
		}
	#feature-one, #feature-two, #feature-three, #feature-four, #feature-five, #feature-six, #feature-seven, #feature-eight, #feature-nine, #feature-ten
		{
		background: url("../images/beta/content-underline.png") bottom left repeat-x; /* It's advised that you don't edit this unless you're planning on changing the background of the entire site. The content-underline.png is designed to blend in perfectly with the current background. */
		}
	#content h3
		{
		color: #f85e3a; /* You can change the color your header three's (h3's) here */
		}
		#content h3#faq-title
			{
			color: #76b118; /* This is the color of the faq-title h3. It's different from all the others */
			}
	#content a:link, #content a:visited
		{
		color: #0b7ae1; /* This sets the color of the links within the content area */
		}
	#content a:hover, #content a:active, #content a:focus
		{
		color: #e70a29; /* This sets the color of the links within the content area when they are hovered over */
		border-bottom: 1px solid #e70a29; /* This adds a bottom border to all links in the content area so it makes clear to the user that they are infact hovering over a hyperlink. */
		}
	#content strong.filename
		{
		color: #468e00; /* From here you can change the color of the 'filename' class */ 
		}
	#content code
		{
		color: #0067d1; /* This changes the color of the 'code' within the <code> tag*/
		}
		#content code strong /* This sets the color of the text used within the <code> tag when designated <strong> */
			{
			color: #468e00;
			}
	#content p.intro
		{
		color: #3591ef; /* From here you can change the color of the intro text for the about us page */
		}
	#content .float-left, #content .float-right
		{
		background: #dfdfd7; /* Sets the color of the background of images placed within the 'float left' class */
		border: 1px solid #c6c6bf; /* This gives images placed within the 'float left' class a black border. It creates a double border effect with the help of 12px padding */
		}
	#content #buy-it-now a:link, #content #buy-it-now a:visited
		{
		background: url("../images/buy-it-now.png"); 
		}
		#content #buy-it-now a:hover, #content #buy-it-now a:active, #content #buy-it-now a:focus
			{
			background-position: left bottom;
			}
		
#footer
	{
	color: #a1a1a1; /* You can change the color of the copyright text here. */
	top: 50px;
	}
	#copyright a:link, #copyright a:visited
		{
		color: #0b7ae1; /* This changes the color of the 'Veroxium' link. You may remove the 'Fueled by Veroxium' link but we would greatly appreciate it if you left it in. Thank you. */
		}
	#copyright a:hover, #copyright a:active, #copyright a:focus
		{
		color: #e70a29; /* From here you can change the color of the rollover/hover state for the 'Veroxium' link. */
		}
	#footer-navigation li
		{
		border-right: 1px solid #a1a1a1; /* This sets the color and size for the footer navigation dividers, they're those vertical lines inbetween the links in the footer. */
		}
		#footer-navigation li a:link, #footer-navigation li a:visited
			{
			color: #a1a1a1; /* This sets the color for the links in the footer's navigation */
			}
		#footer-navigation li a:hover, #footer-navigation li a:active, #footer-navigation li a:focus
			{
			color: #0b7ae1; /* You can change the color of the rollover/hover state of the links in the footer's navigation */
			}
#menuwrapper {
	position: absolute;
	top: 200px;
	width: 150px;
	height: auto;
	left: 182px;
	background-color: #124270;
	visibility: hidden;
	z-index: 9999999999;
	overflow: visible;
}
#menuwrapper ul#links a {
	display: block;
	font-family: Candara, "Century Gothic", Arial, Helvetica, sans-serif;
	font-size: 12pt;
	font-weight: bold;
	text-transform: none;
	color: #FFF;
	padding: 3px;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #1C66B0;
	border-bottom-color: #1C66B0;
	border-left-color: #1C66B0;
}
#menuwrapper ul#links a:hover {
	display: block;
	font-family: Candara, "Century Gothic", Arial, Helvetica, sans-serif;
	font-size: 12pt;
	font-weight: bold;
	text-transform: none;
	color: #FFF;
	padding: 3px;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #2682DA;
	border-bottom-color: #2682DA;
	border-left-color: #2682DA;
	background-color: #06C;
}

/* TOOLTIP CODE */

     .tooltip a:hover {background:#73787D; text-decoration:none;} /*BG color is a must for IE6*/

      a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:35px;}


      a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;top:15px;text-align: center;}