/*
|=================================================================|
|							          |	
| 		COSMOPOLITANBLACK			          |
|							          |	
|=================================================================|
|							          |
| Theme Name: COSMOPOLITANBLACK				          |
| Theme URL: http://seriradesigns.com          			  |
| Author: KatGirl 						  |
| Author URL: http://seriradesigns.com		      		  |
| Version: 1.0							  |
| Creation Date: 22nd November 2008			          |
| Copyright: International and domestic Copyright Laws apply      |
| 								  |
|=================================================================|
|								  |
|			LICENCE TYPE 			  	  |
|=================================================================|
| 								  |
| COSMOPOLITANBLACK is NOT General Public License (GPL) nor is it |
| Open Source Software and limitations Do apply.		  |
|								  |
| You cannot copy, steal, duplicate, sell, modify, claim this 	  |
| theme as your own work, publically display this theme in or     | 
| through any medium unless explicitly authorised by 		  |
| Serira Designs.com	  					  |		
|								  |
|=================================================================|
*/


body {
	margin: 0 0 20px 0;
	padding: 0;
	font: normal 13px/18px "Lucida Sans", Arial, Helvetica, Verdana, sans-serif;
	color: #666666;
	background-color: #FFFFFF;
	text-align: center;
	}

a:link, a:visited {color: #000000; text-decoration: none;}
a:active, a:focus, a:hover {color: #999999; outline:none;}

#TopHeader {
	background-image:url(../styleImages/header/headerRepeat.jpg);
	background-repeat: repeat-x;
	background-position: top left;
	height: 318px;
	text-align: center;
	}
	

#Header {
	background-image:url(../styleImages/header/header.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	width: 980px;
	height: 318px;
	margin: 0 auto;
	text-align: center;
	}
	

/**TOP NAVIGATIONAL LINKS
**************************/
#topLinks {
	float: right;
	position: relative;
	z-index: 1;
	width: 220px;
	height: 200px;
	margin: 18px 20px 0 0;
	}

#topLinks a.HomeLink, #topLinks a.ContactLink,
#topLinks a.LoginLink, #topLinks a.CheckoutLink {
	background-repeat: no-repeat;
	background-position: top center;
	float:left;
	position: relative;
	width: 100px;
	height: 100px;
	display: inline;
	text-indent: 0;
	}

#topLinks a.HomeLink { background-image:url(../styleImages/topLinks/homeOn.jpg); margin: 0 20px 12px 0;}
#topLinks a.ContactLink { background-image:url(../styleImages/topLinks/contactOn.jpg); margin: 0 0 14px 0;}
#topLinks a.LoginLink { background-image:url(../styleImages/topLinks/logonOn.jpg); margin: 0 20px 0 0;}
#topLinks a.CheckoutLink { background-image:url(../styleImages/topLinks/checkoutOn.jpg); margin: 0;}
#topLinks a.HomeLink:hover { background-image:url(../styleImages/topLinks/homeOff.jpg);}
#topLinks a.ContactLink:hover { background-image:url(../styleImages/topLinks/contactOff.jpg);}
#topLinks a.LoginLink:hover { background-image:url(../styleImages/topLinks/logonOff.jpg);}
#topLinks a.CheckoutLink:hover { background-image:url(../styleImages/topLinks/checkoutOff.jpg);}
#topLinks a.HomeLink span, #topLinks a.ContactLink span, #topLinks a.LoginLink span, #topLinks a.CheckoutLink span {
	display: inline;
	margin: 0 auto;
	text-align: center;
	visibility: hidden;
	color: white;
	}

#Logo {
	width: 221px;
	height: 154px;
	float: left;
	display: inline;
	margin: 20px 10px 10px;
	position: relative;
	z-index: 2;
	}

