@charset "utf-8";

/* -----------------------------------*/
/* ---------->>> RESET  <<<-----------*/
/* -----------------------------------*/
@import url("reset.css");

/* -----------------------------------*/
/* ---------->>> JQUERY <<<-----------*/
/* -----------------------------------*/
@import url("jquery.jstickynote.css");
@import url("jquery.lightbox-0.5.css");

/* -----------------------------------*/
/* ---------->>> GLOBAL <<<-----------*/
/* -----------------------------------*/
/*Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc.*/
body { background: #D9DCDC; font-family: "Century Gothic"; }

/* -----------------------------------------*/
/* ---------->>>    HEADER    <<<-----------*/
/* -----------------------------------------*/
#header {
    background-color: #333;
    font-size: 1em;
	font-weight: bold;
	padding: 10px;
	text-transform: uppercase;
    width: 100%;
}

#header img {
	width: 15px;
	height: 15px;
	padding-left: 10px;
	vertical-align: top;
}
#header a:link, #header a:visited { color: #FFF; text-decoration: none;}

/* -----------------------------------------*/
/* ---------->>>  NAVIGATION  <<<-----------*/
/* -----------------------------------------*/
#nav { float: left; width: 170px; list-style: none; }

#nav a {
	display: block; 
	height: 40px; 
	padding-top: 5px;
    text-indent: -9000px;
}

#girls { background: url("../images/btn_nav_girls.png") no-repeat; }
#boys { background: url("../images/btn_nav_boys.png") no-repeat; }
#ladies { background: url("../images/btn_nav_ladies.png") no-repeat; }
#gentlemen { background: url("../images/btn_nav_gentlemen.png") no-repeat; }
#accessoires { background: url("../images/btn_nav_accessoires.png") no-repeat; }

/* -----------------------------------------*/
/* ---------->>>    CONTENT   <<<-----------*/
/* -----------------------------------------*/
#container { margin: 50px auto 50px; min-height: 620px; width: 975px; }

#content {
    background: #F8F8F8;
    float: right;
    font-size: 0.875em;
    padding: 30px;
    width: 745px;
}

#content h1 { padding-bottom: 1em; text-transform: uppercase; }
#content .girls_title a:visited, #content .girls_title a:link { color: #C39; }
#content .boys_title a:visited, #content .boys_title a:link { color: #900; }
#content .ladies_title a:visited, #content .ladies_title a:link { color: #336; }
#content .gentlemen_title a:visited, #content .gentlemen_title a:link { color: #069; }
#content .accessoires_title a:visited, #content .accessoires_title a:link { color: #666; }

.girls_title { color: #C39; }
.boys_title { color: #900; }
.ladies_title { color: #336; }
.gentlemen_title { color: #069; }
.accessoires_title { color: #666; }
.content_description { 
	float: left;
    width: 365px;

}

.content_photo {
	float: left;
	height: 170px;	
    width: 370px;
}

.content_photo img {
	padding: 0 5px 0;
    width: 170px;
	vertical-align: middle;	
}

#brand_description {
    float: left;
    width: 595px;
}

#brand_description ul {
    list-style: disc;
	margin-left: 15px;
}

#brand_description p {
    padding: 0 0 15px;
}

#brand_description h1 {
    margin-top:30px;
}

#brand_description img {
	background-color:#F00;
    margin-right: 15px;
    margin-bottom: 15px;
	vertical-align: middle;
}

#brands {
    float: right;
    font-size: 0.875em;
    text-transform: uppercase;
    width: 150px;
}

#brands li {	
    margin: 15px 0; color: #F00;
}

#brands a:hover {
    font-weight: bold;
}

#brands a:visited, #brands a:link {
    font-size: 0.875em;
    text-decoration:none;
}

#brands .girls_title a:visited, #brands .girls_title a:link { color: #C39; }
#brands .boys_title a:visited, #brands .boys_title a:link { color: #900; }
#brands .ladies_title a:visited, #brands .ladies_title a:link { color: #336; }
#brands .gentlemen_title a:visited, #brands .gentlemen_title a:link { color: #069; }
#brands .accessoires_title a:visited, #brands .accessoires_title a:link { color: #666; }

/* -----------------------------------------*/
/* ---------->>>    FOOTER    <<<-----------*/
/* -----------------------------------------*/
#footer {
    background-color: #333;
    color:#FFF;
	float: right;
	font-size: 0.875em;
	margin: 0 0 50px;
	padding: 30px;
    width: 745px;	
}

#footer h2 { font-size: 1.4em; margin-bottom: 10px; text-transform: uppercase; text-align: center; width: 243px;}

#address { 
	float: left;	
	width: 245px;
}

#address a:link, #address a:visited {
	color: #FFF;
	font-size: 0.875em;
}

#opening_hours { 
	float: left;	
	width: 245px;
}

#opening_hours th {
	display: none;	
}

#location { 
	float: left;	
	width: 245px;
}

.vcard {
	display: none;
}
/* -----------------------------------------*/
/* ---------->>>    GENERIC   <<<-----------*/
/* -----------------------------------------*/
/*Define styles for simple things like floating to the sides, removing a bottom margin on elements, etc*/
/*Yes, these may not be as semantic as we would all like, but they are necessary for coding efficiently */