/*

	Table Of Contents:
	01. Universal
	02. Header + Nav
	03. Home
	04. Press

*/


/***************************
	01. Universal
***************************/

body {
	text-align: center;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-size: 62.5%;
	background: #fff;
	color: #000;
	background: #fff url('/_images/background.jpg') no-repeat fixed bottom right;
}

#mailing_list img {
	margin: 195px 0 0 0;
	bottom: 0;
}

#wrapper {
	width: 800px;
	min-height: 512px;
	margin: 30px 0 0 196px;
	float: left;
	position: absolute;
}

h2 {
	font-size: 1.6em;
	letter-spacing: 0.3em;
	text-align: left;
	text-transform: uppercase;
}

#zoom {z-index: 50;}

#wrapper a:link, #wrapper a:visited {
	text-decoration: none;
	color: #4B4B4B;
	background: #F1F1F1;
}

#wrapper a:hover {
	text-decoration: none;
	color: #fff;
	background: #B7B7B7;
}

/***************************
	02. Header + Nav
***************************/

#header {
	height: 95px;
	width: 100%;
}


#logo {
	float: left;
	margin: 27px 0 0 34px;
	height: 71px;
	width: 202px;
	display: block;
	text-indent: -9999px;
	background-image: url('/_images/cleobella_logo.png');
	z-index: 3;
}

#globe {
	height: 39px;
	width: 39px;
	right: 0;
	position: fixed;
	margin: 54px 34px 0 0;
}

#social_links {
	height: 39px;
	width: 110px;
	right: 0;
	position: fixed;
	margin: 54px 34px 0 0;
	bottom: 0;
}

#social_links div {
	float: left;
	margin: 0 5px;
}

#social_links #twitter a {
	width: 24px;
	height: 24px;
	background-image: url('/_images/social_twitter.png');
	display: block;
	text-indent: -999999px;
}

	#social_links #twitter a:hover {
		width: 24px;
		height: 24px;
		background-image: url('/_images/social_twitter.png') no-repeat 0 -44px;
		display: block;
		text-indent: -999999px;
	}


#social_links #facebook a {
	width: 24px;
	height: 24px;
	background-image: url('/_images/social_facebook.png');
	display: block;
	text-indent: -999999px;
}

	#social_links #facebook a:hover {
		width: 24px;
		height: 24px;
		background-image: url('/_images/social_facebook.png') 0 -24px;
		display: block;
		text-indent: -999999px;
	}

#social_links #myspace a {
	width: 24px;
	height: 24px;
	background-image: url('/_images/social_myspace.png');
	display: block;
	text-indent: -999999px;
}

/* Start Nav */

/*** ESSENTIAL STYLES ***/

#nav {z-index: 2; position: absolute;}

.sf-menu, .sf-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
.sf-menu {
	line-height:	1.0;
}
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	width:			111px; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
	width: 100%;
}
.sf-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
	float:			left;
	position:		relative;
}

.sf-menu li ul li {
	float:			left;
	margin: 0;
	position:		relative;
}
.sf-menu a {
	display:		block;
	position:		relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			0;
	top:			111px; /* match top ul list item height */
	z-index:		199;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:			-999em;
	
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:			111px; /* match ul width */
	top:			0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:			111px; /* match ul width */
	top:			0;
}

/*** DEMO SKIN ***/

#nav ul.sf-menu {
	margin: 33px 0 0 38px;
	height: 204px; 
	width: 111px;
	background: url('/_images/cleobella_nav.png') no-repeat ; 
}

.sf-menu {
	float: left;
}
.sf-menu a {
	padding: 0;
	text-decoration:none;
	height: 22px;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#13a;
}
.sf-menu li {
	height: 23px;
	margin: 0 0 7px 0;
	text-indent: -999999em;
}

.sf-menu li li {
	text-indent: 0;
}

.sf-menu li#nav_collection ul {margin: -1px 0 0 -5px;}
.sf-menu li#nav_press ul {margin: 1px 0 0 -54px;}

.sf-menu li#nav_cleo-world ul li a, .sf-menu li#nav_collection ul li a, .sf-menu li#nav_press ul li a, .sf-menu li#nav_press ul li a {
	color: #000; 
	background-image: none;
	font-size: 1.1em;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	text-align: left;
	letter-spacing: 1px;
	}
	
