/*
 *
 * Stylesheet for ^SITENAME
 *
 * @section		screen
 * @author		Krzysztof ojniewski
 * @version		1.00
 * @copyright	zaciecie.pl
 * @media		screen
 *
 * 
 * @colordef	black			#0C0402
 * @colordef	dark red		#591F08
 * @colordef	dark orange		#FE7C00
 * @colordef	light orange	#FD8D00
 * @colordef	creme			#FAF7F2
 *
 * @todo 
 */
 
@import "reset.css";
em { font-style: italic}

body {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 12px;
	color: #000;
}
body {
	background: #000 url(../img/body_bg.jpg) center center no-repeat;
	margin: 0;
}
body, html {
	height: 100%;
	margin: 0;
	padding: 0;
}
#wrapper {
	width: 1002px;
	margin: 0 auto;
	min-height: 89%;
	padding-top: 6%;
	position: relative;
}
#nonfooter {
	padding-bottom: 80px;
	position: absolute;
	height: 480px;
	bottom: 3%;
	width: 100%;
	overflow: hidden;
}
#header {
	height: 34px;
	padding-top: 68px;
	font-family: Helvetica, Verdana, Arial, sans-serif;
}
#header img {
	position: absolute;
	left: 42px;
	top: 65px;
}
#header ul {
	position: absolute;
	left: 235px;
	top: 77px;
	width: 300px;
}
#header li {
	display: inline;
	float: left;
	margin-left: 14px;
}
#header li a {
	color: #fff;
	font-size: 14px;
	font-style: italic;
	text-decoration: none;
	white-space: nowrap;
}
#header li a:hover, #header li a.active {color: #ff6600}


#footer {
	bottom: 0;
	color: #959595;
	font: 11px/14px Helvetica, Verdana, Arial, sans-serif;
	padding-bottom: 10px;
	position: absolute;	
	width: 100%;
	height: 15px;
}
#footer a {color: #959595;text-decoration: none}
#footer a:hover {color:#fff}
#footer p {float: left}
#footer h4 {float: right}

#content {
	position: relative;
}
#home #content img {
	border: 1px solid #ff6600;
	float: left;
	position: relative;
	z-index: 999;
}
#home #content .image {
	background: url(../img/image_border.png) no-repeat 0 0;
	float: left;
	margin: 80px 0 0 116px;
	padding: 9px;
	position: relative;
}
#home #content .image span {
	background: url(../img/image_border_2.png) no-repeat bottom right;
	bottom: 0;
	height: 100%;
	position: absolute;
	right: 0;
	width: 100%;
}
#slider1 .panel span.img {
	background-position: center center;
	background-repeat: no-repeat;
	width: 170px;
	height: 216px;
	top: 10px;
	left: 10px;
	z-index:80
	
}

#categories {
	width: 98%;
	padding-top: 75px;
	padding-left: 2%;
}
#categories a {
	color: #fff;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 12px;
	font-style: italic;
	text-decoration: none;
	width: 100%;
}
#categories li {
	width: 157px;
	overflow: hidden;
	margin-right: 5px;
	float: left;
	
}
#categories li a {
	clear: both;
	float: left;
	text-align: left;
	position: relative;
}
#categories li a:hover { color:#FF6600 }
#categories li strong {
	float: left;
	padding-left: 15px;
	height: 25px;
}
#categories li span {
	background: url(../img/category_hover.png);
	width: 157px;
	height: 330px;
	position: relative;
	z-index: 5;
	position: absolute;
	top: 26px;
	left: 0;
}
#categories li span.shadd { background: url(../img/category_shaddow.png)}
#categories li img {
	border: 1px solid #ff6600;
	float: left;
	width: 137px;
	height: 310px;
	position: relative;
	z-index: 6;
	margin: 10px;
}

