/* --------alsteroptik.de- STYLE-------- */

/*	1.basics
	2.layout
	3.links
	4.content
	5.navi
	6.subnavi
	7.headlines
	8.show-layer
	 */
	
/*------------------1.basics------------------*/
html, body, div, p, h1, h2, h3, ul, ol,  span, a, table, td, form, img, li, input, form, object, textarea{
	line-height:1.3em;
	list-style-type:none;
	margin: 0px;
	padding: 0px;	}

:focus {outline: 0;}

html, body{
	font-family: "Trebuchet MS", Tahoma;
	background: #fff;
	color:#333;
	font-size:0.95em;}
	
html {
	overflow-x:hidden;
	overflow:-moz-scrollbars-vertical;
	SCROLLBAR-FACE-COLOR:#ccc;
	SCROLLBAR-HIGHLIGHT-COLOR: #fff;
	SCROLLBAR-SHADOW-COLOR: #ffffff;
	SCROLLBAR-ARROW-COLOR: #ffffff;
	SCROLLBAR-TRACK-COLOR: #ffffff;
	SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
	SCROLLBAR-BASE-COLOR: #ffffff;
	scrollbar-3d-light-color: #ffffff;}
	
hr{display:none;}

p{	margin:0px 0 15px 0;	
	text-align:justify;
	padding:10px 15px 10px 15px;
	background:#F5F5F5;}
	
h2{	padding-bottom:5px;
	font-size: 0.001em;
	text-indent:-4000px;}

.border-grey{
	border-bottom:1px solid #ccc;
	margin-bottom:10px;}

h3{	color:#069;
	font-size:1.0em;
	background:#F5F5F5;
	padding:10px 15px 0 15px;}

h4{margin-bottom:5px; 
	font-size:1.0em;}
	
/*------------------2.layout------------------*/
#container{
	margin: 0px auto;
	width:880px;
	position:relative;}
		
#header{
	background: url(../images/bg-header.jpg);
	height:287px;
	position:relative;	
	z-index: 1;}

#header h1{
	font-size: 0.001em;
	position:absolute;
	text-indent:-4000px;
	z-index: 1;}
	
#header h1 a{
	display: block;
	height:150px;
	left:7px;
	font-size: 0.001em;
	position:absolute;
	text-indent:-4000px;
	overflow: hidden;
	text-decoration: none;
	top:46px;
	width:180px;}
	
#header h1 a:hover{
	background: url(../images/logo2.jpg) no-repeat;
	z-index: 1;
	height:150px;}

#slogan{
	top:220px; 
	left:5px;
	width:185px;
	height:30px;
	color:#fff;
	position:absolute;
	z-index:1;}
	
#boxleft{
	background:url(../images/bg-boxleft.jpg) no-repeat;
	left:9px;
	min-height:400px;
	_height:300px;
	position:absolute;
	top:347px;
	width:175px;
	padding-right:10px;}

#content{
	margin-left:165px;
	padding:0 30px 20px 30px;
	min-height:705px;
	_height:705px;
	width:480px;
	z-index:10;}

#boxright{
	left:685px;
	min-height:430px;
	_height:430px;
	position:absolute;
	top:320px;
	_top:310px;
	width:210px;}
	
#fontsizer{
	width:86px; 
	height:25px; 
	background:url(../images/fontsize-bg.gif) no-repeat;
	left:575px;
	top:300px;
	position:absolute;}
	
.bigger{
	font-size: 0.001em;
	position:absolute;
	text-indent:-4000px;
	z-index: 1;
	height:24px;
	width:24px;}	
.bigger a{
	display: block;
	font-size: 0.001em;
	height:24px;
	overflow: hidden;
	text-decoration: none;
	width:24px;}
	
.reset{
	font-size: 0.001em;
	position:absolute;
	text-indent:-4000px;
	z-index: 1;
	left:30px;
	top:0px;
	height:24px;
	width:24px;}	
.reset a{
	display: block;
	font-size: 0.001em;
	height:24px;
	overflow: hidden;
	text-decoration: none;
	width:24px;}

.smaller{
	font-size: 0.001em;
	position:absolute;
	text-indent:-4000px;
	z-index: 1;
	left:60px;
	top:0px;
	height:24px;
	width:24px;}	
.smaller a{
	display: block;
	font-size: 0.001em;
	height:24px;
	overflow: hidden;
	text-decoration: none;
	width:24px;}
	
#footer{
	border-top:1px solid #ccc;
	padding:10px 0 20px 200px;
	height:50px;
	margin-top:20px;}	
	
#back{padding-left:200px;}

#pixaround{
	width:480px; 
	height:155px; 
	background: url(../images/bg-360.jpg);
	margin:10px 0 15px 0;
	z-index:20;}
	
#logos{width:480px;
	height:80px;
	background:url(../images/logos.jpg) no-repeat;
	margin-top:-5px;
	z-index:1;}
	
