/*
Author:           Vellkan Design Studio Igor Chudy
Author URI:       http://www.vellkan.pl/
Version:	   1.0
Project: Vellkan Design Studio Portfolio
Description: 
*/

body {margin: 0; padding: 0; width: 100%; height: 100%; background: #191611 url(../images/Bck.png) left top repeat-x;}
html, body {width: 100%;}

/* Reset ---------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, 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;
	font-weight: inherit;
	font-family: inherit;

}

:focus {
	outline: 0;
}

blockquote, q {
	quotes: "" "";
}

/* Custom ----------------------------------------------------------------------- */

img {border: 0;}
.clr {clear: both;}

.ColorLine {position: absolute; right: 0; width: 600px; height: 50px; background: url(../images/ColorLine.png) 0 0 repeat-x;}
#Container {margin: 0 auto 0 auto; width: 978px; }
#Top {height: 112px; background: url(../images/Top.png) center top no-repeat;}
#Top ul { position: relative;margin: 60px 0 0 420px; float: left; display: block; width: 540px; height: 36px; list-style: none; overflow: hidden;}
#Top ul li {display: block; float: left; width: 90px; height: 36px; position:relative;}
#Top ul li a {display: block; float: left; width: 90px; height: 36px; overflow: hidden; z-index: 10; position: relative;}
#Top ul li a img {margin-top: -36px;}
#Top ul li a:hover img {margin-top: 0;}
#Top ul li.selectedLava  a img {margin-top: 0;}
#Top ul li.backLava { background: url(../images/MenuLava.png) left center no-repeat; width: 90px; height: 36px; z-index: 0; position: absolute; }
#Top ul li.back .leftLava { background: url(../images/MenuLava.png) left center no-repeat; height: 36px; margin-right: 90px; /* 7px is the width of the rounded shape */}

#HomeBaner {margin: 47px 0 15px 0; height: 317px; background: url(../images/HomeBaner.png) center top no-repeat;}
#HomeBaner a {position: relative; top: 280px; left: 533px;}
#PortfolioBaner {margin: 47px 0 15px 0; height: 204px; background: url(../images/PortfolioBaner.png) center top no-repeat;}
#WebsitesBaner {margin: 47px 0 15px 0; height: 204px; background: url(../images/WebsitesBaner.png) center top no-repeat;}
#AuctionsBaner {margin: 47px 0 15px 0; height: 204px; background: url(../images/AuctionsBaner.png) center top no-repeat;}
#IDBaner {margin: 47px 0 15px 0; height: 204px; background: url(../images/IDBaner.png) center top no-repeat;}
#OfferBaner {margin: 47px 0 15px 0; height: 204px; background: url(../images/OfferBaner.png) center top no-repeat;}
#ContactBaner {margin: 47px 0 15px 0; height: 204px; background: url(../images/ContactBaner.png) center top no-repeat;}

#FooterBck {padding: 41px 0 0 0; width: 100%; height: 171px; background: url(../images/FooterBck.png) top repeat-x;}
#Footer {margin: 0 auto 0 auto; height: 130px; width: 978px; background: url(../images/Footer.png) left top no-repeat; clear: both;}
#Footer p {font: normal 11px Tahoma, Verdana; color: #474135; line-height: 17px;}
#Footer p.Copyright { position: relative; left: 110px; top: 40px; float: left; width: 150px; height: 60px; }
#Footer p.Stats { position: relative; left: 328px; top: 40px; float: left; width: 150px; height: 60px; }
#Footer p.Valid { position: relative; left: 500px; top: 40px; float: left; width: 150px; height: 60px;  text-align: right;}
#Footer p a {color: #69614E; text-decoration: none;}
#Footer p a:hover {color: #857A63; text-decoration: underline;}

#Content {margin: 0 auto 20px auto; padding: 0; width: 948px; clear: both; overflow: hidden; }
#Content p {margin: 10px 20px 15px 15px; font: normal 12px/19px "Trebuchet MS", Tahoma; color: #c0bb9c; }
#Content span.imp {color: #febf01;} 
#Content h2 {font: normal 22px Helvetica, Tahoma; color: #c0bb9c;}
#Content.Offer {margin-top: 20px; background: url(../images/OfferWebdesign.png) right top no-repeat;}
#Content.Offer p {width: 700px;}

#ContentLeft {width: 705px; float: left; background: url(../images/Sidebar.png) right top repeat-y; }
#ContentLeft p {margin: 10px 20px 15px 15px; font: normal 12px/19px "Trebuchet MS", Tahoma; color: #c0bb9c; }
#ContentLeft span.imp {color: #febf01;} 
#ContentLeft .Signature {margin: 20px 0 40px 12px; display: block;}
#ContentLeft .Headers {margin: 0 0 5px 0;}
#ContentLeft a.Solutions {margin: 10px 0 10px 15px; width: 651px; height: 114px; display: block; float: left; }

#Sidebar {width: 235px; float: right; }
#Sidebar ul {margin: 12px 0 35px 15px; list-style:none;}
#Sidebar ul li {margin: 15px 0 0 0; font: normal 11px "Lucida Grande", "Lucida Sans Unicode", Verdana; background: url(../images/ListPoint.png) left center no-repeat; padding-left: 18px; color: #eae4bf;}
#Sidebar ul li a {padding: 1px 2px 1px 2px; color: #eae4bf; text-decoration: none;}
#Sidebar ul li a:hover {background: #febf01; color: #0b0b0b;}

#Sidebar a.GetInEmail {margin: 10px 0 0 20px; float: left; display: block; width: 158px; height: 29px; overflow: hidden;}
#Sidebar a.GetInPhone {margin: 10px 0 0 55px; float: left; display: block; width: 116px; height: 29px; overflow: hidden;}
#Sidebar a.GetInEmail:hover img {margin-top: -29px;}
#Sidebar a.GetInPhone:hover img {margin-top: -29px;}

ul#Offer { margin: 20px 0 0 10px; padding: 0; list-style-type: none;} 
ul#Offer li {margin: 15px 15px 15px 0; padding: 18px 0 18px 0px; border-top: 1px dashed #2d281e; border-bottom: 1px dashed #2d281e;}
ul#Offer li h3 {color: #febf01; margin: 3px 0 4px 0px; font: normal 21px "Century Gothic", Verdana;}
ul#Offer li span {margin: 5px 190px 5px 0px; display: block; color: #C0BB9C; font: normal 11px/18px Verdana, Arial; text-align: justify;}
ul#Offer li span a {padding: 1px 2px; color: #febf01; text-decoration: none;}
ul#Offer li span a:hover {background: #febf01; color: #000;  }

ul#Offer li.Webdesign {background: url(../images/Webdesign.png) right center no-repeat;}
ul#Offer li.ID {background: url(../images/ID.png) right center no-repeat;}
ul#Offer li.W3C {background: url(../images/W3C.png) right center no-repeat;}
ul#Offer li.CMS {background: url(../images/CMS.png) right center no-repeat;}
ul#Offer li.Allegro {background: url(../images/Allegro.png) right center no-repeat;}
ul#Offer li.SEO {background: url(../images/SEO.png) right center no-repeat;}

#Online {width: 280px; float: left; }
#Auctions {margin: 0 0 0 52px; width: 280px; float: left;}
#Brand {width: 280px; float: right; }
#Online, #Auctions, #Brand {border-bottom: 3px solid #191611;}
#Online:hover, #Auctions:hover, #Brand:hover {border-bottom: 3px solid #2b261d;}
#Online ul, #Auctions ul, #Brand ul {margin: 15px 0 30px 30px;  list-style: none;}
#Online ul li, #Auctions ul li, #Brand ul li {margin: 10px 0 0 0; font: normal 10px Tahoma; color: #615B3F; }
#Online ul li a, #Auctions ul li a, #Brand ul li a {font: normal 11px "Lucida Grande"; text-decoration: none; color: #c0bb9c; padding: 1px 3px 1px 12px; }
#Online ul li a:hover, #Auctions ul li a:hover, #Brand ul li a:hover {background: url(../images/PortfolioList.png) left center no-repeat; color: #febf01; }
/* #febf01*/

.Project {position: relative; width: 948px; height: 273px; float: left; margin: 0; overflow: hidden;}
.Project img {position: absolute; left:0; top: 0; width: 948px; height: 273px; }
.Project div.Content {display: block; position: absolute; left:0; top: 240px; width: 948px; height: 120px; background: url(../images/ProjectSpan.png) repeat; color: #fff; overflow: hidden; }
.Project div.Content h3 {display: block; margin: 3px 0 0 10px; font: normal 22px Helvetica; color: #febf01;}
.Project .Content .Left {float: left; width: 580px; color: #fff; padding: 10px; font: normal 10px Verdana; line-height: 20px;}
.Project .Content .Left p {font-weight: bold; color: #fff;}
.Project div.Content div.Left a {padding: 1px 12px 1px 2px; font: normal 11px Verdana; color: #febf01; background: url(../images/PortfolioList.png) 146px 4px no-repeat; text-decoration: none;}
.Project div.Content div.Left a:hover { background: #febf01 url(../images/solutions-list.png) 146px 4px no-repeat; color: #0b0b0b;}
.Project div.Content div.Right {float: Right; width: 340px; }
.Project div.Content div.Right ul.solutions {margin: 13px 0 19px 25px; list-style: none; display: block;}
.Project div.Content div.Right ul.solutions li {margin: 5px 0 5px 0; padding: 0 0 0 14px; color: #febf01; font: normal 11px Verdana; background: url(../images/solutions-list.png) 0 4px no-repeat; }


ul#Projects {margin: 0; display: block; list-style: none;}
ul#Projects li.Project {margin: 0; padding:0;  }
ul#Projects li.BackTop {margin: 0 0 20px 0; padding: 0; float: right;}
ul#Projects li.BackTop a {margin: 0; padding: 3px 8px 3px 8px; float: right; color: #febf01; background: #020201; font: normal 12px Tahoma; text-decoration: none;}
ul#Projects li.BackTop a:hover {background: #febf01; color: #0b0b0b;}


#ContactLeft {margin: 20px 0 0 11px; width: 300px;  float: left;}
#ContactLeft img {display: block; margin: 0 0 10px 0;}
#ContactLeft a.vCard {margin: 0 0 0 15px; padding: 1px 4px 1px 4px; color: #febf01; font: normal 12px "Trebuchet MS", Tahoma; text-decoration: none; }
#ContactLeft a.vCard:hover {background: #febf01; color: #0b0b0b;}
#ContactLeft ul {margin: 9px 7px 15px 17px; list-style: none; display: block; }
#ContactLeft ul li {margin: 12px 0 12px 0; color: #4e4434; font: normal 11px Verdana; display: block; height: 20px;}
#ContactLeft ul li span {color: #eae4bf; font-size: 13px;}
#ContactLeft ul li a {padding: 0 2px 0 2px; color: #eae4bf; text-decoration: none; font-size: 13px;}
#ContactLeft ul li a:hover {background: #febf01; color: #0b0b0b;}

#ContactRight {margin: 20px 0 0 0; float: right; width: 600px; }
#ContactRight img {display: block; margin: 0 0 30px 0;}
#ContactRight p {display: block; clear: both;  }
#ContactRight p label {color: #4e4434; width: 120px; display: block; float: left; padding: 8px 0 0 0; margin: 0 10px 0 0; text-align: right; font: bold 11px Tahoma;}
#ContactRight p input, #ContactRight p textarea {background: #2e2923; border: 1px solid #13100D; width: 367px; padding: 4px; color: #febf01; font: normal 12px Tahoma;}
#ContactRight input.Submit {margin: 0 0 0 130px;}
#ContactRight input.Submit, #ContactRight input.Reset  {width: 150px; height: 30px; background: #211D16; color: #565656; font: bold 11px Tahoma;}
#ContactRight input.Submit:hover, #ContactRight input.Reset:hover {background: #febf01; border: 1px solid #000; color: #232323;}
#ContactRight h2 {color: #c0bb9c;}

.LV_validation_message{ font: normal 11px Verdana; margin:0 0 0 15px; }
.LV_valid { color:#00CC00; background: url(../images/OK.png) no-repeat; margin: 0 0 0 9px; padding: 0 20px 3px 0; }
.LV_invalid { color:#00CC00; background: url(../images/Wrong.png) no-repeat; margin: 0 0 0 9px; padding: 0 20px 3px 0;}  

#ContactForm .LV_valid_field, #ContactForm input.LV_valid_field:hover, #ContactForm input.LV_valid_field:active { border: 1px solid #00CC00;}
#ContactForm textarea.LV_valid_field, #ContactForm textarea.LV_valid_field:hover, #ContactForm textarea.LV_valid_field:active { border: 1px solid #00CC00;}
#ContactForm .LV_invalid_field, #ContactForm input.LV_invalid_field:hover, #ContactForm input.LV_invalid_field:active {border: 1px solid #CC0000;} 
#ContactForm textarea.LV_invalid_field, #ContactForm textarea.LV_invalid_field:hover, #ContactForm textarea.LV_invalid_field:active { border: 1px solid #CC0000;}  

#Contact span.Success {margin: 10px auto 20px auto; display: block; height: 128px; width: 561px; background: url(../images/Success.png) 0 0 no-repeat; }
#Contact span.Error {margin: 10px auto 20px auto; display: block; height: 128px; width: 561px; background: url(../images/Error.png) 0 0 no-repeat; }
#Contact p.MailInfo {margin: 5px 0 0 10px ; text-align: center;}
#Contact p.MailInfo a {padding: 1px 2px 1px 2px;  color: #0092DC; border-bottom: 1px solid #CECECE;border-top: 1px solid #CECECE; background: #F2F2F2; font: bold 12px Helvetica, Arial; text-decoration: none;}
#Contact p.MailInfo a:hover {color: #FFF; background: #0092DC; border: 0;}