/**TOP BOXES
**************/
#TopDocs {float: left; display: inline; width: 980px; height: 35px;margin: 4px auto 0;text-align: center;color: #FFFFFF; background-color: #000000;}
#TopDocs a#About, #TopDocs a#Color, #TopDocs a#Delivery, #TopDocs a#Designs,
#TopDocs a#About:visited, #TopDocs a#Color:visited, #TopDocs a#Delivery:visited,#TopDocs a#Designs:visited, 
#TopDocs a#About:hover, #TopDocs a#Color:hover, #TopDocs a#Delivery:hover,#TopDocs a#Designs:hover,
#TopDocs a#About:active, #TopDocs a#Color:active, #TopDocs a#Delivery:active,#TopDocs a#Designs:active {height: 35px; float: left; display: block; margin: 0 30px; padding: 0;}
#TopDocs a#About {width: 194px;}
#TopDocs a#Color {width: 117px;}
#TopDocs a#Delivery {width: 184px;}
#TopDocs a#Designs {width: 219px;}
#TopDocs a#About{background: #000000 URL(../styleImages/topSiteDocs/AboutHover.gif) no-repeat top left;}
#TopDocs a#Color{background: #000000 URL(../styleImages/topSiteDocs/ColorChartHover.gif) no-repeat top left;}
#TopDocs a#Delivery{background: #000000 URL(../styleImages/topSiteDocs/DeliveryHover.gif) no-repeat top left;}
#TopDocs a#Designs{background: #000000 URL(../styleImages/topSiteDocs/DesignsHover.gif) no-repeat top left;}
#TopDocs a#About:hover {background: #000000 URL(../styleImages/topSiteDocs/About.gif) no-repeat top left;}
#TopDocs a#Color:hover {background: #000000 URL(../styleImages/topSiteDocs/ColorChart.gif) no-repeat top left;}
#TopDocs a#Delivery:hover {background: #000000 URL(../styleImages/topSiteDocs/Delivery.gif) no-repeat top left;}
#TopDocs a#Designs:hover {background: #000000 URL(../styleImages/topSiteDocs/Designs.gif) no-repeat top left;}
#TopDocs a#About span, #TopDocs a#Color span, #TopDocs a#Delivery span, #TopDocs a#Designs span,
#TopDocs a#About:hover span, #TopDocs a#Color:hover span, #TopDocs a#Delivery:hover span, #TopDocs a#Designs:hover span{
	color: #FFFFFF; 
	background-color: #000000;
	font-size: 16px;
	line-height: 36px;
	margin: 0 0 0 15px;
	padding: 0;
	float: left;
	display: inline;
	visibility: hidden
	}

#TopDocs a#About:hover span, #TopDocs a#Color:hover span, #TopDocs a#Delivery:hover span, #TopDocs a#Designs:hover span {color: #95cff0; background: #000000;text-decoration: none;visibility: hidden;}

/**TOP BOXES
****************/
#topLeft {
	float: left;	
	display: inline; 
	width: 730px; 
	height: 75px; 
	margin: -18px 0 0 0; 
	position: relative;
	}

.TopBoxTitle h3 {margin: 0;}

/**CURRENCY AND LANGUAGE BOX
*****************************/
#CurrencyBox, #LanguageBox {
	width: 150px; 
	float: left; 
	display: inline; 
	margin: 0 0 0 15px;
	}

.Currency_DropDown, .Language_DropDown {
	font-size: 13px; 
	width: 145px; 
	border: 1px inset #CCCCCC; 
	margin-top: 5px; 
	text-transform: lowercase;
	color: #666666;
	}
	
/**SHOPPING BASKET
********************/
#ShoppingBox {
	background-repeat: no-repeat;
	background-position: top left;
	display: inline; 
	float: right; 
	margin: 0; 
	width: 210px; 
	height: 75px;
	}

.BasketTotal {
	text-align: left;	
	float: left;
	display: inline; 
	position: relative; 
	width: 150px;	
	margin: 45px 0 0 60px;	
	font-size: 16px;
	text-align: left;
	}

.BasketTotal a {color: #999999; background-color: #FFFFFF; text-decoration: none;}
.BasketTotal a:hover {color: #000000; background-color: #FFFFFF;}

/**SEARCH BOX
**************/
#SearchBox {
	width: 175px;
	margin: 0;
	padding: 0;
	float: left;
	display: inline;
	}
	
#SearchBox p {
	height: 31px; 
	margin: -5px 0 0 0;
	padding: 0;
	line-height: 0;
	}

