/* --------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;}

#gaestebuch a {background:url(../images/navi/gaestebuch01.jpg) no-repeat; height:29px;}
#gaestebuch a:hover {background:url(../images/navi/gaestebuch02.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;}
	
/*---------------------------------------------------------------------------------------
--------------------------------------ColorBox----------------------------------------------
---------------------------------------------------------------------------------------*/

/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}

/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#fff;}
#colorbox{}
    #cboxContent{margin-top:32px; overflow:visible;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{background:#0160A0; padding:1px;}
        #cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;}
        #cboxLoadingOverlay{background:#000;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#0160A0;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
        #cboxSlideshow, #cboxPrevious, #cboxNext, #cboxClose{text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(../images/controls.png) no-repeat 0 0;}
        #cboxPrevious{background-position:0px 0px; right:44px;}
        #cboxPrevious.hover{background-position:0px -25px;}
        #cboxNext{background-position:-25px 0px; right:22px;}
        #cboxNext.hover{background-position:-25px -25px;}
        #cboxClose{background-position:-50px 0px; right:0;}
        #cboxClose.hover{background-position:-50px -25px;}
        .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
        .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
        .cboxSlideshow_on #cboxSlideshow.hover{background-position:-100px -25px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
        .cboxSlideshow_off #cboxSlideshow.hover{background-position:-75px -25px;}