.sf-menu li#nav_cleo-world ul li a:hover, .sf-menu li#nav_collection ul li a:hover,
.sf-menu li#nav_press ul li a:hover, .sf-menu li#nav_press ul li a:hover
{text-decoration: underline; color: #333;}

.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	background:		0;
	outline:		0;
	
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
	background:	url('/_images/shadow.png') no-repeat bottom right;
	padding: 0 8px 9px 0;

}
.sf-shadow ul.sf-shadow-off {
	background: transparent;
}

#nav_collection a:hover {height: 23px; background: url('/_images/cleobella_nav.png') no-repeat -113px 0;}
#nav_shop a:hover {height: 23px; background: url('/_images/cleobella_nav.png') no-repeat -113px -30px;}
#nav_cleo-world a:hover {height: 24px; background: url('/_images/cleobella_nav.png') no-repeat -113px -60px;}
#nav_blog a:hover {height: 24px; background: url('/_images/cleobella_nav.png') no-repeat -113px -90px;}
#nav_press a:hover {height: 24px; background: url('/_images/cleobella_nav.png') no-repeat -113px -120px;}
#nav_stores a:hover {height: 24px; background: url('/_images/cleobella_nav.png') no-repeat -113px -150px;}
#nav_contact a:hover {height: 24px; background: url('/_images/cleobella_nav.png') no-repeat -113px -180px;}

/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
.sf-vertical, .sf-vertical li {
	width:	111px;
}
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.sf-vertical li:hover ul,
.sf-vertical li.sfHover ul {
	left:	111px; /* match ul width */
	top:	1px;
	padding: 15px;
	background: #e7e7e7;
}

/*** alter arrow directions ***/
.sf-vertical .sf-sub-indicator { background-position: -10px 0; } /* IE6 gets solid image only */
.sf-vertical a > .sf-sub-indicator { background-position: 0 0; } /* use translucent arrow for modern browsers*/

/* hover arrow direction for modern browsers*/
.sf-vertical a:focus > .sf-sub-indicator,
.sf-vertical a:hover > .sf-sub-indicator,
.sf-vertical a:active > .sf-sub-indicator,
.sf-vertical li:hover > a > .sf-sub-indicator,
.sf-vertical li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}
/* End Nav */

/***************************
	03. Home
***************************/

#home_gallery {
	width: 770px;
	height: 512px;
	display: block;
	margin: 0 10px 0 0;
	padding: 13px;
	background: #fff url('/_images/home_main_background.jpg');
}

#home_gallery_video {
	width: 770px;
	height: 434px;
	display: block;
	margin: 0 10px 0 0;
	padding: 13px;
	background: #fff url('/_images/home_video_background.jpg');
}

/***************************
	0. Collection
***************************/

.jcarousel-container {
    background: none;
    border: none;
	margin: -17px 0 0 0;
}

.jcarousel-container-horizontal {
    width: 750px;
    padding: 20px 40px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  750px;
    height: 535px;
}

.jcarousel-skin-tango .jcarousel-item {
    width: 750px;
    height: 535px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin:0;;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
 *  Horizontal Buttons
 */
.jcarousel-next-horizontal {
    position: absolute;
    top: 250px;
    right: 13px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    background: transparent url(/_images/collection_arrow_right.png) no-repeat 0 0;
}

.jcarousel-next-horizontal:hover {
    background-position: -36px 0;
}

.jcarousel-next-horizontal:active {
    background-position: -72px 0;
}

.jcarousel-next-disabled-horizontal,
.jcarousel-next-disabled-horizontal:hover,
.jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -108px 0;
}

.jcarousel-prev-horizontal {
    position: absolute;
    top: 250px;
    left: 13px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    background: transparent url(/_images/collection_arrow_left.png) no-repeat 0 0;
}

.jcarousel-prev-horizontal:hover {
    background-position: -36px 0;
}

.jcarousel-prev-horizontal:active {
    background-position: -72px 0;
}

.jcarousel-prev-disabled-horizontal,
.jcarousel-prev-disabled-horizontal:hover,
.jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -108px 0;
}







/***** Bellas ******/

.travel_wrap {margin: 0 0 45px 0; width: 930px; display: inline-block;}
.travel_wrap ul li {float: left; margin: 0 5px 10px 0;}
#wrapper li.bellas a {padding: 0 0 1px 0; border-bottom: 1px solid #000;}
.travel_wrap h2 {margin: 0 0 15px 0;}
#wrapper li.bellas a img {padding: 0; border: 0;}

