/*
 *
 * Stylesheet for ^pagepro.pl
 *
 * @section		screen
 * @version		1.00
 * @copyright	zaciecie.pl
 * @media		screen
 *
 * 
 *
 * @todo 
 */
@import "reset.css";

body {
	background: #fff url(../img/body_bg.gif) no-repeat top center;
	color: #000;
	font: normal 11px/18px Arial, Helvetica, sans-serif;	
}
.wrapper { position:relative; width: 800px; margin: 0 auto}
a { text-decoration: none}
a:hover { text-decoration: underline}
#header {position: relative;width: 100%;float: left}
#header.rolled  {height: 420px}
#header .wrapper {background: url(../img/header_bg.jpg) no-repeat top right;min-height: 358px}
#header img, #header h5 {position: absolute;top: 11px;left: 0}
#header h5 {
	background: url(../img/site_slogan.gif) no-repeat 0 0;
	font-size: 0;
	height: 62px;
	left: 135px;
	line-height: 0;
	text-indent: -9999%;
	width: 201px;
}
#main-menu {position: absolute;left: 33px;top: 73px;height: 61px}
#main-menu li, #action-areas ul li, #sub-menus ul li {float: left}
#main-menu li a, #action-areas ul li a, #sub-menus ul li a {
	float: left;
	font-size:0;
	height: 61px;
	line-height: 0;
	overflow: hidden;
	text-indent: -9999%;
}
#main-menu #strona-glowna a {background-image:url(../img/m_main.gif); width:102px}
#main-menu #o-firmie a {background-image:url(../img/m_aboutus.gif); width:64px}
#main-menu #oferta a {background-image:url(../img/m_offer.gif); width:59px}
#main-menu #realizacje a {background-image:url(../img/m_works.gif); width:76px}
#main-menu #klienci a {background-image:url(../img/m_clients.gif); width:60px}
#main-menu #kontakt a {background-image:url(../img/m_contact.gif); width:77px}
#main-menu li a:hover {background-position: 0 61px}
#action-areas {position: absolute;top: 294px;left: 25px;width: 775px}
#action-areas  h4 {width: 400px;height: 22px}
#action-areas ul li a {height: 42px}
#action-areas ul #strony-internetowe a {background-image: url(../img/sb_pages.gif);width: 121px}
#action-areas ul #systemy-cms a {background-image: url(../img/sb_cms.gif);width: 96px}
#action-areas ul #sklepy-internetowe a {background-image: url(../img/sb_shops.gif);width: 129px}
#action-areas ul #serwisy-internetowe a {background-image: url(../img/sb_portals.gif);width: 135px}
#action-areas ul #pozycjonowanie a {background-image: url(../img/sb_seo.gif);width: 114px}
#action-areas ul li a:hover, #action-areas ul li.act a {background-position: 0 42px}
#action-areas a.more {
	float: right;
	background: url(../img/header_a_more.gif);
	width: 80px;
	height: 44px;
	text-indent: -9999%;
	line-height: 0;
	font-size:0;
	margin-top: -2px;
}
#action-areas a.more:hover {background-position: 0 44px}
#action-areas ul li ul {display: none}
#sub-menus {float: left;margin-top: 358px}
#sub-menus ul {float: left;margin-left: 155px;padding: 10px 0 10px;display: none}
#sub-menus ul li a {height:22px;margin-right: 20px}
#sub-menus ul #pprocms a { background:url(../img/cms_cms.gif); width: 67px}
#sub-menus ul #pproshop a { background:url(../img/cms_shop.gif); width: 72px}
#sub-menus ul #ppronews a { background: url(../img/cms_news.gif); width: 75px}
#sub-menus ul #pproguest a { background:url(../img/cms_guest.gif); width: 105px}

