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

body {
background:url(../images/backgrad.jpg) repeat-x top fixed #070606;
font-size:14px; color:#4d4d4d;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin:0px; padding:0px;
text-align:center;
}

a img { border:none; }
a { text-decoration:none; }

h1, h2 { font-size:18px; text-align:left; color:#b5492f; font-weight:100; }
h2{ font-size:16px; }

#container {
position:relative;
width:907px;
margin:0px auto;
text-align:center;
padding:20px 40px 10px 40px;
background:url(../images/ceiling.jpg) center top no-repeat fixed;
}

#containerTop { background:url(../images/container_top.png); width:827px; height:30px; margin:0px auto; }
#containerBot { background:url(../images/container_bottom.png); width:827px; height:30px; margin:0px auto; }

#content {
position:relative;
width:763px;
margin:0px auto;
padding:1px 32px 1px 32px;
background:url(../images/container_spread.png) repeat-y;
text-align:left;
}

#movie {
position:relative;
width:764px;
height:237px;
margin-top:10px;
margin-bottom:-14px;
z-index:100;
}

#clientLogin {
position:absolute;
top:20px;
left:660px;
font-size:12px;
letter-spacing:-.01em;//letter-spacing:-1px;
background:url(../images/clientLogin.gif) no-repeat right;
height:17px; 
width:135px;
padding-top:10px;
color:#d90303;
}
#clientLogin a { color:#d90303; }
#clientLogin:hover { cursor:pointer; }

#navGradient {
position:relative;
padding:0px;
background:url(../images/gemBack.jpg) repeat-y;
width:240px;
float:left;
}

#nav {
position:relative;
width:240px;
background:url(../images/navBack.jpg) no-repeat top left;
padding-top:15px;
//padding-top:25px;
color:#acacac;
font-size:18px;
margin-top:-19px; 
//margin-top:-22px;
}
#nav p { margin-left:20px; } 
#nav a { color:#000; font-size:14px; }
#nav a:hover { color:#953c27; }
#nav ul { margin-left:-35px; //margin-left:0px; }
#nav li {
margin: 8px 0px 10px 0px;
padding: 0px;
background-image: none;
list-style-type:none;
}
#nav ul li a{
margin: 0px 1em; 
padding: 0px 0px 0px 16px;
color: #000;
background:url(../images/navLiInactive.png) no-repeat left;
}
#nav ul li a:active,
body#home a#home, body#contact a#contact, 
body#advertisers a#advertisers, 
body#affiliates a#affiliates, 
body#data a#data,
body#login a#login { 
background:url(../images/navLiActive.png) no-repeat left; 
color:#953c27;
}

#nav ul li a:hover { color:#953c27; }

#text {
position:relative;
width:523px;
float:left;
margin-top:-19px; 
//margin-top:-22px;
}
#text a { color:#b5492f; text-decoration:underline; }
#text li { color:#b5492f; }

.spread { clear:both; width:700px; height:1px; }

#gems {
width:775px;
position:relative;
height:180px;
clear:both;
font-size:12px;
letter-spacing:-.045em; //letter-spacing:-1px;
text-align:center;
background:url(../images/gemBack.jpg) repeat-y left;
}

#gems a { color:#000; }
#gems a em { color:#d90000; font-style:normal; }
#gems a em:hover { text-decoration:underline; }
#gems a div { position:relative; width:236px; padding:109px 10px 0px 10px; height:71px; float:left; }

.gemAd { background:url(../images/gemAdvertisers.png); }
.gemAf { background:url(../images/gemAffiliates.png); }
.gemDm { background:url(../images/gemData.png); }

/****************************************************
	these 3 blocks change the gem background
	image for the relevant 'gem' icons at the 
	bottom for when they're hovered or are
	the active page.
****************************************************/
body#home a .gemAd:hover, 
body#contact a .gemAd:hover, 
body#advertisers a .gemAd,  
body#affiliates a .gemAd:hover, 
body#data a .gemAd:hover 
{ background:url(../images/gemAdvertisersM.png); }

body#home a .gemAf:hover, 
body#contact a .gemAf:hover, 
body#advertisers a .gemAf:hover, 
body#affiliates a .gemAf,  
body#data a .gemAf:hover 
{ background:url(../images/gemAffiliatesM.png); }

body#home a .gemDm:hover, 
body#contact a .gemDm:hover, 
body#advertisers a .gemDm:hover, 
body#affiliates a .gemDm:hover, 
body#data a .gemDm 
{ background:url(../images/gemDataM.png); }

/****************************************************
	this block is changing mouse from pointer
	to arrow if we're already on the relevant page
	and hovering over an href for the page
****************************************************/
body#home #nav a#home:hover,
body#contact #nav a#contact:hover,
body#advertisers a .gemAd:hover,
body#advertisers #nav a#advertisers:hover,
body#affiliates a .gemAf:hover,
body#affiliates #nav a#affiliates:hover,
body#data a .gemDm:hover,
body#data #nav a#data:hover
{ cursor:default; }

#footer {
font-size:10px;
color:#FFF;
text-align:right;
width:812px;
margin:0px auto;
}
#footer img { margin:0px 5px 4px 5px; }


form { font-size:12px; }
form label { float:left; width:100px; color:#232323 }

#loginBox { position:relative; width:576px; height:180px; background:url(../images/loginBack.jpg) no-repeat;}
#loginBox p { margin:5px }
#loginAffiliate { position:absolute; left:305px}
#loginMerchant { position:absolute; left:15px }
#loginMerchant h1, #loginMerchant label { color:#FFF }
#loginAffiliate h1 { color:#333 }