@charset "UTF-8";

/*
   
	hochzeitsfotograf-oettli.ch - global.css

	cubegrafik, 2010
		
*/


/* --------------------- Reset */

* { padding: 0; margin: 0; border: 0; }


/* --------------------- Misc */

body { background: url(../../images/bkg.jpg) no-repeat top center; } /* url(../../images/bkgRice.jpg) */

html, body { height: 100%; }

.clear { clear: both; }

.gal h1 { display: none; }

a { outline: none; }


/* --------------------- Typography */

@font-face { font-family: DIN-Light; src: url('../fonts/DIN-LIGH.TTF') format("truetype"); }

@font-face { font-family: DIN-Regular; src: url('../fonts/DIN-REGU.TTF') format("truetype"); }

@font-face { font-family: DIN-Bold; src: url('../fonts/DIN-BOLD.TTF') format("truetype"); }


body, input { font: 12px/18px Arial, Helvetica, sans-serif; color: #000; letter-spacing: 1px; }

p { margin: 18px 0; }

h1 { font: 12px/18px "DIN-Bold", Arial, Helvetica, sans-serif; color: #000; text-transform: uppercase; letter-spacing: 2px; border-bottom: 1px #d2d2d2 solid; padding-bottom: 5px; }


/* --------------------- Links */

a:link, a:active, a:visited { color: #000; text-decoration: underline; }

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


#footer a:link, #footer a:active, #footer a:visited { color: #000; text-decoration: none; }

#footer a:hover { color: #000; text-decoration: underline; }


/* --------------------- Layout */

#wrapper, #startWrapper { position: relative; width: 900px; min-height: 100%; height: auto !important; height: 100%; margin: auto auto; }

#header { width: 900px; height: 115px; padding-top: 26px; margin-bottom: 10px; }

#logo { width: 300px; height: 95px; float: left; cursor: pointer; text-align: center; }

#logo div { font: 12px/18px "DIN-Regular", Arial, Helvetica, sans-serif; color: #000; text-transform: uppercase; letter-spacing: 2px; margin-top: 5px; }

img.bl { width: 5px; height: 15px; margin: 0 7px -3px 0; display: inline-block; }

img.br { width: 5px; height: 15px; margin: 0 0 -3px 5px; display: inline-block; }

#audio { position: absolute; top: 15px; right: 0px; width: 60px; height: 30px; cursor: pointer; display: none; z-index: 9999; }

#container { width: 900px; min-height: 678px; background: url(../../images/bkgPhotos.png) no-repeat; }

#content { width: 826px; margin: 0 auto 25px auto; }

.top { width: 825px; height: 74px; background: url(../../images/bkgContentTop.png) bottom no-repeat; }

.mid { width: 765px; min-height: 480px; padding: 25px 30px; background: url(../../images/bkgGallery.png) repeat-y; }

.log { width: 765px; min-height: 480px; padding: 25px 30px; background: url(../../images/bkgContent.png) repeat-y; }

.gal { position: relative; width: 810px; min-height: 530px; padding-left: 15px; background: url(../../images/bkgGallery.png) repeat-y; }

.bot { width: 825px; height: 15px; background: url(../../images/bkgContentBottom.png) top no-repeat; }

#mailfrm { 
	margin-top: 10px;
	width: 825px;
	height: auto;
	text-transform: uppercase;
}
#mailfrm h2 {
	margin-bottom: 10px;
	font-size: 14px;
}	
.txtlbl {
	width: 180px;
}
.txtbox {
	border-width: 1px;
	border-color: #7C9EB9;
	border-style: solid;
	width: 200px;
}

#btnmailsubmit {
	margin: 0px auto;
	display: block;
	margin-top: 80px;
	background-color: #DFDFDF;
	font-weight: bold;
	text-align: center;
	width: 160px;
}

#btnThumbsPrev {
	float:left;
	cursor: pointer;
}
#btnThumbsNext {
	float:right;
	cursor: pointer;
}

#frmadd {
	font-size: 12px;
}

