@import url(reset.css);


/*Layout*/
body{ background:#F2EDE9 url(../images/common/top_brown_repeat.jpg) top left repeat-x;}

	#wrapper{width:1024px; margin:0 auto; position:relative; height:auto;}
	
		#headerBox{height:135px; padding:39px 0 0 0; background:url(../images/common/top_bar.jpg) no-repeat;}
			#headerBox h1{ float:left; height:135px; width:286px; margin:0 7px 0 0; display:inline;}
			#headerBox h1 span{display:none; visibility:hidden; text-indent:-9999px;}
			
			#headerBox h2{ float:left; height:135px; width:731px; margin:0; padding:0;}
			#headerBox h2 span{display:none; visibility:hidden; text-indent:-9999px;}
			
		
		#content{ height:619px; clear:both; border-bottom:4px solid #FFF;}
			.blue {background:url(../images/color_backgrounds/body_blue.jpg) no-repeat;}
			.purple {background:url(../images/color_backgrounds/body_purple.jpg) no-repeat;}
			.red {background:url(../images/color_backgrounds/body_red.jpg) no-repeat; height:619px;}
			.green {background:url(../images/color_backgrounds/body_green.jpg) no-repeat;}
			
			#left{width:287px; height:619px; float:left;}
			
			#right{ width:737px; height:619px; float:left; position:relative;}
			
				/*Positioned absolutely so that it can be taken off from other pages without affecting layout */
				#enewsSignup{ position:absolute; top:10px; right:40px; text-align:right; z-index:100;}
				
				#mainImage{ position:relative; height:313px; width:702px; overflow:hidden; padding:45px 0 0 0;}
					/*ul#crossFade{ width:702px; height:313px;}*/
				
				#mainContent{/* Original Height, will change in scrollPane CSS height:233px;*/ width:607px;  margin:0 0 0 50px; padding-right:40px;}

.clearfix{clear:both;}
#officialJeweler{ width:253px; margin:0 0 0 0px; text-align:center;}
#addressBar{ position:relative; text-align: center; font-size:13px; line-height:normal; font-weight:bold; color:#f2ede9; margin-top:28px; padding:5px 0 0 0; /*Change in Height because of scrollpane*/}
#footerText{ float:right; /*margin:10px 0 0 0;*/ margin:-30px 0 0 0; line-height:normal;}



/*Navigation*/
ul#navigation{width:253px; float:left; display:inline; margin:42px 0 10px 34px; padding:0; list-style-type:none;}
	ul#navigation li{/*color:#f2ede9;*/ color:#FFF; font-size:16px; font-weight:normal; background: url(../images/common/nav_separator.png) no-repeat left bottom; line-height:35px; padding:0; margin:0; height:auto;}
	ul#navigation li a{/*color:#f2ede9;*/ color:#FFF; display:block; text-decoration:none; padding:0 0 0 20px; margin:0 0 0 10px; font-weight:normal; height:auto;}
	ul#navigation li.last{background:none;}
	
	/* Hack for Home Link because the height changes for IE somehow*/
	ul#navigation li#navHome a, ul#navigation li#navHome a:hover{ height:35px;}
	
	/*Hover State - Adding the Crown & Selected state for Dreamweaver Template*/
		ul#navigation li a:hover, ul#navigation li a:active, ul#navigation li a:focus,
		ul#navigation.homeSelected li#navHome a,
		ul#navigation.aboutSelected li#navAbout a,
		ul#navigation.jewelrySelected li#navJewelry a,
		ul#navigation.watchesSelected li#navWatches a,
		ul#navigation.eventsSelected li#navEvents a,
		ul#navigation.catalogSelected li#navCatalog a,
		ul#navigation.deducationSelected li#navDeducation a,
		ul#navigation.serviceSelected li#navService a,
		ul#navigation.shoponlineSelected li#navShoponline a,
		ul#navigation.pressSelected li#navPress a,
		ul#navigation.careersSelected li#navCareers a,
		ul#navigation.contactusSelected li#navContactus a{background:url(../images/common/hover_crown.png) no-repeat 0 40%; font-weight:bold;}
		
		
		/* HIDE Bridal -->Third Level Navigation */
		ul#navigation li#navJewelry ul#insideJewelry{ display:none; height:0; visibility:hidden;}
		
		/* SHOW Bridal -->Third Level Navigation */
		ul#navigation.jewelrySelected li#navJewelry ul#insideJewelry{ display:block; height:35px; margin:-10px 0 0 20px; visibility:visible; background:none;}
		
		/*Bridal Styles*/
		ul#navigation.jewelrySelected li#navJewelry ul#insideJewelry li#navBridal{height:35px; background:none; font-weight:normal;}
		ul#navigation.jewelrySelected li#navJewelry ul#insideJewelry li#navBridal a{background:none; font-weight:normal;}
		ul#navigation.jewelrySelected li#navJewelry ul#insideJewelry li#navBridal a:hover{background:url(../images/common/hover_crown.png) no-repeat 0 40%; font-weight:bold;}
		ul#navigation.bridalSelected li#navJewelry ul#insideJewelry li#navBridal a{background:url(../images/common/hover_crown.png) no-repeat 0 40%; font-weight:bold;}
		
		

/*iconBlock*/
	/* use iconBorder class for all except last,
		add iconTrans for all icons that are larger and transparent over the box
		add iconNoborder for the last icon
		These icons can be 4 small or 2 small 1 large or a combination,
		the setup is 252 254 254 252  */
ul#iconBlock{/*border-bottom:4px solid #FFF; overflow:auto;*/ list-style-type:none; }
	ul#iconBlock li{float:left; display:inline;}
	ul#iconBlock li.iconBorder{border-right:4px solid #FFF;}	
	ul#iconBlock li.iconNoborder{border:none;}
	ul#iconBlock li.iconTrans{margin:-33px 0 0 0;}
	
/*Social Networking Buttons*/
		ul#socialNetworking{clear:both;list-style:none; margin:0; /*padding:50px 0 0 5px;*/ padding:10px 0 0 0; width:524px; }
		ul#socialNetworking li{display:inline;}
		ul#socialNetworking li a {float:left; display:inline; height:0; padding:0; margin:0 5px 0 0; overflow:hidden; background:url(../images/common/networking.gif) no-repeat; position:relative; text-indent:-9999px;}
		ul#socialNetworking li.first a {margin:0;}
		ul#socialNetworking li#facebook a {width:35px; height:35px; background-position:0px 0px;}
		ul#socialNetworking li#facebook a:hover{width:35px; height:35px; background-position:0px -35px;}
		ul#socialNetworking li#twitter a {width:35px; height:35px; background-position:-35px 0px;}
		ul#socialNetworking li#twitter a:hover{width:35px; height:35px; background-position:-35px -35px;}
		ul#socialNetworking li#linkedin a {width:35px; height:35px; background-position:-70px 0px;}
		ul#socialNetworking li#linkedin a:hover{width:35px; height:35px; background-position:-70px -35px;}


/*Typography*/

	body{font-family:Arial, Helvetica, sans-serif; font-size:62.5%;}
	
	p{font-size:15px; color:#4b2201; padding:0 0 20px 0; line-height:18px;}	
		p a{color:#4b2201; display:inline; border-bottom:1px dotted #4b2201; text-decoration:none;}
		p a:hover{ color:#990000;}
		#content.red p a:hover{color:#990000;}
		#content.green p a:hover{color:#007d68;}
		#content.purple p a:hover{ color:#65065e;}
		#content.blue p a:hover{color:#006892;}
		#footerText p{ color:#4b2201; font-size:10px; line-height:normal;}
		#footerText p a{ color:#4b2201; text-decoration:none; border:none;}
		#footerText p a:hover{ text-decoration:underline; color:#000;}
			
	/*#enewsSignup #label_email{font-size:13px; color: #FFF; line-height:22px; vertical-align:baseline;}
	#enewsSignup #input_email{ margin-right:5px; color:#999;}*/
	
	h3{font-size:15px; font-weight:bold; color:#4b2201; padding:0 0 5px 0; }
	
	h4{font-size:13px; font-weight:bold; color:#4b2201; padding:0 0 3px 0; text-transform:uppercase;}
	
	
	#mainContent ul{ list-style-type:disc; margin-left:15px; padding-bottom:15px;}
	#mainContent ol{ list-style-type:decimal; margin-left:15px;}
	#mainContent ul li, #mainContent ol li{ margin:0 0 10px 0; padding:0 0 5px 0; font-size:12px; color:#4b2201; line-height:16px; }
	#mainContent ul li a, #mainContent ol li a{color:#4b2201; text-decoration:none; display:inline; border-bottom: 1px dotted #4b2201;}
	#mainContent ul li a:hover,#mainContent ol li a:hover {color:#990000;}
	#mainContent ul li p{font-size:12px; color:#4b2201; line-height:16px; margin:0; padding:0;}
		#mainContent ul#events{width:420px; list-style-type:none; margin-left:0;}
		#mainContent ul#events li{border-bottom:1px dashed #CCC;}
		#mainContent ul.press li{ margin-bottom:0;}
		#mainContent ul.gallery li{ margin:0 0 25px 0;}
		#mainContent ul#designerList{ margin:0; padding:0; list-style-type:none;}
		#mainContent ul#designerList li {height:100px; width:168px; float:left; display:inline; background:none; /*margin:0 37px 15px 0 no margins in use right now due to size of designer logo;*/ margin:0; padding:0;}
		#mainContent ul#designerList li a{text-decoration:none; border:none;}
		#mainContent ul#designerList li.lastList{/*margin:0 0 15px 0;no margins in use right now due to size of designer logo*/ margin:0;  padding-right:0;} /*every third item has to zero the right margin to fit*/
	
	.lastLine{ margin-bottom:0; padding-bottom:0;}
	
.hide{display:none;}
	

/* SCROLL STYLE .. This will overwrite mainContent properties listed above in Layout */

a.jScrollArrowUp {	background: url(../images/common/basic_arrow_up.gif) no-repeat 0 0; margin:180px 0 0 0;}
a.jScrollArrowUp:hover {	background-position: 0 -15px;}
a.jScrollArrowDown {	background: url(../images/common/basic_arrow_down.gif) no-repeat 0 0;}
a.jScrollArrowDown:hover {	background-position: 0 -15px;}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {	background-position: 0 -30px;}


/*Use padding to position the pointers*/
#mainContent {height: 205px; padding:0 60px 0 0; }

.jScrollPaneContainer {	position: relative;	overflow: hidden; z-index: 1;}/*DO NOT DELETE*/


a.jScrollArrowUp {	display: block;	position: absolute;	z-index: 1;	top: 0;	right: 0;	text-indent: -2000px;	overflow: hidden; height: 11px;}
a.jScrollArrowDown {	display: block;	position: absolute;	z-index: 1;	bottom: 0;	right: 0;	text-indent: -2000px;	overflow: hidden; height: 11px;}


/*eNewsSignup*/

#enewsSignup p, #enewsSignup p a { color:#FFF; border-bottom-color:#FFF;}
#enewsSignup p a:hover{color:#000; border-bottom:none;}
#content #right #enewsSignup p a:hover{ color:#FFF;}


/*Countdown*/
#defaultCountdown{ width:480px; padding:0 0 0 30px; height:156px; background:url(../images/footerads/countdown.jpg) no-repeat; color:#FFF; font-family: 'Arimo', arial, serif;  font-weight:bold; line-height:180px; font-size:36px; letter-spacing:-0.5px; text-transform:uppercase;}

/*eventsGallery*/

ul#eventsGallery li{ width:150px; height:95px; display:block; float:left; margin:0 30px 20px 0; padding:0;}

ul#eventsGallery li img{ width:150px; height:95px; border:2px solid #666;}

ul#eventsGallery li img:hover{ border:2px solid #000;}