/* =File: 	main.css
	Site: 	Dapperweb.com
	Author: Bartek Stańkowski (bstankowski.pl)
	Last 	Update: 12.07.2009
   ----------------------------------------------------*/


html, body, div, span, h1, h2, h3, h4, h5, h6, p,
a, abbr, acronym, em, img, strong, 
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%;
	vertical-align: baseline;
	background: transparent;
}
body { line-height: 1; }
a { text-decoration: none; }
blockquote, q { quotes: none;}
ul li { list-style: none; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
legend { display: none; }

/* =Globals
   ----------------------------------------------------*/

html {
	min-height: 100%;
	height: auto;
}

body {
	font: small/1.3 Verdana, "Lucida Sans", sans-serif;
	color: #fff;
	background: #030303 url(../i/body.jpg) left bottom repeat-x;
	text-shadow: 0 0 0 #000;
}

p, ul, ol, dl, pre,
h2, h3, h4, h5, h6 {
	margin-bottom: 0.7em;
}

h2 {
	margin: .5em 0;
	font: 200% "Book Antiqua", "Bookman Old Style", Constantia, Georgia, "Times New Roman", serif;
	font-variant: small-caps;
	text-shadow: 2px 2px 2px #000;
	background: transparent url(../i/h2underline.jpg) left bottom repeat-x;
}

h2 span.before,
h3 span.before {
	display: block;
	margin: 0 0 -1.25em 0.15em;
	padding: 0;
	color: #2E0508; 
}

#footer h2 span.before { color: #210305; }

h3 span.before { margin: 0 0 -1.2em .15em; }

h3 {
	margin-bottom: .5em;
	font: 125% Verdana, sans-serif;
	text-shadow: 2px 2px 2px #000;	
	color: #F2E3E3;
}

a, a:link {
	color: #fff;
	border-bottom: 1px solid #fff;
}

a:visited { 
	color: #E5B9B9; 
	border-color: #E5B9B9;
}

a:hover,
a:active {
	border-bottom: none;
	color: #E5B9B9;
}

textarea, 
input {
	border: none;
	background: none;
	font: 1em/1.3 Verdana, "Lucida Sans", sans-serif;
}

textarea:focus, input:focus { outline: none; }

label {
	display: block;
	padding-bottom: .1em;
	font-weight: bold;
}

input.submit { 
	clear: both;
	display: block;
	width: 121px;
	height: 44px;
	margin-top: 15px;
	padding-bottom: 5px;
	line-height: 36px;
	color: #fff;
	font-size: 1.1em;
	background: transparent url(../i/submits.png) 0 -44px no-repeat;
	cursor: pointer;
}

input.submit:hover,
input.submit:focus {
	background-position: 0 0;
}

ul.form-results {
	margin-top: 1.2em; 
}

ul.form-results li {
	list-style: disc inside; 
}

table { width: 100%; }

td, th {
	padding: .4em .6em;
	border: 1px solid #FFF2F2;
}

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

#wrap {
	position: relative;
	width: 890px;
	margin: 0 auto;
	background: #4E0F0A url(../i/bg.jpg) 0 0 no-repeat;
}

body.no-maam #wrap,
body.no-maam h1 a span {
	background-image: url(../i/bg2.jpg);
}

#top {
	height: 75px;
	position: relative;
}

#content {
	min-height: 500px;
	max-height: 631px;
	padding: 0 20px 25px 382px;
	font-size: 100%;
}

#dapperweb-home #content { padding-right: 40px;}
body.no-maam #content { padding-left: 20px; }
#dapperweb-contact #content { padding-right: 10px; }
#dapperweb-portfolio #content { height: 551px; }

/* =Top
   ----------------------------------------------------*/
   
h1 a {
	position: absolute;
	top: 14px;
	left: 19px;
	display: block;
	width: 104px;
	height: 49px;
	font-size: .6em;
	color: #fff;
	line-height: 30px;
	overflow: hidden;
	border: none;
}

h1 a:link { border: none; }
   
h1 a span {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 116px;
	height: 49px;
	background: transparent url(../i/bg.jpg) -19px -14px no-repeat;
}

