@import url("reset.css");

/**
  *   Radziu.org | Radek "Radziu" Skrzypczak portfolio
  *   CSS | style.css
  *	  Coded by Mateo
  **/ 

/**
  *		Default settings
  *****************************/ 
* {
	position: relative;
}

body {
	background: #f7f7ed url('images/bg_main.png') repeat-x left top;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	position: relative; 
	color: #c8c8c8;
}

.clear {
	clear: both;
}


/**
  *		Okazjonalne 
  *****************************/ 

.special-img {	
	float: left;	display: block;
	width: 905px; /* edytuj to */
	height: 366px; /* edytuj to */
	margin: 0 0 0px 22px;
	text-indent: -9999px;
	background: url('3.jpg') no-repeat 0 0; /* to w sumie też edytuj */
}
.special-img:hover {		
	background-position: 0 -366px; /* sklejasz te dwa obrazki, nie hover i hover, przy czym hover jest na dole. "-500px" to wysokość nie hovera xD */}




/**
  *		Top box
  *****************************/ 

#topCont {
	float: left;
	width: 941px;
	height: 203px;
	margin: 17px 0 0 0;
}

#slogan {
	float: left;
	width: 140px;
	height: 114px;
	background: url('images/slogan_line.png') no-repeat left 8px;
}

#slogan h1 {
	float: right;
	width: 103px;
	height: 114px;
	text-indent: -9999px;
	background: url('images/slogan.png') no-repeat;
	margin: 25px 0 0 0;
}

#header {
	float: left;
	width: 373px;
	height: 115px;
	margin: 25px 0 0 21px;
}

#header span {
	float: left;
	width: 373px;
	height: 90px;
	text-indent: -9999px;
	background: url('images/radek_skrzypczak.png') no-repeat;
}

/**
  *		Awards
  *****************************/ 
                              #cssawards{
					float: right;
                              top:0px;
                              right:0px;
                              z-index:555;
                              }
                              #cssawards a{
                              width:115px;
                              height:115px;
                              text-indent:-8000px;
                              display:block;
                              background:url(images/cssawards_featured_dark.png)
                              no-repeat;
                              }


/**
  *	  Coputer graphic desinger
  *****************************/ 

#cgd {
	float: left;
	width: 374px;
	height: 21px;
	background: url('images/bg_cgd.png') repeat-x;
	margin: 4px 0 0 0;
}

#cgd h1 {
	float: left;
	width: 280px;
	height: 10px;
	text-indent: -9999px;
	background: url('images/cgdheader.png') no-repeat;
	margin: 4px 0 0 9px;
}

/**
  *		Kontakt & social box
  *****************************/ 

#social {
	float: left;
	width: 940px;
	height: 24px;
	margin: 30px 0 0 0;
}

/** Kontakt **/

#kontakt {
	float: left;
	width: 362px;
	height: 24px;
	background: #ffdd1e;
}

#kontakt span {
	float: right;
	width: 196px;
	height: 24px;
	text-indent: -9999px;
	background: url('images/kontakt.png') no-repeat left top;
	margin: 0 5px 0 0;
}

#kontakt:hover {
	background: #c41f2c;
}

#kontakt:hover span {
	background: url('images/kontakt.png') no-repeat left -24px;
}

/** Behance **/

#behance {
	float: left;
	width: 32px;
	height: 24px;
	background: #ffdd1e;
	margin: 0 0 0 63px;
}

#behance span {
	float: left;
	width: 20px;
	height: 13px;
	text-indent: -9999px;
	background: url('images/behance.png') no-repeat;
	margin: 5px 0 0 6px;
}

/** digArt **/

#digArt {
	float: left;
	width: 32px;
	height: 24px;
	background: #ffdd1e;
	margin: 0 0 0 1px;
}

#digArt span {
	float: left;
	width: 22px;
	height: 19px;
	text-indent: -9999px;
	background: url('images/digart.png') no-repeat;
	margin: 2px 0 0 4px;
}

/** deviantArt **/

#deviantArt {
	float: left;
	width: 44px;
	height: 24px;
	background: #ffdd1e;
	margin: 0 0 0 1px;
}

#deviantArt span {
	float: left;
	width: 34px;
	height: 15px;
	text-indent: -9999px;
	background: url('images/deviantart.png') no-repeat;
	margin: 5px 0 0 5px;
}