.travel_image {float: left;}
.travel_text {float: left; text-align: left; width: 37%; margin: 15px 0 0 16px;}
.travel_pop {width: 630px;}
.travel_title {margin: 0 0 14px 0; font-size: 1.0em;
letter-spacing: 0.2em;
font-weight: bold;
text-transform: uppercase;
display: inline-block;}

.bella {margin: 0 0 45px 0; width: 800px; display: inline-block;}

.bella h2 {margin: 0 0 15px 0;}

.bella ul li {float: left; margin: 0 5px 10px 0;}

.bella ul li a, .bella ul li a:hover {padding: 0; border: 0;}

.bellas_store_link {margin: 12px 0 6px; font-size: 1.0em; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em;
}

.bellas_store_link a {color: #000;}
.bellas_store_link a:hover {color: #585858;}
/**** Storeis ****/

#stories_intro {width: 500px; text-align: justify;}

.stories_entry {float: left; margin: 20px 0 0; border-top: 2px solid #000; padding: 24px 0;}
.stories_entry img {float: left;}
.stories_info {width: 670px;}
.stories_info h2 {font-size: 1.1em;}

.contact_col {width: 266px; text-align: left; float: left; margin: -20px 0 0 0;}
#contact_col_one {margin: 25px 0 0 0;}
#contact_col_three {padding: 0 0 0 50px; width: 210px; margin: -20px 0 0 0;}


/**** Docs ****/

ul#docs_sections {text-align: left; margin: 30px 0 0 0;}
ul#docs_sections li {font-size: 1.1em;	margin: 30px 0; text-transform: uppercase; color: #999;}

ul#docs_sections li ul#questions li {
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

.question {
	margin: 0 0 20px 30px;
	font-size: 1.3em;
}

.question a {
	text-decoration: none;
	background-color: none;
	padding: 0;
}

/***************************
	0. Press
***************************/

.press_cover {
	width: 186px;
	height: 235px;
	padding: 2px;
	display: block;
	float: left;
	text-align: left;
}

body#press #wrapper a:link, body#press #wrapper a:hover {
	text-decoration: none;
	padding: 0;
	background: #fff;
	border-bottom: none; 
}

/***************************
	0. Store
***************************/

#store_welcome {
	margin: 20px 0;
}

.product {
	width: 200px;
	height: 250px;
	background: #fff;
	margin: 20px 33px 15px;
	float: left;
	padding: 0 0 15px 0;
}

.product_name, .product_price {
	margin: 10px 0 0 0;
	font-size: 1.0em;
	letter-spacing: 0.2em;
	font-weight: bold;
	text-transform: uppercase;
	display: inline-block;
}

#nav_shopping_menu {
	width: 100px;
	background: #e7e7e7;
	padding: 5px;
	display: block;
	margin: 255px 0 0 35px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	z-index: 10000;
	position: absolute;
}

ul#nav_shopping {
	font-size: 1.1em;
	font-weight: bold;
	margin: 10px 4px 0;
	text-align: left;
}

ul#nav_shopping li {
	margin: 0 0 10px 0;
	padding: 0 0 10px 0;
	border-bottom: 1px dotted #999;
}

ul#nav_shopping li:last-child {
	border: 0;
	padding: 0;
}

#product_image {
	float: left;
	width: 375px;
	display: block;
}

#product_details {
	float: right;
	width: 330px;
	margin: 0 80px 0 0;
	
}

#product_details p {
	line-height: 1.5em;
	text-align: left;
	margin: 8px 0;
}

#product_details h2 {
	margin: 0 0 20px 0;
}

ul#product_pictures_alt {
	float: left;
	display: block;
	width: 330px;
	margin: 0 0 40px 0;
	border: 0;
}

ul#product_pictures_alt li {
	float: left;
	margin: 2px;
	padding: 1px;
	border: 0;
} 

ul#product_pictures_alt li a:link, ul#product_pictures_alt li a:visited, ul#product_pictures_alt li a:hover {
	background: none;
	border: 0;
}

#shop_add_to_cart {
	display: block;
	margin: 20px 0 0 0;
	text-align: left;
}

