/*   Design:   CENTERED with TOPNAV				         */
/*   File:     screen.css					                 */
/*-----------------------------------------------------------*/
/*   Autor:   Sam Mueller, www.nuun.ch 		                 */
/*   Datum:   25.10.2009				                     */
/*   Site: 	  wwww.brunos-fashion.ch           		         */
/*************************************************************/
/*   Colors:  blue: #60728d						 			 */
/*			  brown: #2a1b0f (bg)					 		 */
/*			  lightbrown: #7d604d (footer font)				 */
/*			  grey: #cbcbcb (border, light)				     */
/*************************************************************/


/*  GLOBAL LAYOUT											 */
/*************************************************************/
html, body {min-width:996px; margin:0 auto; height:100%; font: 100.01%/1.0em Arial, Verdana, Helvetica, sans-serif; background-color:#2a1b0f; color:#2d2d2d; }
#container-page { position: relative; min-height:100%; width:996px; margin-left:auto; margin-right:auto; background:url(../grafics/logo_brunos-zuerich.jpg) no-repeat center top; }
.home #container-page { position: relative; min-height:100%; width:996px; margin-left:auto; margin-right:auto; background:url(../grafics/logo_brunos-zuerich-big.jpg) no-repeat center top; }
* html #container-page {height:100%;}
#container-content {padding: 10px 70px 40px 87px; font-size: 0.7em; height:453px;} 
.brands #container-content { background:url(../grafics/bg_brands.jpg) no-repeat center top; }
.news #container-content, .location #container-content  { background:url(../grafics/bg_news.jpg) no-repeat center top; }
.shop #container-content { background:url(../grafics/bg_shop.jpg) no-repeat center top; }
.contact #container-content { background:url(../grafics/bg_contact.jpg) no-repeat center top; }
#header {height:100px; width:996px; padding-top:100px;}
.brands #col1, .brands #col2, .brands #col3 {width:222px; float:left; margin-right:17px; padding: 34px 20px 20px 20px; height:379px; text-align:center; }
.news #col1, .location #col1 {width:222px; float:left; margin-right:17px; padding: 34px 20px 20px 20px; height:379px; text-align:center; }
.news #col2, .location #col2  {width:500px; float:left; padding: 34px 20px 20px 20px; height:379px; text-align:center; }
.contact #col1 {width:780px; float:left; padding: 34px 20px 20px 20px; height:379px; text-align:center; }
.shop #shop { background:url(../grafics/shop-soon-online.gif) no-repeat center top; width:45px; height:33px; position:absolute; top: 125px; left:690px; }
.contact #heat { background:url(../grafics/heat.png) no-repeat center top; width:61px; height:59px; position:absolute; top: 190px; left:870px; }
.news #needle { background:url(../grafics/needle.png) no-repeat center top; width:92px; height:83px; position:absolute; top: 580px; left:60px; }
#nuun { width:92px; height:17px; position:absolute; top:610px; left:165px; }
#nuun span {display:none; }

#footer {width:996px; position:relative; margin-top:-35px; height: 20px; margin-left:auto; margin-right:auto; font-size:0.8em; color:#7d604d; text-align:center; letter-spacing: 0em; }
.cleaner{clear:both;}

/*  GLOBAL TEXT FORMATS	AND CONTENT FORMATS					 */
/*************************************************************/
#container-content a:link, #container-content a:visited {text-decoration:none; color:#60728d; font-weight:normal; }
#container-content a:hover, #container-content a:active, #container-content a.aktiv:link, #container-content a.aktiv:visited {text-decoration:none; color:#2a1b0f; font-weight:bold;}
#footer a, #footer a:link, #footer a:visited{text-decoration:none; color:#7c9ab5;}
#footer a:hover, #footer a:active{text-decoration:underline; color:#7c9ab5; }
.brands h2, .news h2, .location h2, .contact h2  { font-size:14px; text-transform:uppercase; color:#2a1b0f; font-weight:bold; }
.brands #col2 p, .news #col2 p, .location #col2 p, #col1 p {letter-spacing:0.025em; line-height:1.8em; margin-top:35px; }
.news #col2 p {margin-top:18px; }
.back { margin-top:5px;}
#col1 p { margin:0px;}



/*  NEWSLIST												 */
/*************************************************************/
.newslist{margin:20px 0px 0px 10px;}
.newslist li{float:left; margin: 0px 16px 10px 0px;}
.newslist li img {padding:4px; border:1px solid #2a1b0f; background-color:#f5e0b0;}
.newslist li img.upcoming {padding:4px; border:1px solid #cda041; background-color:#f5e0b0;}


/*  MAIN-NAVIGATION	/ GEN-NAVIGATION / SEK-NAVIGATION	  	 */
/*************************************************************/
ul#hnav{list-style-type:none; height:16px; width:744px; margin: 0px 0px 0px 170px; }
.home ul#hnav{list-style-type:none; height:16px; width:744px; height:340px; padding-top:220px; margin-left:80px; }
ul#hnav li{padding:0; margin:0; background:none; float:left; }
ul#hnav li a {display:block; height:16px; }
ul#hnav li a.hn1:link, ul#hnav li a.hn1:visited { background:url(../grafics/hnav_home.jpg); width:47px; text-indent: -100em; margin-right:38px; }
ul#hnav li a.hn1:hover, ul#hnav li a.hn1:active, .home ul#hnav li a.hn1:link, .home ul#hnav li a.hn1:visited { background:url(../grafics/hnav_home_hover.jpg) }
ul#hnav li a.hn2:link, ul#hnav li a.hn2:visited { background:url(../grafics/hnav_news.jpg); width:47px; text-indent: -100em; margin-right:37px; }
ul#hnav li a.hn2:hover, ul#hnav li a.hn2:active, .news ul#hnav li a.hn2:link, .news ul#hnav li a.hn2:visited { background:url(../grafics/hnav_news_hover.jpg) }
ul#hnav li a.hn3:link, ul#hnav li a.hn3:visited { background:url(../grafics/hnav_brands.jpg); width:67px; text-indent: -100em; margin-right:188px; }
ul#hnav li a.hn3:hover, ul#hnav li a.hn3:active, .brands ul#hnav li a.hn3:link, .brands ul#hnav li a.hn3:visited { background:url(../grafics/hnav_brands_hover.jpg) }
ul#hnav li a.hn4:link, ul#hnav li a.hn4:visited { background:url(../grafics/hnav_location.jpg); width:74px; text-indent: -100em; margin-right:19px; }
ul#hnav li a.hn4:hover, ul#hnav li a.hn4:active, .location ul#hnav li a.hn4:link, .location ul#hnav li a.hn4:visited  { background:url(../grafics/hnav_location_hover.jpg) }
ul#hnav li a.hn5:link, ul#hnav li a.hn5:visited { background:url(../grafics/hnav_shop.jpg); width:48px; text-indent: -100em; margin-right:19px; }
ul#hnav li a.hn5:hover, ul#hnav li a.hn5:active, .shop ul#hnav li a.hn5:link, .shop ul#hnav li a.hn5:visited { background:url(../grafics/hnav_shop_hover.jpg) }
ul#hnav li a.hn6:link, ul#hnav li a.hn6:visited { background:url(../grafics/hnav_contact.jpg); width:76px; text-indent: -100em; }
ul#hnav li a.hn6:hover, ul#hnav li a.hn6:active, .contact ul#hnav li a.hn6:link, .contact ul#hnav li a.hn6:visited { background:url(../grafics/hnav_contact_hover.jpg) }


/*  LIGHTBOX-Gallery										 */
/*************************************************************/
.lbborder { background:url(../grafics/lbborder.png) no-repeat top left; width:800px; height:453px; padding:30px 35px; position:absolute; top:200px; left:78px; }
.lbborder a.lblink:link, .lbborder a.lblink:visited {padding:4px; border:1px solid #2a1b0f; background-color:#f5e0b0; display:block; float:left; margin:0 16px 16px 0;} 

/*  SLIDER-Gallery											 */
/*************************************************************/
/* 
    root element for the scrollable. 
    when scrolling occurs this element stays still. 
*/ 
div.scrollable { 
 
    /* required settings */ 
    position:absolute; 
	top:217px;
	left:95px;
    overflow:hidden; 
    width: 803px; 
    height:419px; 
	z-index: 100;
} 
 
/* 
    root element for scrollable items. Must be absolutely positioned 
    and it should have a extremely large width to accomodate scrollable items. 
    it's enough that you set width and height for the root element and 
    not for this element. 
*/ 
div.scrollable div.items { 
    /* this cannot be too large */ 
    width:20000em; 
    position:absolute; 
} 
 
/* 
    a single item. must be floated in horizontal scrolling. 
    typically, this element is the one that *you* will style 
    the most. 
*/ 
div.scrollable div.items div { 
    float:left; 
} 
 
/* you may want to setup some decorations to active the item */ 
div.items div.active { 
    border:1px inset #ccc; 
    background-color:#fff;
	
}

/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	display:block;
	width:25px;
	height:25px;
	cursor:pointer;
	font-size:12px;
}

/* right */
a.right { margin-right: 0px; background:url(../grafics/right-aktiv.gif) no-repeat center center; position:absolute; z-index:400; top:413px; left:883px; }
a.right:hover {  }
a.right:active {  } 


/* left */
a.left { margin-left: 0px; background:url(../grafics/left-aktiv.gif) no-repeat center center;  position:absolute; z-index:400; top:413px; left:87px; } 
a.left:hover {  }
a.left:active { }

.galborder { background:url(../grafics/border.png) no-repeat top left; width:838px; height:453px; z-index:200; position:absolute; top:200px; left:78px; }

/*  FIXES  													 */
/*************************************************************/
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display:inline-block;}
/* 	Hide from IE Mac \*/ .clearfix {display:block;} /* 	End hide from IE Mac */