#top ul { 
	position: absolute;
	top: 24px;
	right: 75px;
	width: 435px;
	height: 29px;
	background: transparent url(../i/nav.jpg) 0 0 no-repeat;
}
   
body.pl #top ul {
	right: 49px;
	width: 461px;
	background-image: url(../i/nav_pl.jpg);
}
   
#top ul li { display: inline; }
   
#top ul li a { 
	position: absolute;
	top: 0px;
	left: 0px;
	display: block;   
	height: 28px;
	color: #fff;
	font-size: .9em;
	border-bottom: none;
	text-decoration: none;
}

#top ul li a span { 
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 29px;
	background: transparent url(../i/nav.jpg) 0 0 no-repeat;
	cursor: pointer;
}

body.pl #top ul li a span { background-image: url(../i/nav_pl.jpg); }

li#home a:link,
li#home a:visited {
	width: 57px;
}

#dapperweb-home #home a span,
li#home a:hover span,
li#home a:active span {
	background-position: 0 -29px;
}

li#portfolio a:link,
li#portfolio a:visited {
	left: 77px;
	width: 105px;
	background-position: -77px 0;
}

li#portfolio a:link span,
li#portfolio a:visited span {
    background-position: -77px 0;
}

#dapperweb-portfolio #portfolio a span,
li#portfolio a:hover span,
li#portfolio a:active span {
	background-position: -77px -29px;
}

li#client a:link,
li#client a:visited {
	left: 199px;
	width: 124px;
	background-position: -199px 0;
}

li#client a:link span,
li#client a:visited span {
	background-position: -199px 0;
}

body.pl li#client a:link,
body.pl li#client a:visited {
	left: 199px;
	width: 152px;
	background-position: -199px 0;
}

body.pl li#client a:link span,
body.pl li#client a:visited span {
	background-position: -199px 0;
}

#dapperweb-client #client a span,
body li#client a:hover span,
body li#client a:active span {
	background-position: -199px -29px;
}

#dapperweb-client.pl #client a span,
body.pl li#client a:hover span,
body.pl li#client a:active span {
	background-position: -199px -29px;
}

li#contact a:link,
li#contact a:visited {
	left: 340px;
	width: 90px;
	background-position: -340px 0;
}

li#contact a:link span,
li#contact a:visited span {
	background-position: -340px 0;
}

#dapperweb-contact #contact a span,
li#contact a:hover span,
li#contact a:active span {
	background-position: -340px -29px;
}

body.pl li#contact a:link,
body.pl li#contact a:visited {
	left: 368px;
	width: 92px;
	background-position: -340px 0;
}

body.pl li#contact a:link span,
body.pl li#contact a:visited span {
    background-position: -368px 0;
}

#dapperweb-contact.pl #contact a span,
body.pl li#contact a:hover span,
body.pl li#contact a:active span {
    background-position: -368px -29px;
}
   
#dapperweb-home #home a span,
#dapperweb-portfolio #portfolio a span,
#dapperweb-client #client a span,
#dapperweb-contact #contact a span {
    cursor: default;
}

#lang {
	position: absolute;
	width: 44px;
	height: 63px;
	top: 0;
	right: -49px;
	padding: 10px 0 0 5px;
	background: #000 url(../i/flags-bg.gif) 0 0 no-repeat;
}

#lang a {
	display: block;
	width: 32px;
	height: 22px;
	margin-bottom: 3px;
	border: none;
	opacity: .5;
}

#lang a:hover,
#lang a:focus,
#lang a.active { opacity: 1 }

/* =Content
   ----------------------------------------------------*/

#intro {
	margin-bottom: 2em;
	font-size: 1em;
	text-shadow: 1px 1px 1px #000;
}

#dapperweb-home #content ul { margin-left: 15px; }

#dapperweb-home #content ul li {
	margin-bottom: 5px;
	list-style: disc outside;
}

/* 
    portfolio
*/
  
.portfolio-cat {
	float: left;
	width: 370px;
	margin-top: 20px;
}

.portfolio-cat.internet {
	margin: 20px 26px 0 42px;
}