#content {background: url(../img/content_bg.gif) no-repeat center top;clear: both;float: left;width: 100%}
#main-page #content {
	height:275px;
}
#content .wrapper {border-top: 4px solid #a67dc4}
#projects {float: left;margin-left: 25px;padding-bottom: 20px;width: 232px;}
#projects h3, #news h3, #our-clients h3  {
	background: url(../img/h3_projects.gif) no-repeat 0 25px;
	font-size:0;
	height: 61px;
	line-height: 0;
	text-indent: -999%;
	width: 100%;
}
#projects ul {float:left;width: 232px;padding:6px 0}
#projects ul li {float: left;width: 100%}
#projects ul li a {
	border-bottom: 1px solid #f2f2f2;
	color: #000000;
	float: left;
	height: 27px;
	padding: 8px 0 0 18px;
	width: 186px;
}
#projects ul li a span {color: #b3b3b3}
#projects ul li a:hover {
	background: #000 url(../img/projects_ul_a.gif) no-repeat 0 15px;
	border: 0;
	color: #fff;
	padding-bottom: 1px;
	text-decoration: none;
}
#projects a.more {
	background: url(../img/projects_see_more.gif) no-repeat 0 3px;
	color: #000;
	float: right;
	font-weight: bold;
	margin-right: 25px;
	padding-left: 20px;
	text-decoration: underline;
}
#news {
	background: url(../img/news_bg.gif) no-repeat top right;
	display: inline;
	float: left;
	margin-left: 27px;
	padding-right: 27px;
	position: relative;
	width: 218px;
}
#news h3 {background: url(../img/h3_news.gif) no-repeat 0 25px}
#news a {
	color:#ae8cc8;
	float: left;
	font-size: 12px;
	font-weight: bold;
	margin: 16px 0;
	width: 100%;	
}
#news a.archive {
	color:#afafaf;
	float: none;
	font-size: 9px;
	margin:0;
	position: absolute;
	right: 27px;	
	top: 24px;
	width: 50px;
}
#news p {text-align: justify}
#our-clients {float: right;width: 245px;height: 255px; overflow: hidden;}
#our-clients h3 {background-image: url(../img/h3_clients.gif)}
#our-clients div {float: left;width: 100%;padding-top: 25px;height: 100px}
#our-clients img {float: left;width:55%}
#our-clients ul {border-left: 1px solid #f2f2f2;float: right;margin-top: 30px;width: 95px}
#our-clients ul a {
	background: url(../img/clientsullia.gif) no-repeat 0 4px;
	color: #000;
	font-size: 9px;
	padding-left: 16px;
}
#our-clients h4 {
	color:#ae8cc8;
	float: left;
	font: bold 11px/15px Arial, Helvetica, sans-serif;
	width: 100%;
}
#our-clients p {color:#7f7f7f;width: 175px}
#our-clients p a {color: #7f7f7f;text-decoration: underline}

#footer {
	background: url(../img/footer_bg.gif) no-repeat top center;
	clear: both;
	color:#a3a3a3;
	float: left;
	width:100%;
}
#footer .wrapper {background: url(../img/footer_wrapper_bg.gif) repeat-x;height: 135px}
#footer .wrapper div {clear: both;float: left;margin-top: 28px;width: 100%}
#footer img {float: left}
#footer ul {float: left;margin-top: 20px;width: 100%}
#footer ul li {display:inline;text-transform: lowercase}
#footer ul li a {background: url(../img/footer_ul_a_bg.gif) no-repeat right 4px;color: #a3a3a3;padding: 0 20px}
#footer ul li strong {font-weight: bold}
#footer p, #footer h4 {display: inline;float:left;margin: 20px 0 0 30px}
#footer h4 a {color:#a3a3a3;font-weight: bold}
#footer h4 a:hover {color:#a27ac0;text-decoration:none}
#footer h4 {float: right;margin-right: 30px}

/* subpage
______________________________________*/
#content .wrapper.subpage {background: #fff;min-height: 200px}
#sidebar {float: left;margin-left: 1px;width: 255px}
#sidebar {
	margin-bottom: 20px;
}
#main-content {
	background: url(../img/maincontentbg.gif) repeat-x 25px 0;
	float: right;
	line-height: 18px;
	margin-right: 22px;
	padding: 25px 0 15px 3px;
	width: 495px;
}
#main-content a {color: #a97fc8;text-decoration: underline}
#main-content a.go-up {
	background: url(../img/a_go_up.gif) no-repeat;
	clear: both;
	float: right;
	font-size: 0;
	height: 13px;
	line-height: 0;
	margin-top: 20px;
	text-indent: -9998%;
	width: 48px;
}
#main-content a.go-up:hover {background-position: 0 -14px}
#main-content h1 {float:left;height: 23px;margin: 0 0 30px -3px;width: 100%}
#main-content h3, #main-content h4 {font-size: 13px;font-weight: bold;margin-top: 14px}
#main-content h3 {
	background: #faf5fd;
	border-bottom: 1px solid #cfbade;
	clear: both;
	font-weight: normal;
	font-size: 17px;
	line-height: 25px;
	padding: 2px 5px;
}
#main-content h5 {font-size: 12px;font-style: italic}
#main-content p {display: inherit;margin: 5px 0}
#main-content ul {clear: both;display: block;margin: 10px 0;width: 100%}
#main-content ul li {
	background: url(../img/maincontentullibg.gif) no-repeat 25px 15px;
	border-bottom: 1px solid #ebebeb;
	margin-left: 2%;
	padding: 7px 10% 5px 10%;
	width: 78%;
}
#main-content ul li li {border-bottom: 0}
#main-content strong {font-weight: bold}
#sidebar {
	border: 1px solid #f2f2f2;
	border-top:0; border-bottom:0;
	background: url(../img/sidebar_bg.gif) no-repeat 0 0; 
	padding-top: 24px;
}
#sidebar h3 {margin-left: 23px}
#sidebar ul {padding-top: 15px}
#sidebar li {clear: both;display: block}
#sidebar li a {
	background: #fbfbfb url(../img/sidebarlia.gif) no-repeat 25px 16px;
	border-bottom: 1px solid #d8d8d8;
	color: #000;
	float: left;
	padding: 9px 0 9px 37px;
	width: 218px;
}
#sidebar li a:hover, #sidebar li.act a {
	background: #9f78bd url(../img/sidebarliahov.gif) no-repeat 225px 16px;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}

