/*  =========================================================
URL: http://www.bruns-berufsbekleidung.de/
Datei: screen.css
Media: screen, projection 

Datum: 2010-04-26
Autor: Stefan Brinkers / Jordan Mediengestaltung GmbH
Mail:  spam@jordanmg.de
Web:   http://www.jordanmg.de/
                                   
1. Allgemeine Selektoren 
	1.1 Allgemein gültige Formatierungen
	1.2 Allgemeine Klassen
                              
2. Layoutbereiche 
	2.1 Kopf (Header)
	2.2 contentText-Bereich
	2.3 linker UND rechter Bereich
	2.4 Fussbereich (Footer)

3. Navigation
	3.1 Menu horizontal
	
4. Typo
	4.1 Typo im contentText-Bereich

5. Besonderheiten für bestimmte Seiten

========================================================== */


/* ##############################
   1. Allgemeine Selektoren 
############################## */

html{
margin:0px;
padding:0px;
}

body{
background-image:url(../images/hintergr.gif);
background-repeat:repeat-y;
background-color:#FFFFFF;
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:70%;
color:#FFFFFF;
}

img, img a, a img,
a img, a:active img, a:visited img, a:hover img{
border:none;
border-width:0px;
border-style:none;
}

/* ========================================================
   1.1 Allgemein gültige Formatierungen 
======================================================== */

p, 
ul, 
ol {
  margin-top: 0 ;
  margin-right: 0 ;
  margin-bottom: 1em ;
  margin-left: 0;
}

ul ul { 
  margin: 0; 
}

li {
  margin-top: 0 ;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 1em;
}

/* ========================================================
   1.1 Allgemeine Klassen
======================================================== */

.clear{
clear:both;
height:1px;
line-height:1px;
font-size:1px;
padding:0px;
margin:0px;
}

.cleardiv {
clear:both;
height:24px;
}

.ninja{
display:none;
}

/* ##############################
   2. Layoutbereiche 
############################## */

/* ========================================================
   2.1 Kopf (Header)
======================================================== */

#header {
width:1020px;
height:100px;
border-bottom:1px solid #FFFFFF;
}

#logo {
width:175px;
height:100px;
float:left;
}
	#logo img{
	margin:14px 0px 0px 19px;
	}

#main{
width:1020px;
height:345px;
border-bottom:1px solid #FFFFFF;
}

.topmenu {
width:505px;
padding:0;
float:left;
height:20px;
margin-top:61px;
position:relative;
}

#untermenu {
background-color:#EBB032;
height:24px;
padding-left:170px;
}

/* ========================================================
   2.2 Content-Bereich
======================================================== */

#logoscroller{
float:left;
width:180px;
height:320px;
text-align:center;
}

#content{
float:left;
width:445px;
padding-right:55px;
height:285px;
padding-top:35px;
color:#434547;
overflow:auto;
line-height:20px;
letter-spacing:1px;
}

/*
*html #content{
float:left;
width:500px;
padding-right:55px;
height:296px;
padding-top:25px;
color:#434547;
overflow:auto;
line-height:20px;
letter-spacing:1px;
}
*/

/* ========================================================
   2.3 linker UND rechter Bereich
======================================================== */

#left{
float:left;
width:680px;
height:345px;
background-color:#FFFFFF;
}

#right{
float:left;
width:339px;
height:345px;
border-left:1px solid #000000;
background-color:#FFFFFF;
}

/* ========================================================
   2.4 Fussbereich (Footer)
======================================================== */

#footer{
width:1020px;
height:50px;
padding-top:25px;
clear:both;
}

.shopmenu {
width:510px;
padding-left:170px;
float:left;
}

#news{
width:264px;
padding-left:75px;
float:left;
}

/* ##############################
   3. Navigation
############################## */

/* ========================================================
   3.1 Menu horizontal
======================================================== */

/* Navigation Level 1 ***********************************/

.menu ul{
margin: 0px;
padding:0px;
float: left;
list-style:none;
z-index:99;
width:505px;
}

.menu li{
float: left;
margin: 0px 20px 0px 0px;
line-height: 20px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#86888B; 
font-weight:bold;
font-size:12px;
}
	.topmenu li{letter-spacing:2px;}
	.shopmenu li{letter-spacing:normal;}

.menu a, .menu a:active, .menu a:visited {
display: block;
width: auto;
height: 20px;
margin: 0px;
padding:0px;
float: left;
text-transform:lowercase;
text-decoration:none;
color:#86888B; 
}

.menu a:hover,
.menu a.aktiv, .menu a.aktiv:active, .menu a.aktiv:visited {
color:#FFF; 
text-decoration:none;
}

/* Navigation Level 2 ***********************************/

.menu ul li ul {
position:absolute;
top:40px;
left:0px;
width:500px;
z-index:100;
}

.menu ul li ul li{
height:24px;
line-height:24px;
color:#434547;
font-weight:normal;
margin: 0px 8px 0px 0px;
letter-spacing:0px;
}

.menu ul li ul li a, .menu ul li ul li a:active, .menu ul li ul li a:visited {
font-weight:bold;
color:#434547; 
}

.menu ul li ul li a:hover,
.menu ul li ul li a.aktiv, .menu ul li ul li a.aktiv:active, #u.menu ul li ul li a.aktiv:visited {
color:#FFF; 
}


/* ##############################
   4. Typo
############################## */

h1 {font-size:12px; margin-top:0px; padding-top:0px;}
h1 img{margin-right:5px;}

p {margin-top:0px;}

p.legalText { font-size: 0.5em; }

table {color:#434547; font-family:Arial, Helvetica, sans-serif; font-size:100%;}

#gtab td { border-style:solid; border-color:#434547;}

.hinweis {
margin:10px 0;
padding:10px;
background-color:#EBB032;
color:#434547;
}

/* ========================================================
   4.1 Typo im contentText-Bereich
======================================================== */

#content a, #content a:visited{
color:#434547;
}

#content a:hover{
text-decoration:none;
}


/* ##############################
   5. Besonderheiten für bestimmte Seiten
############################## */



/* slider ***********************************/

#slider {
   width: 339px; /* important to be same as image width */
   height: 345px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}

#slider ul, #slider li{
margin:0px;
padding:0px;
}

#sliderContent {
   width: 339px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

.sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 0px 13px;
   line-height:24px;
   width: 339px;
   background-color: #FFF;
   filter: alpha(opacity=20); /* here you can set the opacity of box with text */
   -moz-opacity: 0.2; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.2; /* here you can set the opacity of box with text */
   opacity: 0.2; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   top: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

/* logoscroller ***********************************/

#logoscroller ul, #logoscroller li{
margin:0px;
padding:0px;
width:180px;
}

#logoscroller ul{
height:320px;
overflow:hidden;
}

#logoscroller li{
height: 106px;
line-height:106px;
overflow:hidden;
}