#shop_add_to_cart a , #shop_add_to_cart a:link, #shop_add_to_cart a:visited {
	margin: 40px 0 0 0;
	font-size: 1.2em;
	border: 0;
	text-decoration: none;;
	padding: 10px;
	display: block;;
	width: 100px;
	text-align: center;
	background: #808080;
	color: #fff;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
}

#shop_add_to_cart a:hover {
	background: #e9e9e9;
	color: #000;
}


#product_image_color {
	display: block;
	padding: 4px 6px;
	font-size: 1.1em;
	text-transform: lowercase;
}

#product_image_color p {
	display: inline;
}

#product_price {
	width: 200px;
	display: block;
	margin: 50px 0 0 0;
	text-align: left;
	font-size: 1.1em;
	font-weight: bold;
}

#wrapper .product a {
	margin: 0;
	padding: 0;
	border: 0;
	color: #000;
	background: none;
}

#wrapper .product a:link; #wrapper .product a:visited; {
	color: #000;
	background: none;
	text-decoration: none;
}

#wrapper .product a:hover {
	background: none;
	border-bottom: 1px solid #999;
}

ul#nav_shopping li a {color: #3C3C3C; text-decoration: none;}

ul#nav_shopping li a:hover {
	color: #000;
}

body#shop_info #wrapper p {
	text-align: justify;
	font-size: 1.1em;
	margin: 15px 0;
	line-height: 1.2em;
}

body#shop_info #wrapper h2 {
	font-size: 1.4em;
	margin: 0 0 15px 0;
} 

/**** New Store Edits ****/

.shop_celeb {
	width: 198px;
	float: left;
	margin-left: 2px;
}

.store_celeb_item {
	margin: 10px 0;
	font-size: 1.3em;
	text-transform: uppercase;
}

#shop_home_bottom {
	float: left;
	width: 100%;
	margin: 28px 0 20px 0;
	border-top: 2px solid #D8D8D8;
}

#shop_news {
	float: left;
	width: 260px;
	text-align: left;
}

#shop_new_product {
	text-align: center;
}

#shop_new_product .product {

	margin: 20px 0px 15px;
	float: left;
	padding: 0 0 5px 0;
}



#shop_news h2, #shop_new_product h2 {
	margin: 40px 0 30px;
}

#shop_news p {
	font-size: 1.2em;
	line-height: 1.6em;
}

p#thanks {margin: 20px 0 0 0;}

#product_name {font-size: 1.0em;}
/***************************
	0. Cleoworld
***************************/

body#about_page img {float: left; clear: ; margin: 15px 0 0 0;}
#about_bio p {float: right; text-align: left; line-height: 1.5em; width: 485px; margin: 15px 0 0 0;}

body#cleoworld p {
	line-height: 1.5em;
	text-align: left;
	margin: 15px 0;
}

#our_name_photo {
	float: left;
	margin: 15px 0 0 0;
}

#our_name_bio {
	float: left;
	width: 360px;
	margin: 0 0 0 15px;
}

#our_name_sig {
	width: 300px;
	height: 116px;
	display: block;
	text-align: left;
	text-indent: -99999px;
	background-image: url('/_images/cleoworld_our_name_signature.png');
	
}

#hc_content {
	float: left;
	font-size: 1.1em;
	width: 460px;
	margin: 20px 0 0 65px;
}

ul#hc_images {
	float: left;
	margin: 30px 0 0 0;
	width: 800px;
	height: 50px;
}

ul#hc_images li {
	float: left;
	margin-left: 3px;
	margin-bottom: 3px;
}

#care {
	float: left;
	width: 460px;
	margin: 0 0 0 15px;
	font-size: 1.2em;
	line-height: 1.4em;
}

/***************************
	0. Blog
***************************/

body#blog p {
	line-height: 1.5em;
	text-align: left;
	margin: 15px 0;
}

.post {
	width: 550px;
	margin: 0 0 20px 0;
	border-bottom: 1px solid #999;
}

.post img {margin: 20px 0 0 0;}

/***************************
	0. Stores
***************************/

body#stores ul#store_list {
	float: left;
}

body#stores ul#store_list li{
	float: left;
	text-align: left;
	width: 170px;
	margin: 0 0 50px 15px;
	height: 40px;
}

.stores_name {
	font-size: 1.2em;
	font-weight: bold;
	margin: 0 0 2px 0;
}

.stores_address {
	font-size: 1.1em;
}

.stores_address p {
	margin: 0 0 2px 0;
}