#loginBox { width: 100%; height: 166px; margin-top: 100px; background: url(../../images/bkgLogin.gif) no-repeat center; }

#loginBox form { width: 227px; height: 116px; margin: auto auto; padding: 22px 25px 0 25px; }

#loginBox input#user, #loginBox input#pass { width: 213px; height: 21px; padding: 8px 7px 0 7px; margin-bottom: 7px; background: url(../../images/bkg_input.gif) no-repeat; }

#loginBox input#submit { cursor: pointer; padding: 1px; background: #efefef; font-weight: bold; }

#clear { clear: both; padding-bottom: 40px; z-index: 0; }

#footer { width: 900px; height: 40px; margin: -40px auto 0 auto; text-align: center; }

#footer div { font: 12px/18px "DIN-Regular", Arial, Helvetica, sans-serif; display: inline; }

#footer a.c { position: relative; color: #999; z-index: 1000; font-size: 10px; }

#footer p { position: relative; display: inline; z-index: 1000; }

img.brand { position: relative; top: 3px; width: 163px; height: 13px; margin: 0 5px 0 1px; display: inline-block; }


/* --------------------- Galleria */

#main { position: relative; width: 795px; height: 530px; overflow: hidden; z-index: 1; }

#btnPrev { position: absolute; top: 65px; left: -8px; width: 36px; height: 37px; background: url(../../images/btnPrev.png); cursor: pointer; z-index: 2; }

#startWrapper #btnPrev { display: none !important; }

#btnNext { position: absolute; top: 65px; right: -8px; width: 36px; height: 37px; background: url(../../images/btnNext.png); cursor: pointer; z-index: 2; }

#startWrapper #btnNext { display: none !important; }

#thumbsDrawer { position: absolute; bottom: -4px; left: 362px; width: 70px; height: 30px; background: url(../../images/bkgThumbsDrawer.png) no-repeat; list-style: none; z-index: 2; }

li.openDrawer { position: absolute; width: 70px; height: 30px; background: url(../../images/icnOpenDrawer.gif) center 9px no-repeat; cursor: pointer; }

li.closeDrawer { position: absolute; width: 70px; height: 30px; background: url(../../images/icnCloseDrawer.gif) center 9px no-repeat; cursor: pointer; display: none; }

#slideShow { position: absolute; bottom: -6px; left: 363px; width: 70px; height: 30px; background: url(../../images/bkgSlideShow.png) no-repeat top center; list-style: none; z-index: 2; }

li.start { position: absolute; width: 70px; height: 30px; background: url(../../images/icnSlideShowPlay.gif) center 9px no-repeat; cursor: pointer; display: none; }

li.stop { position: absolute; width: 70px; height: 30px; background: url(../../images/icnSlideShowPause.gif) center 9px no-repeat; cursor: pointer; }

#drawer { position: relative; width: 805px; overflow: hidden; }

#startWrapper #drawer { display: none; }