.searchBox {
	color: #666666; 
	background-color: #FFFFFF; 
	border: 1px inset #DDDDDD; 
	margin: 7px 5px 0 0; 
	float: left; 
	display: inline;
	width: 125px; 
	font-size: 14px;
	}
	
.searchBtn {
	background:url(../styleImages/buttons/searchBtn.gif);
	background-repeat: no-repeat;
	background-position: right center;
	width: 39px;
	height: 31px;
	border: none;
	text-align: right;
	display: block;
	cursor: pointer;
	background-color: #000000;
	margin: 0; 
	float: left;
	}




/**MAIN CONTENT 
****************/
#pageSurround {
	width: 980px;
	margin: 0 auto;
	padding: 0;
	background: #FFFFFF url(../styleImages/backgrounds/pageRepeat.gif) repeat-y left top;	
	text-align:left;
	}

#LeftColumn {width: 180px; float:left; display: block;margin-top: 0; margin-right: 7px; position: relative; z-index: 50;}
#MainContent {width: 760px; float: left; position: relative;display: block;padding: 0 0 0 20px;}
.boxContent {margin-bottom: 15px;}

/**MAILING LIST BOX
**********************/
#MailingListBox {width: 780px; height: 40px; margin-left: 185px; border-top: 1px solid #DDDDDD;	padding-top: 15px; padding-bottom: 10px;margin-bottom: 20px;}
.MLBLeft {float: left; width: 440px; margin-left: 15px;}
.MLTitle {}
.MLBLeft p {font-size: 13px; margin: -3px 0 0 5px;}
.MLBRight {float: left; width: 300px; margin-top: 15px;}
.MLBRight .textbox {width: 180px;}
.MLBRight p {margin: 0 0 0 25px; text-transform: lowercase; text-align: left; font-size: 12px;}



