@charset "utf-8";
/**
 * 
 * @desc		Main StyleSheet
 * @project		Ambulancefilm
 * @author		Boris Bojic <bojic@devshack.biz>
 * @copyright	2009 Boris Bojic
 * @version		Tue, 16 Jun 2009 13:24:53 +0200
 *
 */


/* === [ Basics / CSS Reset ] =================================================================================================== */

html,body,div,span,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100.01%;vertical-align:baseline;background:transparent;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,
q:before,q:after{content:'';content:none;}
:focus{outline:0;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
body{line-height:1;font-family:Verdana,Arial,Helvetica,"Trebuchet MS",sans-serif;color:#B1151A;background:#fff}
input,
select,
textarea{font-family:Verdana,Arial,Helvetica,"Trebuchet MS",sans-serif;margin:0;padding:0;border:0;}
table{border-collapse:collapse;border-spacing:0;empty-cells:show;font-family:Verdana,Arial,Helvetica,"Trebuchet MS",sans-serif;}
a{color:#5c5757;text-decoration:none;}

a,
label,
#content dl#contactform dt#submit input,
.jScrollPaneTrack,
.jScrollPaneDrag
{
	cursor:url('/design/layout/af_cursor_2.gif'), crosshair;
}

/* === [ Main Layout ] =================================================================================================== */

h1
{
	width: 935px;
	height: 37px;
	margin: 0 auto 35px auto;
	padding-top: 40px;
	text-indent: -9999em;
	background: #fff url('./layout/ambulance-logo.png') 95% 40px no-repeat;
}

	h1 a
	{
		float: right;
		width: 174px;
		margin-right: 38px;
		height: 100%;
		text-decoration: none;
	}

#wrapper
{
	width: 935px;
	height: 496px;
	margin: 0 auto;
}

	#wrapper:after
	{
		content: "."; 
		display: block; 
		height: 0; 
		clear: both; 
		visibility: hidden;
	}

#navi
{
	float: left;
	width: 187px;
	height: 496px;
	background: #fff url('./layout/navi-box.png') top left no-repeat;
}

#content
{
	float: right;
	width: 708px;
	height: 496px;
	background: transparent url('./layout/content-rahmen.png') top right no-repeat;
}

#content #filmthumbsscroller
{
	float: left;
	width: 125px;
	height: 436px;
	margin: 30px 0 30px 35px;
}

#content  #filmthumbsscroller #scrollarea
{
	width: 110px;
	height: 435px;
	overflow: auto;
}

#content #qtimeplayer,
#content #dirmovieplayer{
	float: right;
	width: 500px;
	padding: 30px 35px 0 0;
}

/* Wechselnde Homebilder */
body#bd-home p {visibility: hidden;}


/* === [ Left Navigation ] =================================================================================================== */

#navi ul
{
	list-style-type: none;
	font-size: .79em;
	color: #DA2128;
	padding-right: 21px;
	text-indent: -9999em;
}

#navi ul a
{
	color: #fff;
	display: block;
	height: 23px;
}

#navi ul a:hover
{
	color: #ccc;
}


/* Home navigation --------------------------- */

#navi ul#homenav
{
	height: 41px;
	padding: 12px 0 248px 18px;
	background: url('./leftnav/navi_klecks2.png') 0 -50px no-repeat;
}

	#navi ul#homenav li
	{
		height: 15px;
		line-height: 15px;
		padding-top: 14px;
	}

	#navi ul#homenav li#home a {height: 15px; line-height: 15px; background: url('./leftnav/navi_home.png') 0 0 no-repeat;}
	#navi ul#homenav li#home a:hover {background-position: 0 -15px;}
	#navi ul#homenav li#home a#selectnav {background-position: 0 -30px;}


/* Main navigation --------------------------- */

#navi ul#mainnav
{
	height: 191px;
	background: url('./leftnav/navi_klecks2.png') 0 -41px no-repeat;
}

	#navi ul#mainnav li
	{
		height: 23px;
		line-height: 23px;
		padding: 2px 0 5px 0;
	}

	#navi ul#mainnav li#films a {background: url('./leftnav/navi_films.png') top right no-repeat;}
	#navi ul#mainnav li#films a:hover {background-position: 100% -23px;}
	#navi ul#mainnav li#films a#selectnav {background-position: 100% -46px;}

	#navi ul#mainnav li#directors a {background: url('./leftnav/navi_directors.png') top right no-repeat;}
	#navi ul#mainnav li#directors a:hover {background-position: 100% -23px;}
	#navi ul#mainnav li#directors a#selectnav {background-position: 100% -46px;}

	#navi ul#mainnav li#about a {background: url('./leftnav/navi_about.png') top right no-repeat;}
	#navi ul#mainnav li#about a:hover {background-position: 100% -23px;}
	#navi ul#mainnav li#about a#selectnav {background-position: 100% -46px;}

	#navi ul#mainnav li#contact a {background: url('./leftnav/navi_contact.png') top right no-repeat;}
	#navi ul#mainnav li#contact a:hover {background-position: 100% -23px;}
	#navi ul#mainnav li#contact a#selectnav {background-position: 100% -46px;}

	#navi ul#mainnav li#workspace a {background: url('./leftnav/navi_workspace.png') top right no-repeat;}
	#navi ul#mainnav li#workspace a:hover {background-position: 100% -23px;}
	#navi ul#mainnav li#workspace a#selectnav {background-position: 100% -46px;}

	#navi ul#mainnav li#imprint {padding-top: 7px;}
	#navi ul#mainnav li#imprint a {height: 13px; line-height: 13px; background: url('./leftnav/navi_impressum.png') top right no-repeat;}
	#navi ul#mainnav li#imprint a:hover {background-position: 100% -13px;}
	#navi ul#mainnav li#imprint a#selectnav {background-position: 100% -26px;}


/* Auswahl vom Klecks via BODY id --------------------------- */
body#bd-home #navi ul#homenav{background-position: 0 12px;}

body#bd-films #navi ul#mainnav{background-position: 0 0;}
body#bd-directors #navi ul#mainnav{background-position: 0 30px;}
body#bd-about #navi ul#mainnav{background-position: 0 60px;}
body#bd-contact #navi ul#mainnav{background-position: 0 90px;}
body#bd-workspace #navi ul#mainnav{background-position: 0 120px;}
body#bd-imprint #navi ul#mainnav{background-position: 0 150px;}



/* === [ Content ] =================================================================================================== */

#content
{
	overflow: hidden;
}

#content p,
#content address
{
	font-size: .79em;
	line-height: 18px;
	padding: 15px 35px 0 35px;
	color: #5c5757;
}

#content address
{
	width: 40%;
	font-style: normal;
	padding: 25px 0 0 35px;
}

#content p.first,
#content address.first
{
	padding: 35px 35px 0 35px;
}

#content .emailbutton
{
	padding: 0 0 0 35px;
}

#content #errorbox
{
	padding-top: 50px;
}

#content p.formerror
{
	font-weight: bold;
	color: #DA2128;
}

#content p.formsuccess
{
	font-weight: bold;
	color: #090;	
}

#content h2
{
	padding: 400px 75px 0 0;
	line-height: 1.5;
	text-align: right;
	font-size: .79em;
	font-weight: normal;
	color: #5c5757;
}

#content h3
{
	margin: 350px 0 0 350px;
	width: 266px;
	height: 59px;
	line-height: 59px;
	text-align: center;
	font-size: .79em;
	font-weight: normal;
	color: #5c5757;
	background: url('./layout/workspace-button.png') no-repeat;
}

#content h2 a:hover
{
	color: #DA2128;
}

#content h3 a
{
	display: block;
	height: 100%;
	text-indent: -9999em;
}

#content h4,
#content h6{
	padding: 0 0 0 35px;
	line-height: 1.5;
	font-size: 14px;
	font-weight: normal;
	color: #5c5757;
}

#content h6{
	padding: 10px 0 0 0;
	text-align: right;
}

