/* LAYOUT */ /* ----------------------------------------- */ /* General Classes */ .hide {display:none;} .clear {clear:both;} /* Body & Wrapping */ body {background:#101112 url(../img/bg.jpg) repeat-y 50% 0; cursor:default; color: #fff; font-family: Tahoma, Arial; font-size: 11px;} #wrapper {width:949px; margin:0 auto;} /* Header Section */ #header {height:143px; background:transparent url(../img/header/header.jpg) no-repeat 0 0; position:relative;} #logo {width:231px; height:82px;background:transparent url(../img/header/citystudio-logo.gif) no-repeat 0 0; margin:0; top:5px; left: 16px; text-indent:-9999px; position:absolute;a} #header ul {margin:0; position:absolute; top:93px; font-family: Verdana; font-size:12px;} #header ul li {float:left;} #header ul li a {width:122px; height:36px; display:block; text-align: center; line-height: 36px; background:#393939; color: #fff; position: relative;} /*Default State*/ #header ul li.page-item a {width:122px; background-color:#393939; background-position: 0 0; background-repeat: no-repeat;} #header ul li.page-item-2 a {background: url(../img/menu/a-home.gif);} #header ul li.page-item-4 a {background: url(../img/menu/a-portfolio.gif);} #header ul li.page-item-5 a {background: url(../img/menu/a-uslugi.gif);} #header ul li.page-item-6 a {background: url(../img/menu/a-referencje.gif);} #header ul li.page-item-7 a {background: url(../img/menu/a-contact.gif);} /*Hover State*/ #header ul li a:hover {background-position:0 -36px !important;} /*Active State*/ #header ul li.current_page_item a, #header ul li.current_page_item a:hover {height:41px; background-position:0 -72px !important;} /*Slow Fade Mod*/ #header ul li a span {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; cursor: pointer;} #header ul li a.slowfade_mod {background-position:0 -36px;} #header ul li.page-item a span {width:122px; background-color:#393939; background-position: 0 0; background-repeat: no-repeat;} #header ul li.page-item-2 a span {background: url(../img/menu/a-home.gif);} #header ul li.page-item-4 a span {background: url(../img/menu/a-portfolio.gif);} #header ul li.page-item-5 a span {background: url(../img/menu/a-uslugi.gif);} #header ul li.page-item-6 a span {background: url(../img/menu/a-referencje.gif);} #header ul li.page-item-7 a span {background: url(../img/menu/a-contact.gif);} #header ul li.current_page_item a span {height:41px; background-position:0 -72px !important;} #breadcrumbsblock {width: 949px; height: 102px; position: relative; background:transparent url(../img/header/breadcrumbs.jpg) no-repeat 0 0; font: 11px Verdana;} #breadcrumbsblock #breadcrumbsholder {position: relative; top: 9px; left: 11px; display: block; width: 557px; height: 19px; background: #000; padding: 0 0 0 14px; color: #fff;} #breadcrumbsholder span.intro {color: #f09328; padding: 0 5px 0 0;} #breadcrumbsholder p {display: inline;} #breadcrumbsholder strong {font-weight: normal;} #breadcrumbsholder a {color: #fff;} #breadcrumbsholder a:hover {color: #f09328;} /* Bottom */ #bottom {width:949px; background:#000 url(../img/footer/bottom.gif) no-repeat 0 0; float:left;} #bottom-wrapper {width:945px; padding:12px 2px 12px 2px; margin:6px 0 0 0; background: url(../img/footer/bottom-wrapper.gif) no-repeat 0 100%; float:left;} #bottom-left-col, #bottom-right-col {float: left; width: 526px; padding: 0px 22px 10px; position: relative;} #bottom-right-col {float: right; width: 314px; text-align: center;} /*Left Col*/ #bottom-left-col h2 {width:137px; height: 24px; background:#000 url(../img/footer/h2-fast-contact.gif) no-repeat 0 0;} #bottom p {font-size: 11px;} #bottom-left-col span {color: #fc8701;} #bottom-left-col a.logo {display: block; text-indent: -9999px; width: 82px; height: 31px; margin: 5px 0 0; background: #000 url(../img/footer/a-bottom-logo.gif) no-repeat 0 0;} #bottom-left-col .spamemail {color: #fff;} #bottom-left-col #twitter {display: block; width: 180px; height: 15px; text-indent: 0px; background: #000 url(../img/footer/twitter.gif) no-repeat 100% -105px; color: #fff; font-size: 11px; padding-top: 90px; position: absolute; bottom: 0px; right: 10px; text-align: right;} #bottom-left-col #twitter:hover {background-position: 100% 0;} /*Right Col*/ #bottom-right-col h2 {width:277px; height:21px; background:#000 url(../img/footer/h2-our-photoprojects.gif) no-repeat 0 0; margin: 0 auto;}s #bottom-right-col #our-photoprojects {padding: 10px 0 0;} #bottom-right-col #our-photoprojects li {padding: 40px 0 0;} #bottom-right-col #our-photoprojects li a {display: block; text-indent: -9999px; margin: 0 auto;} #bottom-right-col #our-photoprojects #sm a {width: 146px; height: 47px; background:#000 url(../img/footer/a-swiatlemmalowane.gif) no-repeat 0 0;} #bottom-right-col #our-photoprojects #sgf a {width: 214px; height: 40px; background:#000 url(../img/footer/a-slaskagrupa.gif) no-repeat 0 0;} /*----------------------------------------------------------------------- Home Page ------------------------------------------------------------------------*/ #hp {background: url(../img/hp/topbg.gif) 0 0 no-repeat;} #hp #hpinner {height: 422px; background: url(../img/hp/bottombg.gif) 0 100% no-repeat; padding: 22px; overflow: hidden; position: relative;} #hp #offer {width: 905px; height: 422px; overflow: hidden;} #hp #offer .www, #hp #offer .callendars, #hp #offer .photography, #hp #offer .paper, #hp #offer .rollups {width: 905px; position: relative;} #hp #offer .image {width: 541px; padding: 0 22px 0 0;} #hp #offer .description {width: 319px; padding: 0 0 0 23px; position: absolute; top: 0px; right: 0px;} #hp #pagination {width: 541px; height: 97px; padding: 0 0 0 22px; position: absolute; bottom: 18px; left: 0px; z-index: 90; position: absolute;} #hp #pagination div {position:relative;} #hp #pagination a.prev {width: 66px; height: 57px; display: block; background: url(../img/hp/nextprv.png) 0 0 no-repeat; position: absolute; top: 0px; left: 0px; cursor: pointer;} #hp #pagination a.next {width: 66px; height: 57px; display: block; background: url(../img/hp/nextprv.png) 0 -57px no-repeat; position: absolute; top: 0px; right: 0px; cursor: pointer;} #hp #pagination ul {display: block; position: absolute; top: 70px; left: 0px; width: 561px; height: 25px;} #hp #pagination ul li {display: inline;} #hp #pagination ul li a {display: block; float: left; width: 99px; height: 22px; background: url(../img/hp/paginationbutton.jpg) 0 0 no-repeat; text-align: center; padding: 3px 0 0; margin: 0 12px 0 0; cursor: pointer;} #hp #pagination ul li a:hover, #hp #pagination ul li a.active {background: url(../img/hp/paginationbutton.jpg) 0 -25px no-repeat} /*----------------------------------------------------------------------- Portfolio ------------------------------------------------------------------------*/ #portfolio #left-col {width: 584px; float: left;} #portfolio #right-col {width: 331px; height: 464px; float: right; background: #000 url(../img/portfolio/rightcolbg.jpg) 0 0 no-repeat; padding: 15px 11px 0 21px;} #mainportfolio {height: 464px; background: #000 url(../img/portfolio/mainportfoliobg.jpg) 0 0 no-repeat; overflow: hidden; padding: 15px 15px 0 22px;} #mainportfolio #portfolio-intro {padding: 0px 0 20px 0;} #mainportfolio #showcase div {height: 340px; display: block; overflow: hidden;} #mainportfolio dl {width: 260px; height: 170px; overflow: hidden;} #mainportfolio dl.left {float: left;} #mainportfolio dl.right {float: left; padding: 0 0 0 21px;} #mainportfolio dl a.img {border: 1px solid #999; padding: 6px; display: block;} #mainportfolio dl img {border: 1px solid #999;} #mainportfolio dd {display: inline; font-size: 11px;} #mainportfolio dd.title {float: left;} #mainportfolio dd.link {float: right;} #mainportfolio dd.link a {color: #fc8701;} #mainportfolio #pagination {overflow: hidden; padding: 10px 0 0;} #mainportfolio #pagination a {margin: 0 2px; color: #fff; font-size: 11px; font-weight: bold;} #mainportfolio #pagination a.prev {display: block; float: left; width: 16px; height: 23px; background: url(../img/portfolio/pagerprev.jpg) 0 0 no-repeat;} #mainportfolio #pagination span {float: left;} #mainportfolio #pagination a.next {display: block; float: left; width: 16px; height: 23px; background: url(../img/portfolio/pagernext.jpg) 0 0 no-repeat;} #mainportfolio #pagination a:hover, #mainportfolio #pagination span a.activeSlide {background-position: 0 -23px;} #mainportfolio #pagination span a {float: left; display: block; width: 23px; height: 19px; background: url(../img/portfolio/pagernumber.jpg) 0 0 no-repeat; text-align: center; padding: 4px 0 0;} #portfolio #right-col p {padding: 11px 0 16px;} /*----------------------------------------------------------------------- Single Client ------------------------------------------------------------------------*/ #singleclient {background: url(../img/singleclient/topbg.gif) 0 0 no-repeat;} #singleclient #singleinner {background: url(../img/singleclient/bottombg.gif) 0 100% no-repeat; padding: 22px; overflow: hidden;} #singleclient #singleinner #description {float: right; width: 334px;} /*----------------------------------------------------------------------- Contact ------------------------------------------------------------------------*/ #contact {background: url(../img/contact/contacttopbg.gif) 0 0 no-repeat; } #contact .contactinner {background: url(../img/contact/contactbottombg.gif) 0 100% no-repeat; padding: 22px; overflow: hidden;} #contact .leftcol {width: 540px; float: left; position: relative;} #contact .rightcol {width: 320px; padding : 0 0 0 588px;} #contact form {width: 360px; margin: 0px auto; overflow: hidden;} #contact form p {text-align: center; padding: 10px 0 0 0; line-height: 20px; font-size: 12px;} #contact #name, #contact #message {width: 356px;} #contact #emailbox {display: none;} #contact #contactbox {float: left; overflow: hidden;} #contact #phonebox {padding: 10px 0 0 206px;} #contact input, #contact textarea {background: #222; color: #fff; border: 1px solid #4A4A4A; font-size: 16px;} #contact #contactbox input, #contact #phonebox input {width: 150px;} #contact .ajax_alert input, #contact .ajax_alert textarea, #contact .ajax_false input, #contact .ajax_false textarea {border: 1px solid #fc5a01;} #contact #send {width: 99px; height: 25px; background: url(../img/hp/paginationbutton.jpg) 0 0 no-repeat; border: none; line-height: 10px; font-size :14px;} #contact #send:hover {background-position: 0 -25px;} #contact .sent {margin: 0 auto; width: 250px; padding: 50px 0 0;} /*----------------------------------------------------------------------- Uslugi ------------------------------------------------------------------------*/ #services {background: url(../img/singleclient/topbg.gif) 0 0 no-repeat;} #services .servicesinner {background: url(../img/singleclient/bottombg.gif) 0 100% no-repeat; padding: 22px; overflow: hidden; position: relative;} /*----------------------------------------------------------------------- Referencje ------------------------------------------------------------------------*/ #references {background: url(../img/singleclient/topbg.gif) 0 0 no-repeat;} #references .referencesinner {background: url(../img/singleclient/bottombg.gif) 0 100% no-repeat; padding: 22px; overflow: hidden; position: relative;} /*----------------------------------------------------------------------- Not Found ------------------------------------------------------------------------*/ #notfound {background: url(../img/singleclient/topbg.gif) 0 0 no-repeat;} #notfound .notfoundinner {background: url(../img/singleclient/bottombg.gif) 0 100% no-repeat; padding: 22px; overflow: hidden; position: relative;}