/**SIDEBOXES
**************/
.SideBox {margin-bottom: 30px; text-transform: lowercase;}
.SideBoxTitle {font-size: 14px;width: 180px;border-bottom: 1px solid #CCCCCC;}
.SideBoxTitle h3 {margin: 0;}
.SideBox p {font-size: 13px;}
.SideBox p strong {font-weight: normal; color: #000000; margin-left: 8px;}
.SideBox ol, .SideBox ul {margin-top: 8px; width: 178px;}
.SideBox ol li {list-style-position: outside; margin: 8px 5px 8px 25px; color: #999999;}
.SideBox ol li.numBorder {color: #999999;}
.SideBox ol li.numBorder span {color: #999999;}
.SideBox ul li {list-style-type: square; margin: 5px 0 0 17px; color: #999999;}
.SideBox .featuredBox, .SideBox .featuredName {text-align: center;}
.SideBox .featuredBox {margin: 10px auto;}
.SideBox .featuredBox img {border: 1px solid #333333;}

/**HOME PAGE
*************/
.HomePage {position: relative; margin-bottom: 50px; }


/**PRODUCT DISPLAY
******************/
.ProdPageTop, .ProdPageBottom {
	background-repeat: no-repeat;
	background-position: top left;
	width: 760px;
	height: 30px;
	}

.ProdPageTop { background-image:url(../styleImages/backgrounds/ProdBoxTop.gif);}
.ProdPageBottom { background-image:url(../styleImages/backgrounds/ProdBoxBottom.gif);}
.ProdPageRepeat {
	background-image:url(../styleImages/backgrounds/ProdBoxRepeat.gif);
	background-repeat: repeat-y;
	background-position: top left;
	width: 760px;
	}

.spacing {display: none;}
.ProdBox {
	float: left;
	width: 335px;
	height: 200px;
	margin: 2px 0 10px 30px;
	display: inline;
	font-size: 12px;
	border: 1px solid white;
	}
	
.ProdImage {
	float: left;
	display: inline;
	margin: 0 10px 0 0;
	width: 150px;
	height: 150px;
	text-align: center;
	margin-bottom: 15px;
	}

.ProdImage img {float: left; display: inline; margin: 0; border: 1px solid #666666;}
.ProdInfo1 {float: left;display: inline;width: 170px;height: 150px;margin-bottom: 5px;}
.ProdName {margin-bottom: 15px; font-size: 14px;}
.ProdName a {color: #000000; background: #FFFFFF;}
.ProdName a:hover {color: #999999; background: #FFFFFF;}
.ProdText {color: #444444; font-size: 11px; line-height: 14px;}
.ProdStock {margin-top: 10px;}
.ProdInfo2 {
	display: inline;
	float: left;
	padding: 0;
	width: 331px
	height: 20px;
	padding: 5px 2px 2px 2px;
	background:  #DDDDDD;
	color: #000000;
	}

.ProdPrice {
	float: left; 
	display: inline;
	width: 160px;
	padding: 0;
	}

.ProdBuy {
	float: right;
	display: inline;
	width: 168px;
	text-transform: lowercase;
	text-align: right;
	padding: 0;
	}




/**CATEGORY PAGES
*******************/
.CatTop {margin-top: 10px;padding-right: 10px;}
.CategoryDescription {}
p.warning {color: #EA1100;}
p.noProds {border: 1px solid #C9CEFC; color: #333333; background-color: #EEEEEE; padding: 5px;}
#MiniNav {margin-top: 20px; height: 25px;}
#MiniNav .pagination {color: #000000; float: right;}
.pagination {color: #000000; text-align: right;}
#MiniNav .pagination .txtLink, .pagination .txtLink {border: 1px solid #333333; background-color: #000000; color: #FFFFFF; padding: 1px 5px;}
#MiniNav .pagination .txtLink:hover, .pagination .txtLink:hover {border: 1px solid #333333; background-color: #999999; color: #000000; padding: 1px 5px;}
#MiniNav .BreadCrumb {color: #000000; text-transform: lowercase;}
#SubCategories {
	background-color: #EBEDFE;
	text-align: center;
	border: 1px solid #C9CEFC;
	margin: 0px;
	padding: 3px;
	float: left;
	width: 750px;
	}


.SubCatBox {	
	text-align: center;
	float: left;
	width: 130px;
	height: 160px;
	margin: 10px 10px;
	text-transform: lowercase;
	}




/**SINGLE PRODUCT PAGE
************************/
.TAF {float: right; margin-bottom: 20px;}
.BreadCrumb {margin-top: 5px;color: #000000; height: 50px;}
.BreadCrumb span.current {color: #999999;}
#SPLeft {width: 460px;float: left;}

.SPImageTop, .SPImageBottom {
	background-repeat: no-repeat;
	background-position: top left;
	width: 452px;
	height: 30px;
	}

.SPImageRepeat {
	background-image:url(../styleImages/backgrounds/SPImageRepeat.gif);
	background-repeat: repeat-y;
	background-position: top left;
	width: 452px;
	}

.SPImageTop { background-image:url(../styleImages/backgrounds/SPImageTop.gif);}
.SPImageBottom { background-image:url(../styleImages/backgrounds/SPImageBottom.gif);}
#SPImage {margin-left: 30px;}
#SPRight {float: left; width: 270px; padding-left: 20px;}
#SPRight p {margin-top: 0;}
#MoreImages {text-align: center; margin: 10px auto;}
#Options {margin-left: 50px; margin-bottom: 40px;}
#Options .OptionsStyle {width: 120px;}


/**FOOTER AREA
******************/
#Footer {margin: -18px auto 5px;text-align: center;padding: 10px 0;text-transform: lowercase;position: relative;font-size: 14px;color: #FFFFFF;	background-color: #000000;}
#Footer span {color: #FFFFFF}
#Footer a {margin: 0 5px; color: #FFFFFF; background-color: transparent; text-decoration: none; margin: 0 5px;}
#Footer a:hover {color: #999999; background-color: transparent;}

/**COPYRIGHT SERIRA DESIGNS
****************************/
#CopyrightNotice, #DesignerCredits, .txtCopyright, a.txtCopyright {font-size: 12px; text-align: center;}
#CopyrightNotice {margin-bottom: 10px;}
#DesignerCredits a, a.txtCopyright {color: #000000; text-decoration: underline; background-color: #FFFFFF;}
#DesignerCredits a:hover, a.txtCopyright:hover {text-decoration: none;}
#CreditPayments {margin: 20px auto;}