.portfolio-cat dt {
	font-size: 350%;
	font-family: "Book Antiqua", "Bookman Old Style", Constantia, Georgia, "Times New Roman", serif;
	font-variant: small-caps;
}

.portfolio-cat dt a {
	position: relative;
	display: block;
	width: 370px;
	height: 302px;
	background: transparent url(../i/portfolio-grafika.png) 0 40px no-repeat;
	border: none;
	text-shadow: 2px 2px 2px #000;
}

.portfolio-cat.internet  dt a {
	background-image: url(../i/porftolio-internet.png);
	background-position: 0 0;
}

.portfolio-cat dt a:visited { color: #fff; }
.portfolio-cat dt a:hover { opacity: .7; }

.portfolio-cat dt a span {
	position: absolute;
	left: 0;
	bottom: 15px;
	display: block;
	width: 100%;
	text-align: center;
}

.portfolio-cat dd {
	font-size: 120%;
	text-transform: uppercase;
	text-align: center;
}

/* gallery */

.description h6 {
	text-decoration: underline;
	font-variant: small-caps;
	font-size: 120%;
}

.description li {
	list-style: disc inside;
}

.thumbs-wrap {
	width: 860px;
	height: 385px;
	margin: 0 auto;
	padding-top: 10px;
	overflow: auto;
}

.thumbs-wrap .thumb {
	position: relative;
	float: left;
	width: 255px;
	margin: 0 8px 10px 0;
	padding: 8px;
	background-color: #3B0300;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.thumbs-wrap .thumb a {
	border: none;
    width: 255px;
    height: 180px;
    overflow: hidden;
}

.thumbs-wrap .thumb .description {
	width: 231px;
	height: 156px;
	padding: 12px;
}

.thumbs-wrap h6 {
	color: #FFFAE8;
}

.thumbs-wrap-inner,
.js .thumbs-wrap {
	width: 835px; 
	overflow: hidden;
}

.js .thumbs-wrap {
	position: absolute;
	top: 0;
	left: 0;
	height: 412px;
}

.js .thumbs-wrap li {
	float: left;
	width: 829px;
	height: 412px;
}

.js .thumbs-wrap .thumb li {
	width: 100%;
	height: 1.2em;
}

.js .thumbs-wrap .thumb {
    height: 180px;
    cursor: pointer;
}

.js .thumbs-wrap .thumb .description,
.js .thumbs-wrap .thumb a {
	position: absolute;
	top: 8px;
	left: 8px;
	display: block;
}

.js .thumbs-wrap .thumb a {
	text-align: center;
	vertical-align: middle;
}

.js .thumbs-wrap .thumb a img {
	vertical-align: middle;
}

.js .thumbs-wrap .thumb a span {
	position: absolute;
	top: 0;
	left: 0;
	width: 255px;
	height: 180px;
	background: #1C0300;
}

.js .thumbs-wrap .thumb .description {
	background: none;
}

.js #thumbs-wrap-out {
	position: relative;
	width: 829px;
	height: 412px;
	margin: 0 auto 10px;
	overflow: hidden;
}

#thumbs-wrap-out .ajax-loader {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -20px;
	margin-top: -20px;
}

#portfolio-nav {
	width: 832px;
	margin: 10px auto 0;
}

#portfolio-nav ul { 
	margin-left: 2px; 
	overflow: hidden; 	
	width: 780px;
	margin: 0 auto;
	padding-top: 10px;
}

#portfolio-nav li {
	float: left;
	width: 197px;
	margin-right: 5px;
	padding: 3px;
	text-align: center;
	background-color: #6F0D08;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
	/* temp */
	width: 215px;
	margin-right: 58px;
}

#portfolio-nav li.last-nav { margin-right: 0; }

.pager a,
#portfolio-nav li a {
	display: block;
	font-size: 140%;
	color: #D19898;
	border: none;
	padding: 3px 6px;
	background-color: #81120D;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

#portfolio-nav li a:hover,
#portfolio-nav li a:focus,
#portfolio-nav li a:active,
#portfolio-nav li.active a,
.pager a.active {
	background-color: #981712;
	color: #fff;
}

.pager {
	width: auto;
	margin: 5px auto 2px;
}