/* kontakt
_________________________________________*/
#contact-form {padding: 10px 0}
#contact-form legend {display: none}
#contact-form input, #contact-form label, #contact-form textarea, #contact-form button {clear: both;float: left}
#contact-form label {color: #666;font-weight: bold;margin: 5px 0;padding-left: 5px}
#contact-form label.telephone {clear:none}
#contact-form input, #contact-form textarea {
	background: #fafafa;
	border: 1px solid #e5e5e5;
	font: normal 11px/18px Arial, Helvetica, sans-serif;
	padding: 3px 5px;
	width: 285px;
}
#contact-form textarea {height:200px; overflow: auto}
#contact-form input.checkbox {background: #fff;border: none;margin-top: 8px; margin-left:0;padding: 0;width: auto}
#contact-form button {
	background: url(../img/button_submit.gif);
	border: 0;
	cursor: pointer;
	height: 20px;
	margin-top: 20px;
	overflow: hidden;
	text-indent: -9998%;
	width: 53px;	
}
	
/* realizacje
_________________________________________*/
#realizations {padding-left: 20px}
#realizations .position {float: left;margin-top: 20px;padding-bottom: 20px}
#realizations .image {float: left;margin-right: 25px}
#realizations img {background: #fff;border: 1px solid #d8d8d8;float: left;padding: 2px}
#realizations h4 {color:#a97fc8;font-weight: bold;font-size: 12px}
#realizations p {color:#787878}
#realizations a.link {color: #BCC5CC;text-decoration: none}
#realizations a.more {
	background: #fbfbfb;
	color: #BCC5CC;
	border: 1px solid #d8d8d8;
	clear: both;
	float: left;
	font-size: 10px;
	line-height: 14px;
	padding: 1px 10px;
	text-decoration: none;
}
#realizations a.more:hover {border-color: #a97fc8;color:#a97fc8}
#realizations .description {float: left;width: 190px}

/* news
_________________________________________*/
.news-view {
	background: #fbfbfb;
	border: 1px solid #f2f2f2;
	color: #777;
	float: left;
	margin-bottom: 15px;
	padding: 1% 2%;
	width: 96%;
}
#content .news-view span, #content .news-view p {float: left;width: 40%}
#content .news-view p {float: right;margin:0;text-align: right}
#content .news-view a {text-decoration: none}

/* news archive
_________________________________________*/
#news-archive {margin-left: 20px}
#news-archive dt a {font-weight: bold;font-size: 12px;text-decoration: none}
#news-archive dt {float: left;margin-top: 5px;padding: 0 2%;width: 96%}
#news-archive dt a:hover {text-decoration: underline}
#news-archive dd img {background: #fff;border: 1px solid #d8d8d8;float: left;margin: 10px 10px 0 0;padding: 2px}
#news-archive dd {clear: both;float: left;margin-bottom: 10px;padding: 0 2%;width: 96%}
#news-archive dd span {
	background: #fcfcfc;
	border: 1px solid #f2f2f2;
	color: #777;
	float: left;
	margin-left: -2%;
	padding: 1% 2%;
	width: 96%;
} 
#news-archive dd span b, #news-archive dd span strong {font-weight: normal}
#news-archive dd span b {float: left}
#news-archive dd span strong {float: right;text-align: right}
#content #pagination {text-align: center}
#content #pagination ul {float: none;margin: 0}
#content #pagination li {background: none;border: 0;display: inline;padding: 0;margin: 0;width: auto}
#content #pagination li a:hover {text-decoration: underline}
#content #pagination li span {float: none;font-weight: bold;margin:0;padding: 0;width: auto}


/* subpage: realisation.html 
---------------------------------------------*/
#main-content.realisation .short-info {
	background: #f2f2f2;
	border: 1px solid #e5e5e5;
	float: left;
	margin: -17px 0 10px -3px;
	padding: 2%;
	width: 96%;
}
#main-content.realisation .short-info img {float: left;width: 20%;display:none}
#main-content.realisation .short-info div {color: #a3a3a3;float: left;margin-left: 5%;padding-top: 5px;width: 70%}
#main-content.realisation h2 {font-weight: bold;font-size: 12px}


#main-content h1.sifr, #sidebar h3.sifr {
	color: #000000;
	font-size: 18px;
	font-weight: normal;
}
#sidebar h3.sifr {
	color: #656565;
}
#slogans {
	left: 27px;
	height: 126px;
	overflow: hidden;
	position: absolute;
	top: 139px;
	width: 415px;
}
	#slogans img {
		display: block;
		position: static;
	}