@charset "utf-8";
/* CSS Document */

/***THIS IS FOR TOP NAVILATION*/

#main-nav{float:left; display:block; width:900px; height:40px;}

#navigation 
{
 margin:0 auto;
 list-style: none; 
 width:900px;
 padding:0;
 
}

#navigation li
{
list-style: none; 
float:left;
display:block;
}

#navigation li a
{
background-image:url(../images/nav-sprite.png);
display: block;
	outline: none;
	position: relative;
	height: 40px;
	text-decoration: none;
	width: auto;

}

#navigation .home 
	{
	background-position:0px 0px;
	width:116px;
	height:40px;
	
	}
	
	#navigation .about 
	{
	background-position:-116px 0px;
	width:164px;
	height:40px;
	}
	
	
	
	#navigation .services 
	{
	background-position:-280px 0px;
	width:107px;
	height:40px;
	}
	
	#navigation .fleet 
	{
	background-position:-387px 0px;
	width:127px;
	height:40px;
	}
	
	#navigation .rates 
	{
	background:url(../images/headings/Construction-update-link.gif);
	background-position:-4px 0px;
	width:255px;
	height:40px;
	border:0;
	}
	
	#navigation .contact 
	{
	background-position:-769px 0px;
	width:120px;
	height:40px;
	}
	
	
	
	#navigation a .hover {
	background: transparent  url(../images/nav-sprite.png) no-repeat;
	display:block ;
	opacity: 0;
	position: relative;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	
	}
	
	#navigation .home .hover {
	background-position: 0 -40px;
	
	}
	#navigation .about .hover{
	background-position: -116px -40px;
	width:164px;
	}
	#navigation .services .hover {
	background-position: -280px -40px;
	
	}
	#navigation .fleet .hover {
	background-position: -387px -40px;
	
	}
	#navigation .rates .hover {
	background:url(../images/headings/Construction-update-link.gif);
	background-position:-4px 0px;
	
	}
	
	#navigation .contact .hover {
	background-position: -769px -40px;
	}

/* ACTIVE CLASSES*/	
	
	#navigation .homeactive {
	background-position: 0 -40px;
	width:116px;
	height:40px;
	}
	
	#navigation .aboutactive
	{
	background-position:-116px -40px;
	width:164px;
	height:40px;
	}
	
	
	#navigation .servicesactive {
	background-position: -280px -40px;
	width:107px;
	height:40px;
	}
	#navigation .fleetactive {
	background-position: -387px -40px;
	width:127px;
	height:40px;
	}
	
	#navigation .ratesactive {
	background:url(../images/headings/Construction-update-link.gif);
	background-position:-4px 0px;
	width:255px;
	height:40px;
	}
	
	#navigation .contactactive {
	background-position: -769px -40px;
	width:120px;
	height:40px;
	}
/*hover*/
	#navigation .aboutactive .hover {
	background: transparent;
	display:block ;
	opacity: 0;
	position: relative;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	
	}
	
	#navigation .ratesactive .hover {
	background: transparent;
	display:block ;
	opacity: 0;
	position: relative;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	
	}
	
	#navigation .fleetactive .hover {
	background: transparent;
	display:block ;
	opacity: 0;
	position: relative;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	
	}
	
	#navigation .servicesactive .hover {
	background: transparent;
	display:block ;
	opacity: 0;
	position: relative;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	
	}
	
	#navigation .contactactive .hover {
	background: transparent;
	display:block ;
	opacity: 0;
	position: relative;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	
	}
	
	/***MAIN TAB NAVIGATION - REPLACING FLASH NAVS****/
	.tab-wrapper-div{width:900px; margin:auto;}
.main-tabs {
	list-style-type:none; padding:0; margin:0;
}
.main-tabs li {
	float:left;
	list-style-type:none;
	display:block; padding:0; margin:0;
}