.pager li,
#portfolio-nav li ul li {
	float: left;
	width: auto;
	margin-right: 5px;
}

.pager li a,
#portfolio-nav li ul li a {
	padding: 5px 8px;
	font-size: 75%;
	font-weight: bold;
}

#portfolio-nav li.active li.active a,
#portfolio-nav li.active li a:hover,
#portfolio-nav li.active li a:focus,
.pager a:hover, .pager a:focus,
.pager a:active, .pager a.active, 
.pager li.active a {
	background-color: #CEB9B9;
	color: #6F0D08;
}

#dapperweb-portfolio h2 em { font-style: normal; }

#printing-wrap { 
	margin-top: 43px; 
	overflow: hidden;
	font-size: 130%;
}

#printing-wrap img { float: left; }
#printing-wrap .desc {
	float: right;
	width: 371px;
}

.js .thumbs-wrap #printing-wrap li {
	float: none;
	width: 100%;
	height: auto;
	margin-left: 1em;
	list-style-type: disc
}


/*
    contact
*/

#info { overflow: hidden; }

#info div:last-child {
	width: 100%;
	margin: 12px 0;
}

#info dl { overflow: hidden; }

#info dt,
#info dd {
	float: left;
	margin-bottom: 2px;
}

#info dt {
	clear: left;
	width: 67px;
}

.textarea-wrap {
	width: 433px;
	height: 157px;
	margin: .2em 0 1em;
	padding: 10px;
	background: transparent url(../i/textarea.png) 0 0 no-repeat;
}

.textarea-wrap textarea {
	width: 433px;
	height: 157px;
}

.text-wrap {
	width: 205px;
	height: 42px;
	line-height: 46px;
	margin: 0 0 1em;
	padding: 0 10px;
	background: transparent url(../i/inputtext.png) 0 0 no-repeat;  
}

#dapperweb-contact .text-wrap { margin-bottom: 0; }

.text-wrap input { width: 205px; }

fieldset div {
	width: 229px;
	float: left;
}

#dapperweb-register fieldset div {
	clear: both;
	margin-bottom: .8em;
}

.message {
	float: left;
	margin-top: 1em;
	padding: 10px;
	background-color: #470101;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	opacity: .7;
}
.submit-wrap { width: 100%; }

#contact-form p.message,
#client-contact-form p.message {
	margin: 17px 0 0 15px;
}

#newsletter p.message { 
	margin: 1.3em 0 0 10px;
	background-color: #840606;
	color: #fff;
}

#contact-form .submit,
#client-contact-form .submit,
#newsletter .submit {
	float: left;
}

div.required-icon {
    position: absolute;
    bottom: -9px;
    right: -8px;
    background: transparent url(../i/required.png) 0 0 no-repeat;
}

#dapperweb-register fieldset .required-icon,
#dapperweb-register fieldset .ajax-loader {
    float: none;
    width: 32px;
}

fieldset .required-icon {  
    width: 180px;
    height: 32px;
    width: 24px;
    height: 24px;
    display: none;
}

div.ajax-loader {
	width: 32px;
	height: 32px;
	margin: 16px 0 0 15px;
	padding: 4px;
	background-color: #000;
	opacity: .8;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	display: none;
}

#register-user div.ajax-loader {
	float: left;
    clear: none;
    margin-top: 2px;
    margin-bottom: 0;
}

#register-user .submit {
	float: left;
    margin-top: 0;
}

#register-user .message {
	margin-top: 3px;
	margin-left: 10px;
}

h3.org { display: none; }


/*
    client
*/

.client-content {
	clear: both;
    padding-top: 1em;
	overflow: hidden;
}

.client-view-switcher {
    float: left;
    width: 75%;
	overflow: hidden;
}

h3.logout {
    float: right;
	margin-top: -48px;
    padding: 5px 8px;
	background-color: #F7DEDE;
    font-size: 125%;
    line-height: 1.2;
    opacity: .5;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

h3.logout a {
	display: block;
    border-bottom: none;
	color: #000;
}

h3.logout:hover { opacity: .6; }
h3.logout span.before { display: none; }

.client-view-switcher h3 span.before { color: #333; }

#client-contact-form {
	float: right;
	width: 455px;
}

#dapperweb-client #content form { margin: 2em 0 1em; }

/*
	client preview
*/

#client-thumbs {
	position: relative;
	float: left;
	width: 366px;
	overflow: hidden;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background-color: #3B0300;
}