#content {width: 100%}
#contact-info {
	color:#525252;
	background: url(../img/contact2_jazz.png);
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 12px;
	line-height: 15px;
	height: 255px;
	margin: 115px auto 0;
	position: relative;
	width: 510px;
	padding-top: 25px;
}
#contact-info table img { display: block; float: none; margin: 0 auto }
#contact-info p {margin-top: 7px}
#contact-info dd, #contact-info dt {display: inline;float: left}
#contact-info dd {padding-top:55px;width: 220px}
#contact-info dt {margin: 18px 7px 0 50px;width: 180px}


#sub-pages {
	position: absolute;
	top: 40px;
	left: 85px;
	width: 490px;

}
#sub-pages a {
	float: left;
	height: 14px;
	margin-right: 15px;
	color: #fff;
	font-size: 12px;
	font-style: italic;
	text-decoration: none;
}
#sub-pages a:hover, #sub-pages a.active {color: #ff6600}
/*
	font-size: 0;
	line-height: 0;
	text-indent: -9998%;

}
#sub-pages #jazz-photography a {
	background: url(../img/a_jazz-photo.png);
	width: 93px;
}

#sub-pages #jazz-photography a.active,
#sub-pages #jazz-photography a.act { background-image:url(../img/a_jazz-photo_hover.png)}
#sub-pages #jazz-designs a {
	background:url(../img/a_jazz-designs.png);
	width: 70px;
}
#sub-pages #jazz-designs a.active,
#sub-pages #jazz-designs a.act { background-image: url(../img/a_jazz-designs_hover.png)}

*/
#languages {
	position: absolute;
	width: 340px;
	right: 75px;
	top: 35px;
}
#languages li { display: inline}
#languages li a {
	height: 19px;
	width: 24px;
	font-size: 0;
	line-height: 0;
	text-indent: -9998%;
	margin-right: 7px;
	float: right;
}
#languages #english a { background:url(../img/flag_eng.png)}
#languages #finnish a { background:url(../img/flag_fin.png)}
#languages #french a { background:url(../img/flag_fra.png)}
#languages #german a { background:url(../img/flag_ger.png)}
#languages #polish a { background:url(../img/flag_pol.png)}
#languages #russian a { background:url(../img/flag_rus.png)}
#languages #spanish a { background:url(../img/flag_esp.png)}
#languages #swedish a { background:url(../img/flag_swe.png)}
#languages #italian a { background:url(../img/flag_ita.png)}
#about-info {
	position: absolute;
	height: 340px;
	width: 792px;
	background: url(../img/about_bg.png);
	left: 75px;
	top: 67px;
	font-size: 12px;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	color: #525252;
	padding-left: 20px;
	padding-top: 35px;
	padding-right: 45px;
	line-height: 15px;
}
#about-info p {
	margin-top: 5px;
}
#about-info img {
	float: left;
	margin-right: 10px;
}
#about-info #scroling {
	height: 300px;
	padding-bottom: 20px;
	padding-right: 20px;
	width: 800px;
}
#scroling a {
	color: #fff;
	text-decoration: none;
}
#scroling a:hover { text-decoration: underline}
#about-info #scroling .spacer {
	height: 50px;
	width: 200px;
	float: left;
	clear: both;
}

#main-categories {
	position: absolute;
	right: 45px;
	top: -155px;
	width: 200px;
}
#main-categories li {
	clear: both;
	display: block;
	text-align: right;
}
#main-categories a {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	color: #fff;
	font-size: 13px;
	font-style: italic;
	text-decoration: none;
	white-space: nowrap;
	text-align: right;
	margin-top: 5px;
	float: right;
}
#main-categories a:hover, #main-categories a.active {color: #ff6600}
#slider, .scroll {
	width: 950px;
	height: 240px;
}
#slider {
	position: relative;
	z-index: 2;
	padding-left: 25px;
	padding-right: 25px;
	margin-top: 120px;
}
.scroll {
	overflow: auto;
	position: relative; /* fix for IE to respect overflow */
	clear: left; 
}
.scrollContainer div.panel {
	width: 190px;
	height: 200px; /* change to 560px if not using JS to remove rh.scroll */
	float: left;
	position: relative;
}
.scrollContainer div.panel p {
	display: none;
}
.scrollContainer div.panel img {
	float: left;
	background: url(../img/slider_panel_bg.png);
	width: 169px;
	padding: 10px;
}

