@charset "UTF-8";

/**
 * GrzegorzBratek.com / the smart web creations
 *
 * @author Paweł Przybyś (pawel.przybys@gmail.com)
 */

/**
 * Reset
 */ 

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { 
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

body { line-height: 1.5; }

table { border-collapse: collapse; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }

blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

a img { border: none; }

/**
 * Typography
 */

html { font-size: 100.01%; }
body { 
	font-size: 75%;
	color: #222; 
	background: #fff;
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6 { font-weight: normal; color: #111; }

h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 2em; margin-bottom: 0.75em; }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: bold; }

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }

p { margin: 0 0 1.5em; }

a:focus, a:hover { color: #000; }
a { color: #009; text-decoration: underline; }

blockquote { margin: 1.5em; color: #666; font-style: italic; }
strong { font-weight: bold; }
em, dfn { font-style: italic; }
dfn { font-weight: bold; }
sup, sub { line-height: 0; }

abbr, acronym { border-bottom: 1px dotted #666; }
address { margin: 0 0 1.5em; font-style: italic; }
del { color:#666; }

pre { margin: 1.5em 0; white-space: pre; }
pre, code, tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }

li ul, li ol { margin: 0; }
ul, ol { margin: 0 1.5em 1.5em 0; padding-left: 3.333em; }

ul { list-style-type: disc; }
ol { list-style-type: decimal; }

dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
dd { margin-left: 1.5em; }

table { margin-bottom: 1.4em; width: 100%; }
th { font-weight: bold; }
thead th { background: #c3d9ff; }
th, td, caption { padding: 4px 10px 4px 5px; }
tfoot { font-style: italic; }
caption { background: #eee; }

/**
 * Forms
 */

label { font-weight: bold; }
fieldset { padding: 1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
legend { font-weight: bold; font-size: 1.2em; }

input[type="text"], input[type="password"], textarea, select {
	background-color: #fff;
	border: 1px solid #bbb;
	margin: 0.5em 0;
}

input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
	border-color: #666;
}

input[type="text"], input[type="password"] { width: 300px; padding: 5px; } 
select { width: 312px; padding: 5px; }
textarea { width: 390px; height: 250px; padding: 5px; }

input[type="checkbox"], input[type="radio"] { position: relative; top: .25em; }

input[type="submit"] { cursor: pointer; }

/**
 * Clear Fix
 */ 

.clearfix:after { content: " "; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

/**
 * Layout
 */

body { background: url(../img/body.png) 50% 0 no-repeat #101010; color: #666; font-family: Georgia, "Times New Roman", Times, serif; min-width: 960px; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; color: #fff; }
a:focus, a:hover { color: #fff; }
a { color: #666; text-decoration: none; }
#top, #middle, #bottom { width: 780px; margin: 0 auto; }
#main { background: url(../img/main.png) 50% 100% no-repeat; }

/**
 * Top
 */

#top { position: relative; height: 237px; }
#top h1 { position: absolute; top: 166px; left: 319px; }
#top h1 a { display: block; width: 143px; height: 0; overflow: hidden; padding-top: 11px; background: url(../img/grzegorzbratek.png) no-repeat; }
#top h2 { position: absolute; top: 84px; left: 257px; width: 265px; height: 0; overflow: hidden; padding-top: 71px; background: url(../img/the-smart-web-creations.png) no-repeat; }
#top .nav { position: absolute; top: 226px; left: 20px; width: 740px; }
#top .nav ul { list-style: none; margin: 0; padding: 0; }
#top .nav ul li, #top .nav ul li a { float: left; }
#top .nav ul li { padding-right: 34px; }
#top .nav ul .contact-me { float: right; padding-right: 0; }
#top .nav ul li a { background: url(../img/nav.png) no-repeat; height: 0; overflow: hidden; padding-top: 11px; }
#top .nav ul .web a { background-position: 0 0; width: 27px; }
#top .nav ul .id a { background-position: -62px 0; width: 14px; }
#top .nav ul .contact-me a { background-position: -661px -11px; width: 79px; }
#top .nav ul .web.selected a, #top .nav ul .web a:hover { background-position: 0 -11px; }
#top .nav ul .id.selected a, #top .nav ul .id a:hover { background-position: -62px -11px; }
#top .nav ul .contact-me.selected a, #top .nav ul .contact-me a:hover { background-position: -661px -11px; }

/**
 * Middle
 */

#middle { padding-bottom: 20px; }
#middle .project { padding: 20px 0 48px; background: url(../img/project.png) 50% 100% no-repeat;  }

/**
 * Bottom
 */

#bottom { position: relative; min-height: 412px; }
#bottom .about { position: absolute; top: 90px; left: 0; width: 242px; text-align: right; }
#bottom .about h3 { display: inline-block; width: 62px; height: 0; overflow: hidden; padding-top: 14px; background: url(../img/about.png) no-repeat; }
#bottom .about p { font-style: italic; font-size: .917em; }
#bottom .contact { position: absolute; top: 90px; right: 0; width: 242px; }
#bottom .contact h3 { width: 86px; height: 0; overflow: hidden; padding-top: 14px; background: url(../img/contact.png) no-repeat; }
#bottom .contact p { font-style: italic; font-size: .917em; padding-bottom: 10px; background: url(../img/email.png) 0 100% no-repeat; }
#bottom .contact p a { color: #ccc; font-size: 1.273em; text-decoration: underline; }
#bottom h4 { position: absolute; top: 195px; left: 293px; width: 194px; height: 0; overflow: hidden; padding-top: 109px; background: url(../img/at-your-service-since-2005.png) no-repeat; }
#bottom .copyright { position: absolute; bottom: 10px; left: 0; width: 100%; font-size: .833em; text-align: center; }