#client-thumbs #thumbs-wrap-out,
#client-thumbs ul.thumbs-wrap,
#client-thumbs ul.thumbs-wrap li {
	width: 100%;
	padding: 0;
	width: 350px;
}

#client-thumbs .thumbs-wrap .thumb {
	margin: 0 auto;
	background: none;
	padding: 8px 0 0;
}

#client-thumbs .thumbs-wrap .thumb,
#client-thumbs .thumbs-wrap .thumb a,
#client-thumbs .thumbs-wrap .thumb span,
#client-thumbs .description {
	width: 350px;
	height: 380px;
}

#client-thumbs .thumbs-wrap { height: 412px; }
.js #client-thumbs #thumbs-wrap-out { width: 350px; height: 389px; }

.js #client-thumbs ul.thumbs-wrap {
	height: 389px;
	margin-bottom: 10px;
}

.js #client-thumbs .thumbs-wrap li {
	width: 350px;
	height: auto;
	margin-right: 8px;
}

.js  #client-thumbs .thumbs-wrap .thumb a {
	left: 0
}

#client-thumbs .checkbox-wrap {
	float: left;
	width: 60%;
	margin-left: 8px; 
}

#client-thumbs .pager {
	float: right;
	margin: 0 3px;
}

#client-thumbs .pager li a {
	float: left;
	display: block;
}

div.checkbox-wrap {
	clear: both;
	margin-bottom: 10px;
}

div.checkbox-wrap input,
div.checkbox-wrap label,
a.checkbox,
span.pseudo-label {
	float: left;
    margin-right: 10px;
    font-size: 110%;
}

a.checkbox {
	display: block;
    width: 23px;
    height: 23px;
	margin-right: 0;
    background: transparent url(../i/checkbox.png) 0 0 no-repeat;
    border: none;
}

a.checkbox.hover,
a.checkbox:hover,
a.checkbox:focus {
	background-position: 0 -23px;
}

a.checkbox.checked { background-position: 0 -46px; }

span.pseudo-label {
	padding-left: 10px;
    font-weight: bold;
    line-height: 1.8em;
    cursor: pointer;
}


#dapperweb-contact p.info {
	margin-bottom: 2em
}

/* =Footer
   ----------------------------------------------------*/

#footer {
    clear: both;
	overflow: hidden;
    background-color: #4E0F0A;
    background: transparent url(../i/footerbg.jpg) 0 0 repeat-y;
    border-top: 1px solid #000;
}

#inner-foot { background: transparent url(../i/footer.jpg) left bottom no-repeat; }
   
#footer h2 {
    width: 100%;
	margin-top: 0;
	padding-bottom: 7px;
    background: transparent url(../i/h2underline2.jpg) left bottom repeat-x;
}

#newsletter, #about { padding: 20px 20px 35px; }

#newsletter {
	float: left;
	width: 340px;
	padding-right: 0;
}

#about {
	float: right;
	width: 480px;
}

#footer p { color: #DBAA95; }

p#copy {
	clear: both;
	height: 30px;
	margin-bottom: 0;
	padding-top: 10px;
	text-align: center;
	overflow: hidden;
}

#newsletter div.text-wrap {
	width: 214px;
	height: 46px;
	margin-bottom: 0;
	padding: 0 10px;
	line-height: 46px;
	background: transparent url(../i/footer_inputtext.jpg) 0 0 no-repeat;
}

#newsletter div.text-wrap input {
	width: 214px;
	line-height: 30px;
	background: none;
	border: none;
	font-size: 1.2em;
}

div#black {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 5px 15px;
	font-size: 130%;
	color: #fff;
	background-color: #2E2C2C;
	border: 1px solid #fff;
	cursor: pointer;
}

div#black:hover {
	background-color: #fff;
	color: #2E2C2C;
}