.scrollButtons {color: #fff;cursor:pointer;position:absolute;top:105px;z-index: 200}
.scrollButtons.left {left:0px}
.scrollButtons.right {right:0px}
.navigation { position: absolute; top: -23px}
.navigation li { display: inline}

#header ul li a {
	float: left;
	font-size: 0;
	line-height: 0;
	text-indent: -9998%;
	height: 12px;
}
#header ul #nav_home a { background:url(../img/m_home.png);width: 33px}
#header ul #nav_home a.active { background:url(../img/m_home_hov.png)}
#header ul #nav_portfolio a { background:url(../img/m_portfolio.png);width: 44px}
#header ul #nav_portfolio a.active { background:url(../img/m_portfolio_hov.png)}
#header ul #nav_about-jazz a { background:url(../img/m_about.png);width: 62px}
#header ul #nav_about-jazz a.active { background:url(../img/m_about_hov.png)}
#header ul #nav_contact-jazz a { background:url(../img/m_contact.png);width:70px}
#header ul #nav_contact-jazz a.active { background:url(../img/m_contact_hov.png)}
#slider1 { color: #fff }
.stripViewer .panelContainer .panel ul {text-align: left;margin: 0 15px 0 30px}
		
.slider-wrap {
	margin: 20px 0;
	position: relative;
	width: 100%;
}
.csw {width: 100%; height: 460px; overflow: scroll}
.csw .loading {margin: 200px 0 300px 0; text-align: center}

.stripViewer {
	position: relative;
	overflow: hidden; 
	margin: auto;
	width: 950px;
	height: 240px;
	clear: both;
}
		
.stripViewer .panelContainer { 
	position: relative;
	left: 0; top: 0;
	width: 950px;
	list-style-type: none;
	
}
#slider1 {
	height: 240px !important;
	overflow: hidden !important;
}
.stripViewer .panelContainer .panel {
	float:left;
	height: 100%;
	position: relative;
	width: 190px; 
}
.stripViewer .panelContainer .panel .wrapper {padding: 10px}
.stripNav {display: none}
.stripNavL, .stripNavR {
	position: absolute;
	top: 95px;
	text-indent: -9000em;
}		
.stripNavL a, .stripNavR a {
	display: block;
	height: 40px;
	width: 40px;
	z-index: 55;
}
.stripNavL {left: 0}
.stripNavR {right: 0}	
.stripNavL {
	background: url("../img/scroll_left.png") no-repeat left center;
}
.stripNavR {
	background: url("../img/scroll_right.png") no-repeat right center;
}

#slider1 {
	margin-top: 125px;
}
#slider1 .panel {
	position: relative;
	width: 190px;
	height: 270px;
}
#slider1 .panel img {
	position: absolute;
	left: 10px;
	top: 9px;
	z-index: 2;
}
#slider1 .panel p { display: none}
#slider1 .panel span {
	position: absolute;
	top: 1px;
	left:0;
	width: 190px;
	height: 235px;
	z-index: 1;
	
}
#slider1 .panel span.shadow { background:url(../img/galery_image_shaddow.png);}
#slider1 .panel span.hover { background:url(../img/slider_panel_bg.png);}
#slider1 .panel span.hover { display: none}
#leftnav {
	float: left; width: 19px;
}
#leftnav img {
	cursor: pointer; margin-top: 100px;
}
#rightnav {
	width: 19px; position: relative; left: 970px; top: -140px;
}
#rightnav img {
	cursor: pointer;
}