/*

 *

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

}