#radial-1 { float:left;
	width:130px;
	height:106px;
	border-bottom-right-radius:8px; border-bottom-left-radius:8px;
	background-position: center center;
	background-repeat: no-repeat;
	/* fallback */ background-color: #114812;
	/* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ background: -webkit-gradient(radial, center center, 0, center center, 460, from(#389339), to(#114812));
	/* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(circle, #389339, #114812);
	/* Firefox 3.6+ */ background: -moz-radial-gradient(circle, #389339, #114812);
	/* IE 10 */ background: -ms-radial-gradient(circle, #389339, #114812);/* Opera couldn't do radial gradients, then at some point they started supporting the -webkit- syntax, how it kinda does but it's kinda broken (doesn't do sizing) */
	}
#radial-2 { float:left;
	width:127px;
	height:106px;
	border-bottom-right-radius:8px; border-bottom-left-radius:8px;
	background-position: center center;
	background-repeat: no-repeat;
	/* fallback */ background-color: #67660d;
	/* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ background: -webkit-gradient(radial, center center, 0, center center, 460, from(#b6b532), to(#67660d));
	/* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(circle, #b6b532, #67660d);
	/* Firefox 3.6+ */ background: -moz-radial-gradient(circle, #b6b532, #67660d);
	/* IE 10 */ background: -ms-radial-gradient(circle, #b6b532, #67660d);/* Opera couldn't do radial gradients, then at some point they started supporting the -webkit- syntax, how it kinda does but it's kinda broken (doesn't do sizing) */
	}
#radial-4 { float:left;
	width:127px;
	height:106px;
	border-bottom-right-radius:8px; border-bottom-left-radius:8px;
	background-position: center center;
	background-repeat: no-repeat;
	/* fallback */ background-color: #7a640b;
	/* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ background: -webkit-gradient(radial, center center, 0, center center, 460, from(#7a640b), to(#114812));
	/* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(circle, #c0a63d, #7a640b);
	/* Firefox 3.6+ */ background: -moz-radial-gradient(circle, #c0a63d, #7a640b);
	/* IE 10 */ background: -ms-radial-gradient(circle, #c0a63d, #7a640b);/* Opera couldn't do radial gradients, then at some point they started supporting the -webkit- syntax, how it kinda does but it's kinda broken (doesn't do sizing) */
	}
#radial-3 { float:left;
	width:127px;
	height:106px;
	border-bottom-right-radius:8px; border-bottom-left-radius:8px;
	background-position: center center;
	background-repeat: no-repeat;
	/* fallback */ background-color: #5f3707;
	/* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ background: -webkit-gradient(radial, center center, 0, center center, 460, from(#ac7f4a), to(#5f3707));
	/* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(circle, #ac7f4a, #5f3707);
	/* Firefox 3.6+ */ background: -moz-radial-gradient(circle, #ac7f4a, #5f3707);
	/* IE 10 */ background: -ms-radial-gradient(circle, #ac7f4a, #5f3707);/* Opera couldn't do radial gradients, then at some point they started supporting the -webkit- syntax, how it kinda does but it's kinda broken (doesn't do sizing) */
	}
#radial-5 { float:left;
	width:132px;
	height:106px;
	border-bottom-right-radius:8px; border-bottom-left-radius:8px;
	background-position: center center;
	background-repeat: no-repeat;
	/* fallback */ background-color: #5e1907;
	/* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ background: -webkit-gradient(radial, center center, 0, center center, 460, from(#9b4a35), to(#5e1907));
	/* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(circle, #9b4a35, #5e1907);
	/* Firefox 3.6+ */ background: -moz-radial-gradient(circle, #9b4a35, #5e1907);
	/* IE 10 */ background: -ms-radial-gradient(circle, #9b4a35, #5e1907);/* Opera couldn't do radial gradients, then at some point they started supporting the -webkit- syntax, how it kinda does but it's kinda broken (doesn't do sizing) */
	}
#radial-6 { float:left;
	width:127px;
	height:106px;
	border-bottom-right-radius:8px; border-bottom-left-radius:8px;
	background-position: center center;
	background-repeat: no-repeat;
	/* fallback */ background-color: #841602;
	/* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ background: -webkit-gradient(radial, center center, 0, center center, 460, from(#a92100), to(#841602));
	/* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(circle, #a92100, #841602);
	/* Firefox 3.6+ */ background: -moz-radial-gradient(circle, #a92100, #841602);
	/* IE 10 */ background: -ms-radial-gradient(circle, #a92100, #841602);/* Opera couldn't do radial gradients, then at some point they started supporting the -webkit- syntax, how it kinda does but it's kinda broken (doesn't do sizing) */
	}
#radial-7 { float:left;
	width:130px;
	height:106px;
	border-bottom-right-radius:8px; border-bottom-left-radius:8px;
	background-position: center center;
	background-repeat: no-repeat;
	/* fallback */ background-color: #114812;
	/* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ background: -webkit-gradient(radial, center center, 0, center center, 460, from(#389339), to(#114812));
	/* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(circle, #389339, #114812);
	/* Firefox 3.6+ */ background: -moz-radial-gradient(circle, #389339, #114812);
	/* IE 10 */ background: -ms-radial-gradient(circle, #389339, #114812);/* Opera couldn't do radial gradients, then at some point they started supporting the -webkit- syntax, how it kinda does but it's kinda broken (doesn't do sizing) */
	}
#radial-active { float:left;
	width:127px;
	height:106px;
	border-bottom-right-radius:8px; border-bottom-left-radius:8px;
	background-position: center center;
	background-repeat: no-repeat;
	/* fallback */ background-color: #000;
	
	}
	
.main-tabs li a {font-family: 'Cinzel', serif; font-size:14px;
	color:#fff;border-bottom-right-radius:8px; border-bottom-left-radius:8px;
	text-align:right; vertical-align:middle; display: table-cell; max-width:128px; width:117px; text-decoration:none; background:url(../images/tab-bg-motif-normal.png)-105px -55px no-repeat; height:106px; padding-right:10px;
	transition: all 0.5s ease;
}
.main-tabs li a:hover {background:url(../images/tab-bg-motif.png) -105px -55px no-repeat;}