#slideshow{
	height:204px;
	left:193px;
	position:absolute;
	top:46px;
	width:286px;
	z-index:10;}	

/*------------------3.links------------------*/

a { text-decoration:none;color:#069;}
a:hover { text-decoration:underline; color:#069;}

/*------------------4.content------------------*/
.liste{	
	margin:0 0 5px 0px;
	padding:0 0 5px 25px;
	background:#F5F5F5; }
		
.liste li{
	list-style-image: url(../images/arr.gif); 
	margin:5px 30px 3px 12px;}	
	
.right{text-align:right; background:none}
.left{text-align:left; background:none}
.blue{color:#069; margin-bottom:10px;}

dl {margin: -20px 0 10px 15px;}
dloverflow {margin:0px; overflow:auto;}
dt {margin: 5px 0 -5px 0; width:55px;}
dd {margin: -18px 0 -5px 0; padding: 0 0 0 60px;}

.preis{color:#069; margin:-20px 0 0 0; font-weight:bold;}
.img{border:none; margin:0px 0 10px 0;}
.img a{border:none;}

.img-k{border:1px solid #ccc; margin:10px 15px 10px 6px;}
.img-k a{border:1px solid #ccc;}

.bg-img{	margin:0px 0 15px 0;	
	padding:10px 15px 10px 15px;
	background:#F5F5F5;}

/*------------------5.navi-blau-----------------*/	
#navi-blau{
	width:198px;
	height:203px;
	z-index:20;
	left:485px;
	top:46px;
	position:absolute;}
	
#navi-blau ul{ list-style-type:none;}	
#navi-blau li  {text-indent:-4000px;}
#navi-blau li a, #navi-blau li a:hover {display:block; text-decoration:none;}

#sonnenbrillen a {background:url(../images/navi/sonnenbrillen01.jpg) no-repeat; height:32px;}
#sonnenbrillen a:hover {background:url(../images/navi/sonnenbrillen02.jpg) no-repeat;height:32px;}
#sonnenbrillen-aktiv a {background:url(../images/navi/sonnenbrillen02.jpg) no-repeat;height:32px;}

#sportbrillen a {background:url(../images/navi/sportbrillen01.jpg) no-repeat; height:28px;}
#sportbrillen a:hover {background:url(../images/navi/sportbrillen02.jpg) no-repeat;height:28px;}
#sportbrillen-aktiv a {background:url(../images/navi/sportbrillen02.jpg) no-repeat;height:28px;}

#kontaktlinsen a {background:url(../images/navi/kontaktlinsen01.jpg) no-repeat; height:27px;}
#kontaktlinsen a:hover {background:url(../images/navi/kontaktlinsen02.jpg) no-repeat;height:27px;}
#kontaktlinsen-aktiv a {background:url(../images/navi/kontaktlinsen02.jpg) no-repeat;height:27px;}

#kinderbrillen a {background:url(../images/navi/kinderbrillen01.jpg) no-repeat; height:29px;}
#kinderbrillen a:hover {background:url(../images/navi/kinderbrillen02.jpg) no-repeat;height:29px;}
#kinderbrillen-aktiv a {background:url(../images/navi/kinderbrillen02.jpg) no-repeat;height:29px;}

#sehhilfen a {background:url(../images/navi/sehhilfen01.jpg) no-repeat; height:29px;}
#sehhilfen a:hover {background:url(../images/navi/sehhilfen02.jpg) no-repeat;height:29px;}
#sehhilfen-aktiv a {background:url(../images/navi/sehhilfen02.jpg) no-repeat;height:29px;}

#fertigbrillen a {background:url(../images/navi/fertigbrillen01.jpg) no-repeat; height:29px;}
#fertigbrillen a:hover {background:url(../images/navi/fertigbrillen02.jpg) no-repeat;height:29px;}
#fertigbrillen-aktiv a {background:url(../images/navi/fertigbrillen02.jpg) no-repeat;height:29px;}

#wetterinstrumente a {background:url(../images/navi/wetterinstrumente01.jpg) no-repeat; height:29px;}
#wetterinstrumente a:hover {background:url(../images/navi/wetterinstrumente02.jpg) no-repeat;height:29px;}
#wetterinstrumente-aktiv a {background:url(../images/navi/wetterinstrumente02.jpg) no-repeat;height:29px;}

/*------------------5.navi-grau-----------------*/	
#navi-grau{
	width:185px;
	height:203px;
	z-index:20;
	left:683px;
	top:46px;
	position:absolute;}
	
#navi-grau ul{ list-style-type:none;}	
#navi-grau li  {text-indent:-4000px;}
#navi-grau li a, #navi-grau li a:hover {display:block;text-decoration:none;}

#gutschein a {background:url(../images/navi/gutschein01.jpg) no-repeat; height:32px;}
#gutschein  a:hover {background:url(../images/navi/gutschein02.jpg) no-repeat;height:32px;}
#gutschein -aktiv a {background:url(../images/navi/gutschein02.jpg) no-repeat;height:32px;}

#trends a {background:url(../images/navi/trends01.jpg) no-repeat; height:28px;}
#trends a:hover {background:url(../images/navi/trends02.jpg) no-repeat;height:28px;}
#trends-aktiv a {background:url(../images/navi/trends02.jpg) no-repeat;height:28px;}

#service a {background:url(../images/navi/service01.jpg) no-repeat; height:27px;}
#service a:hover {background:url(../images/navi/service02.jpg) no-repeat;height:27px;}
#service-aktiv a {background:url(../images/navi/service02.jpg) no-repeat;height:27px;}

#angebote a {background:url(../images/navi/angebote01.jpg) no-repeat; height:29px;}
#angebote a:hover {background:url(../images/navi/angebote02.jpg) no-repeat;height:29px;}
#angebote-aktiv a {background:url(../images/navi/angebote02.jpg) no-repeat;height:29px;}

#kontakt a {background:url(../images/navi/kontakt01.jpg) no-repeat; height:29px;}
#kontakt a:hover {background:url(../images/navi/kontakt02.jpg) no-repeat;height:29px;}
#kontakt-aktiv a {background:url(../images/navi/kontakt02.jpg) no-repeat;height:29px;}

#anfahrt a {background:url(../images/navi/anfahrt01.jpg) no-repeat; height:29px;}
#anfahrt a:hover {background:url(../images/navi/anfahrt02.jpg) no-repeat;height:29px;}
#anfahrt-aktiv a {background:url(../images/navi/anfahrt02.jpg) no-repeat;height:29px;}

#impressum a {background:url(../images/navi/impressum01.jpg) no-repeat; height:29px;}
#impressum a:hover {background:url(../images/navi/impressum02.jpg) no-repeat;height:29px;}
#impressum-aktiv a {background:url(../images/navi/impressum02.jpg) no-repeat;height:29px;}

/*------------------6.subnavi-----------------*/	
#subnavi{
	display:inline;}
	
#subnavi ul{display:inline;list-style-type:none;}	
#subnavi li {display:inline; padding-right:15px;}
#subnavi li a{text-decoration:none;}	
#subnavi li a:hover {text-decoration:underline;}

/*------------------7.headlines------------------*/

.subheadline{height:30px;
	font-size: 0.001em;
	text-indent:-4000px;}
	
.service-k{background: url(../images/headlines/service-k.jpg) no-repeat;}	
.fragen-k{background: url(../images/headlines/fragen-k.jpg) no-repeat;}	
.wellingsbuettel{background: url(../images/headlines/wellingsbuettel.jpg) no-repeat;}	
.bramfeld{background: url(../images/headlines/bramfeld.jpg) no-repeat;}	
.berne{background: url(../images/headlines/berne.jpg) no-repeat;}
	
#headline{height:45px;
	font-size: 0.001em;
	text-indent:-4000px;
	margin-left:15px;}
	
.willkommen{background: url(../images/headlines/willkommen.gif) no-repeat;}
.sonnenbrillen{background: url(../images/headlines/sonnenbrillen.gif) no-repeat;}
.sportbrillen{background: url(../images/headlines/sportbrillen.gif) no-repeat;}	
.kontaktlinsen{background: url(../images/headlines/kontaktlinsen.gif) no-repeat;}
.kinderbrillen{background: url(../images/headlines/kinderbrillen.gif) no-repeat;}
.sehhilfen{background: url(../images/headlines/sehhilfen.gif) no-repeat;}
.fertigbrillen{background: url(../images/headlines/fertigbrillen.gif) no-repeat;}
.wetterinstrumente{background: url(../images/headlines/wetterinstrumente.gif) no-repeat;}
.gutschein{background: url(../images/headlines/gutschein.gif) no-repeat;}
.trends{background: url(../images/headlines/trends.gif) no-repeat;}
.service{background: url(../images/headlines/service.gif) no-repeat;}
.aktuelles{background: url(../images/headlines/aktuelles.gif) no-repeat;}
.kontakt{background: url(../images/headlines/fragen.gif) no-repeat;}
.anfahrt{background: url(../images/headlines/anfahrt.gif) no-repeat;}
.danke{background: url(../images/headlines/danke.gif) no-repeat;}
.impressum{background: url(../images/headlines/impressum.gif) no-repeat;}

/*--------------- 8. show-layer ------------------*/

.ul-showlayer{
	margin:0px 0 15px 0;	
	text-align:justify;
	padding:10px 15px 10px 15px;
	background:#F5F5F5;
	font-size:1em;
	line-height:1.5em;}


.ul-showlayer li {
	list-style-type: none;
	margin-bottom:6px;
	line-height:1.5em;
	text-align:justify;}