.galleria li { position: relative; list-style: none; display: block; width: 105px; height: 70px; overflow: hidden; float: left; margin: 10px 10px 0 0; display: block; background: #fff url(../../images/loading.gif) no-repeat center; }

.galleria li div { position: absolute; display: none; top: 0; left: 180px; }

.galleria li div img { cursor: pointer; width: 105px; height: 70px; }

.galleria li.active div img, .galleria li.active div { display: block; }

.galleria li img.thumb { width: 105px; height: 70px; cursor: pointer; top: auto; left: auto; display: block; margin-right: 10px !important; }

.caption { display: none !important; }

* html .galleria li div span { width: 400px; } 

input.selectPhoto { position: absolute; top: 3px; right: 3px; z-index: 1000; } 


/* --------------------- Slimbox */

#lbOverlay { position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: url(../../images/bkg.jpg) no-repeat top center; cursor: pointer; }

#lbCenter { position: absolute; z-index: 9999; overflow: hidden; background-color: #fff; }

#lbBottomContainer, #lbPrevLink, #lbNextLink, #lbCaption, #lbNumber { display: none; }

.lbLoading { background: #fff url(../../images/loading.gif) no-repeat center; }

#lbImage { position: absolute; left: 0; top: 0; border: 10px solid #fff; background-repeat: no-repeat; }

#lbBottom { font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; font-size: 10px; color: #666; line-height: 1.4em; text-align: left; border: 10px solid #fff; border-top-style: none; }

#lbCloseLink { position: absolute; bottom: -11px; display: block; width: 100%; height: 37px; background: transparent url(../../images/btnClose.png) no-repeat center; outline: none; }


/* --------------------- jCarousel */

.jcarousel-container { position: relative; } 

.jcarousel-container-horizontal { width: 795px; height: 80px; overflow: hidden; }

.jcarousel-clip { position: relative; width: 805px; height: 70px; z-index: 2; padding: 0; margin: 0; }

.jcarousel-list li, .jcarousel-item { width: 105px; height: 70px; float: left; list-style: none; margin: 10px 10px 0 0; padding: 0; }

.jcarousel-list { position: relative; z-index: 1; overflow: hidden; top: 0; left: 0; margin: 0; padding: 0; }

.jcarousel-next { z-index: 3; display: none; }

.jcarousel-prev { z-index: 3; display: none; }

.jcarousel-next-horizontal { position: absolute; top: 27px; right: -7px; width: 36px; height: 37px; cursor: pointer; background: transparent url(../../images/btnThumbsNext.png); z-index: 1000; }

.jcarousel-next-disabled-horizontal, .jcarousel-next-disabled-horizontal:hover, .jcarousel-next-disabled-horizontal:active { cursor: default; background: none; }

.jcarousel-prev-horizontal { position: absolute; top: 27px; left: -8px; width: 36px; height: 37px; cursor: pointer; background: transparent url(../../images/btnThumbsPrev.png); z-index: 1000; }

.jcarousel-prev-disabled-horizontal, .jcarousel-prev-disabled-horizontal:hover, .jcarousel-prev-disabled-horizontal:active { cursor: default; background: none; }


/* --------------------- Navigation */

#navig { position: relative; padding-top: 76px; height: 46px; float: right; }

ul.mainNav { min-width: 500px; float: left; }

ul.mainNav li { list-style: none; float: left; }

ul.mainNav li.back { position: absolute; width: 7px; height: 24px; background: url(../../images/bkgNav.png) no-repeat right -24px; z-index: 8; display: none; }

ul.mainNav li.back .left { height: 24px; margin-right: 5px; background: url(../../images/bkgNav.png) no-repeat top left; }

#startWrapper li.back { display: none; }

ul.mainNav li a { font: 12px/18px "DIN-Regular", Arial, Helvetica, sans-serif; text-transform: uppercase; outline: none; letter-spacing: 2px; text-align: center; position: relative; float: left; margin: auto 0; padding: 5px 9px 5px 12px; z-index: 10; overflow: hidden; display: block; }

ul.mainNav li a:link, ul.mainNav li a:active, ul.mainNav li a:visited { color: #000; text-decoration: none; }

ul.mainNav li a:hover { color: #000; text-decoration: none; }

ul.mainNav li.current a { font: 12px/18px "DIN-Bold", Arial, Helvetica, sans-serif; color: #000; text-decoration: none; margin-left: .5px; }


ul.subNav { position: relative; top: 0px; left: 13px; width: 500px; text-transform: uppercase; }

ul.subNav li { display: inline; list-style: none; }

ul.subNav li a { font: 10px/18px "DIN-Regular", Arial, Helvetica, sans-serif; margin-right: 10px; text-decoration: none !important; }

ul.subNav li a:link, ul.mainNav li a:active, ul.mainNav li a:visited { color: #000; text-decoration: none !important; }

ul.subNav li a:hover { color: #000; text-decoration: none !important; }

ul.subNav li.current a { font: 10px/18px "DIN-Bold", Arial, Helvetica, sans-serif; color: #000; }