/** Bottom social hover **/

#behanceBottom {
	float: left;
	width: 32px;
	height: 10px;
	margin: 0 0 0 425px;
}

#digArtBottom {
	float: left;
	width: 32px;
	height: 10px;
	margin: 0 0 0 1px ;
}

#deviantArtBottom {
	float: left;
	width: 44px;
	height: 10px;
	margin: 0 0 0 1px;
}

.hover  {
	background: url('images/social_hover.png') repeat-x;
}

#gPlus {
	float: right;
	width: 61px;
	height: 22px;
	padding: 2px 0 0 4px;
}

/**
  *		Prace 
  *****************************/ 

#worksContent {
	float: left;
	width: 927px;
	height: auto;
	margin: 70px 0 0 13px;	
}

#hiden {
	float: left;
	width: 927px;
	height: auto;
}

/**
  *		Box z pracami
  *****************************/ 

.work {
	float: left;
	width: 287px;
	height: 242px;
	margin: 0 0 40px 22px;
}

.work img {
	border: 7px solid white;
}

.work a span {
	float: left;
	width: auto;
	height: auto;
	padding: 2px 2px 3px 2px;
	font-size: 12px;
	color: #2d2d2d;
	margin: 2px 0px 0px 5px;
}

.work a:hover span {
	background: #ffdd1e;
}

.work h2 {
	font-size: 10px;
	font-style: italic;
	color: #919182;
	clear: both;
	margin: 6px 0px 0px 7px;
}

/**
  *		Show/hide panel
  *****************************/ 

#show {
	float: left;
	width: 899px;
	height: 38px;
	background: url('images/bg_show.png') repeat-x left bottom;
	margin: 0 0 73px 21px;
}

#showwork {
	width: 90px;
	height: 24px;
	text-indent: -9999px;
	background: url('images/show_works.png') no-repeat;
	margin: 0 auto;
	cursor: pointer;
}

#hidework {
	width: 60px;
	height: 24px;
	text-indent: -9999px;
	background: url('images/hide_works.png') no-repeat;
	margin: 0 auto;
	cursor: pointer;
}

/**
  *		Podstrona z pracą
  *****************************/ 

#workMain {
	float: left;
	width: 100%;
	min-height: 100%;
	height: 100%;
	background: #fafaf5;
	position:relative; /* needed for footer positioning*/
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/
}

#workContent {
	float: left;
	width: 650px;
	height: auto;
	margin: 61px 0 57px 47px;
}

#workContent img {
	display: block;
	margin: 12px 0 0 0;
}

.workHeader {
	position: relative;
	float: left;
	width: 647px;
	padding: 0 0 0 3px;
	min-height: 41px;
	margin-bottom: 14px
}

.workHeader h1 {
	font-size: 25px;
	font-weight: normal;
	color: #393939;
}
.workHeader h2 {
	color: #2d2d2d;
	font-size: 10px;
}

.workHeader h3 {
	position: absolute;
	top: 26px;
	right: 0;
	font-size: 10px;
	color: #2d2d2d;
}

.workHeader h4 {
	margin: 20px 0 0 0;
	font-size: 12px;
	color: #393939;
}

.workHeader h4 a {
	padding: 0 3px 4px 3px;
	font-size: 11px;
	color: #c41f2c;
}

.workHeader h4 a:hover {
	background: #ffdd1e;
}

#back a {
	float: left;
	padding: 0 3px 3px 3px;
	font-size: 11px;
	color: #393939;
	background: #ffdd1e;
	text-decoration: none;
	margin: 25px 0 0 0;
}
	

/**
  *		Footer
  *****************************/ 

#footerCont {
	position: static;
	bottom: 0;
	width: 100%;
	height: 63px;
	background: #eeeee5 url('images/bg_footer.png') repeat-x left top;

}

#footer {
	float: left;
	width: 899px;
	height: 63px;
	margin: 0 0 0 42px;
}

#footer h1 {
	float: left;
	color: #2d2d2d;
	margin: 21px 0 0 0;
}

#footer h2 a {
	float: right;
	color: #919182;
	font-size:10px;
	margin: 21px 0 0 0;
	text-decoration: underline;
}