.stores_phone p {
	padding: 2px 0 0 0;
	font-style: italic;
}

/***************************
	0. Contact
***************************/

#contact_form {
	float: left;
	width: 400px;
}


#contact_details {
	width: 250px;
	float: left;
	text-align: left;
}

#contact_details p {
	line-height: 1.8em;
	font-size: 1.2em;
	font-weight: bold;
}

#contact_details p.info {
	padding: 45px 0 0 0;
} 

/*** Mailing List ***/

#mailing_list {
	width: 200px;
	height: 264px;
	bottom: 0;
	left: 0;
	position: fixed;
	background: transparent url('/_images/mailing_list_background.png') repeat-y fixed bottom left;
}

span.label,span.spacer,span.multiple span {width:50px;float:left;} 
span.multiple {float:left;} 
input#submit { margin: 11px 0 0 0;} 
#mail_list_input {margin: 180px 0 0 0; bottom: 0; display: inline-block; position: relative;}
#join_mailing_list {font-size: 1.3em; text-transform: uppercase; letter-spacing: 0.3em; margin: 0 0 3px 0;}

#product_image {position: relative;}

div.jqZoomTitle
{
	z-index:5000;
	text-align:center;
	font-size:11px;
	font-family:Tahoma;
	height:16px;
	padding-top:2px;
	position:absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	color: #FFF;
	background: #999;

}

.jqZoomPup { 											/* this is square that hovers over the image */
		overflow:hidden;
		background-color: #FFF;
		-moz-opacity:0.6;
		opacity: 0.6;
		filter: alpha(opacity = 60);
		z-index:10;
		border-color:#c4c4c4;
		border-style: solid;
		cursor:crosshair;
}

.jqZoomPup img {border: 0px;}

.preload{
	-moz-opacity:0.8;
	opacity: 0.8;
   filter: alpha(opacity = 80);
	color: #333;
	font-size: 12px;
	font-family: Tahoma;
   text-decoration: none;
	border: 1px solid #CCC;
   background-color: white;
   padding: 8px;
	text-align:center;
   background-image: url(/_images/zoomloader.gif);
   background-repeat: no-repeat;
   background-position: 43px 30px;
	width:90px;
	* width:100px;
	height:43px;
	*height:55px;
	z-index:10;
	position:absolute;
	top:3px;
	left:3px;

}

.jqZoomWindow {
	border: 1px solid #999;
	background-color: #FFF;
}

.galleria #bellas {width:900px; margin: 0 auto}


.galleria {width:800px; height: 20px; margin: 0 auto}
.galleria-container{height:608px;position:relative;overflow:hidden;background:#000;}

/*


   Magic Zoom v3.1.18 
   Copyright 2010 Magic Toolbox
   You must buy a license to use this tool.
   Go to www.magictoolbox.com/magiczoom/


*/

.MagicZoom img {
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
}

/* Style of zoomed window */
.MagicZoomBigImageCont {
border: 1px solid #999;
}

/* Style of header, activated with "title" attribute in <a> tag */
.MagicZoomHeader {
font-size: 8pt !important;
line-height: normal !important;
color: #fff;
background: #666;
text-align: center !important;
}

/* Style of small square under mouse */
.MagicZoomPup {
border: 1px solid #aaa;
background: #fff;
cursor: move;
}

/* Style of message box while image is loading */
.MagicZoomLoading {
border: 1px solid #ccc;
background: #fff url(img/ajax-loader.gif) no-repeat 2px 50%;
padding: 4px 4px 4px 24px !important;
margin: 0;
text-decoration: none;
text-align: left;
font-size: 8pt;
font-family: sans-serif;
color: #444;
}


#video_wrapper {
	margin: 50px auto 0;
	width: 760px;
}

#video_wrapper #logo {margin: 0;}
#video_wrapper #globe {margin: 23px 0 0 0; float: right; position: static;}
#video_wrapper #video {width: 760px; height: 430px; position: absolute; margin: 100px 0 0 0;}
#video_wrapper #enter {width: 760px; margin: 470px auto 0; display: inline-block;}
#video_wrapper #enter a {text-align: center; font-size: 1.3em; text-transform: uppercase; letter-spacing: 0.6em; text-decoration: none; color: #000; font-weight: bold;}
#video_wrapper #enter a:hover {color: #5F5F5F;}