/*  === [ Films & Directors CSS ] ============================================= */

#content #qtimeplayer #moviewrapper,
#content #dirmovieplayer #moviewrapper{
	height: 350px;
}

#content #qtimeplayer #moviewrapper object,
#content #dirmovieplayer #moviewrapper object{
	float: right;
}

/* Filme Thumbs */
#content #filmthumbsscroller dl#thumbs{
	color: #5c5757;
	font-size: .65em;
}

#content #filmthumbsscroller dl#thumbs a:hover img{
	opacity:0.5;
}


#content #filmthumbsscroller dl#thumbs img{
	display: block;
}

#content #filmthumbsscroller dl#thumbs dd{
	padding: 2px 5px 30px 0;
}		

/* Director Liste */
#content #filmthumbsscroller ul#dirlist{
	color: #5c5757;
	font-size: .65em;
	padding-top: 24px;
}

#content #filmthumbsscroller ul#dirlist li{
	padding-bottom: 30px;
}


#content #qtimeplayer ul.filminfo,
#content #dirmovieplayer ul.filminfo{
	padding: 10px 0 0 0;
	font-size: .65em;
	color: #5c5757;
	text-align: right;
	line-height: 1.5;
}


/* === [ Forms ] ============================================= */

#content dl#contactform
{
	float: right;
	width: 322px;
	padding: 35px 35px 0 0;
	font-size: .8em;
	color: #5c5757;
	text-align: right;
}

#content dl#contactform dt
{
	padding: 5px 0 8px 0;
}

#content dl#contactform textarea
{
	width: 312px;
	height: 199px;
	font-size: .9em;
	color: #000;
	overflow: auto;
	resize: none;	/* CSS 3 for Safari to hide the resize button */
}

	#content dl#contactform dd.textareaback
	{
		padding: 10px 5px;
		background: url(/design/contact/textarea.png) 0 0 no-repeat
	}

#content dl#contactform input
{
	background: url(./contact/input.png) 0 0 no-repeat;
	width: 312px;
	height: 26px;
	padding: 10px 5px;
	font-size: .9em;
	color: #000;
}

#content dl#contactform dt#submit
{
	padding: 0 2px 0 0;
}

#content dl#contactform dt#submit input
{
	width: 36px;
	height: 9px;
	padding: 0;
	background-image: none;
}

/* === [ jScrollPane CSS ] ============================================= */

.jScrollPaneContainer{position:relative;overflow:hidden;z-index:1;}
.jScrollPaneTrack{position:absolute;right:0;top:0;height:100%;background:#fff;}
.jScrollPaneDrag{position:absolute;background:#666;overflow:hidden;background:#fff url(/design/layout/scrollbar.png) no-repeat 50% 50%;}
.jScrollPaneDragTop{position:absolute;top:0;left:0;overflow:hidden;}
.jScrollPaneDragBottom{position:absolute;bottom:0;left:0;overflow:hidden;}
a.jScrollArrowUp{display:block;position:absolute;z-index:1;top:0;right:0;text-indent:-5000px;overflow:hidden;height:9px;}
a.jScrollArrowDown{display:block;position:absolute;z-index:1;bottom:0;right:0;text-indent:-5000px;overflow:hidden;height:9px;}