*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
q:before, q:after { content:''}
strong { font-weight: bold }
em { font-style: italic }
a img { border:none }

a:active { outline:none; }
:focus { -moz-outline-style:none; }

/* typography.css */
h1, h2, h3, h5, h5, h6 { font-weight: bold; }
body { font-family: Arial, Helvetica, Geneva, Tahoma, sans-serif; font-size: 0.9em; }
h1 { font-size: 3em; padding: 0 50px; }
h2 { font-size: 1.4em; padding: 0 50px; }
/* Verdana, Geneva, Tahoma, sans-serif */ 

/* layout.css */
.aligncenter { display:block; margin:0 auto }
.alignleft { float:left }
.alignright { float:right }
.wp-caption { border:1px solid #666; text-align:center; background:#ccc; padding:10px; margin:10px }

br.reset { clear:both; display:block; height:1px; margin:-1px 0 0 0 } /* Use this br class to clear your floated columns */
div { position:relative } /* This will save you having to declare each div's position as 'relative' and allows you to absolutely position elements inside them */
div.container { width: 638px; margin: 0 auto; }

/* Themes */
body.blue  { background: #0a92db url(/images/clouds.jpg) no-repeat center top; }
body.blue a { color: #3f9ee3; text-decoration: none; }
body.blue a:hover { color: #92c1e3; }
body.blue div#header { background: url(/images/blue-top.png) no-repeat bottom; }
body.blue div.bottom {
	background-image: url(/images/blue-bottom.png);
	background-repeat: no-repeat;
}
body.blue div.content { background: url(/images/blue-content.png) repeat-y; }
body.blue span.colored { color: #3f9ee3; }
body.blue h2 { color: #2255ae; }
body.blue div#themes span { color: #000000; }
body.blue div#nextprev .prev { background-image: url(/images/blue-portfolio-previous.png); }
body.blue div#nextprev .next { background-image: url(/images/blue-portfolio-next.png); }

body.green { background-image: url(../images/green-bg.jpg); }
body.green a { color: #0da321; text-decoration: none; }
body.green a:hover { color: #39b54a; }
body.green div#header { background: url(../images/green-top.png) no-repeat bottom; }
body.green div.bottom { background: url(../images/green-bottom.png) no-repeat; }
body.green div.content { background: url(../images/green-content.png) repeat-y; }
body.green span.colored { color: #0da321; }
body.green h2 { color: #0e6f1c; }
body.green div#themes span { color: #fff; }
body.green div#nextprev .prev { background-image: url(../images/green-portfolio-previous.png); }
body.green div#nextprev .next { background-image: url(../images/green-portfolio-next.png); }

body.black { background: #000000 url(../images/black-bg.jpg) no-repeat center top; }
body.black a { color: #353535; text-decoration: none; }
body.black a:hover { color: #000000; }
body.black div#header { background: url(../images/black-top.png) no-repeat bottom; }
body.black div.bottom { background: url(../images/black-bottom.png) no-repeat; }
body.black div.content { background: url(../images/black-content.png) repeat-y; }
body.black span.colored { color: #353535; }
body.black h2 { color: #454545; }
body.black div#themes span { color: #fff; }
body.black div#nextprev .prev { background-image: url(../images/black-portfolio-previous.png); }
body.black div#nextprev .next { background-image: url(../images/black-portfolio-next.png); }

div#themes { position: absolute; top: 10px; left: 40px; }
div#themes span { display: block; float: left; font-size: 0.7em; margin-right: 10px; }
div#themes a { display: block; float: left; height: 10px; width: 10px; margin-right: 5px; border: 1px solid #fff; }
div#themes a.green { background-color: #02a829; }
div#themes a.blue { background-color: #2255ae; }
div#themes a.black { background-color: #000000; }

/* General */
div#header { height: 60px; margin-top: 40px; }
div.bottom { height: 60px; }

div.content p { padding: 0 50px; color: #494949; }
img.lineh { padding-left: 50px; margin: 20px 0; }
body#main div#portfolio, body#main div#social, body#main div#contact { display: none; }


/* About */
div#imagebox { width: 140px; height: 135px; overflow: hidden; background-image: url(../images/about-border.png); padding: 9px; margin-left: 50px; float: left; margin-right: 10px; }
a#vcard { display: block; width: 186px; height: 69px; overflow: hidden; background: url(../images/about-vcard2.png); text-indent: -9999px; float: left; }
a#resume { display: block; width: 187px; height: 69px; overflow: hidden; background: url(../images/about-resume2.png); text-indent: -9999px; float: left; }
a#vcard:hover, a#resume:hover { background-position: bottom; }
div.downloads { margin-top: 5px; }
div#about p { margin-bottom: 1em; line-height: 1.5em; }
div#about ul { width: 170px; float: left; margin-bottom: 1em; margin-left: 10px; }
div#about ul li { padding-left: 18px; background: url(../images/about-check.png) no-repeat left center; line-height: 1.5em; }
div#about ul.first { margin-left: 50px; }

/* Portfolio */
div#nextprev { position: absolute; right: 50px; bottom: 0; }
div#nextprev a { height: 21px; width: 25px; margin-left: 20px; text-indent: -9999px; display: block; float: left; background-repeat: no-repeat; background-position: left center; }
div#nextprev a:hover { background-position: left bottom; }
div#nextprev a.disabled { background-position: left top; }
div#nextprev a.disabled:hover { background-position: left top; }

div#slider { margin-left: 50px; width: 540px; float: left; height: 354px; overflow: hidden; }
	div#slider div.items { width: 20000em; position: absolute; clear: both; }
	div#slider div.items div.works { width: 540px; height: 354px; float: left; }
	div#slider div.items div.work { width: 250px; height: 100px; overflow: hidden; padding: 9px; background-image: url(../images/portfolio-border.png); float: left; margin-right: 2px; }
	div#slider div.items div.last { margin-right: 0; }
	div.content div.work p.label { width: 240px; background-image: url(../images/portfolio-label.png);
	                   padding: 5px; position: absolute; left: 9px; bottom: 9px; color: #e5e5e5; }

/* Social Networks */
div.content div#socialnetworks ul { padding-left: 30px; position: relative; height: 350px; }
div.content div#socialnetworks ul li strong { display: block; font-size: 1.1em; color: #464646; }
div.content div#socialnetworks ul li a { display: block; font-size: 0.9em; }
div.content div#socialnetworks ul li { display: block; width: 200px; height: 52px; background: url(/images/social-icons.png) no-repeat; padding-left: 70px; padding-top: 18px; position: absolute; }
div.content div#socialnetworks ul li.facebook { background-position: left 0;        top: 0;     left: 50px; }
div.content div#socialnetworks ul li.twitter { background-position: left -70px;     top: 0;     left: 340px; }
div.content div#socialnetworks ul li.linkedin { background-position: left -140px;   top: 90px; left: 50px; }
div.content div#socialnetworks ul li.friendfeed { background-position: left -210px; top: 90px; left: 340px; }
div.content div#socialnetworks ul li.skype { background-position: left -280px;      top: 180px; left: 50px; }
div.content div#socialnetworks ul li.yahoo { background-position: left -350px;      top: 180px; left: 340px; }
div.content div#socialnetworks ul li.vimeo { background-position: left -420px;      top: 270px; left: 50px; }
div.content div#socialnetworks ul li.flickr { background-position: left -490px;     top: 270px; left: 340px; }

/* Contact */
div#contactcontent { margin-top: 30px; margin-left: 50px; width: 535px; }
div#contactcontent form { width: 321px; background: url(../images/line-vertical.png) repeat-y right; float: left; }
div#contactcontent form label { font-size: 1.2em; color: #464646; display: block; margin-bottom: 2px; }
div#contactcontent form div.textbox { width: 294px; height: 22px; padding: 4px 8px; background-image: url(../images/contact-textbox.png); overflow: hidden; margin-bottom: 20px; }
div#contactcontent form div.textbox input { width: 288px; font-size: 1.1em; border: none; background-color: #ebebeb; }
div#contactcontent form div.textarea { width: 294px; height: 112px; padding: 4px 8px; background-image: url(../images/contact-textarea.png); overflow: hidden; margin-bottom: 20px; }
div#contactcontent form div.textarea textarea { width: 298px; height: 110px; font-family: Arial, Helvetica; font-size: 1.1em; border: none; background-color: #ebebeb; }
div#contactcontent form img { float: right; margin-right: 10px; }
div#contactcontent form label.required { float: right; color: #ff0000; margin-right: 10px; display: none; }
div#contactcontent form div#message { padding: 100px 10px; background: url(../images/contact-check.png) no-repeat left center; }
div#contactcontent ul.address { width: 204px; margin-left: 10px; float: left; }
div#contactcontent ul.address li { display: block; height: 43px; width: 164px; background: url(../images/contact-icons.png) no-repeat; margin-bottom: 20px; padding-left: 40px; color: #959595; padding-top: 7px; overflow: hidden; }
div#contactcontent ul.address li.email { background-position: left 0px; }
div#contactcontent ul.address li.mobile { background-position: left -50px; }
div#contactcontent ul.address li.address { background-position: left -100px; }
div#contactcontent ul.address li.blog { background-position: left -150px; }
div#contactcontent ul.address li strong { color: #464646; font-size: 1.2em; display: block; }

         
/* TABS */
#tabs {
	font-size: .75em; /* set the font size */
	position: absolute;
	top: 6px; left: 360px;
}
#tabs ul {
	line-height: 1em; /* setting the line height now so we don't have any headaches*/
	margin: 0px; /* let's keep the margin set to 0 for the same reasons as above*/
	list-style-type: none; /* we remove the UL's default disc bullets */
	float: left; /* we float the list to the left like we will all the elements inside*/
	padding: 0px 0px 0px 5px; /* give it a left padding of 5px to counter the effect of margin -5px below */
}
#tabs ul li {
	float: left; /* floatin' left */
}
#tabs ul li a {
	text-decoration: none; /* remove the default underline off the anchor text */
	display: block; /* we display this text as block so that we can apply padding/margin without problems */
	float: left; /* floatin' left, to make the menu horizontal */
	padding: 0px 0px 0px 10px;  /* we give it a left padding of 10px to show the first 10 pixels of the tabs image. you can also use padding-left: 10px; */
	background: url(../images/tabs.png) no-repeat left -50px;  /* we link to the tabs image, no tiling, showing the top left part of it */
	margin-left: -5px;  /* this is important for the overlapping part - we are overlapping the tabs by 5 px */
	z-index: 0; /* keep it on layer 0 (default) */
	position: relative;  /* very important as this enables the z-index to work for us and keeps the tabs where they should be */
	color: #666666;  /* color of the tab text */
}
#tabs ul li a strong {
	font-weight: normal;   /* remove the bold effect */
	display: block;   /* display the strong element as a block so we can pad it, etc. */
	float: left;   /* float it left as well */
	background: url(../images/tabs.png) no-repeat right top;  /* now we show the right part of the tab and we complete the "puzzle" */
	padding: 7px 10px 7px 5px;  /* important, as through this you define the position of the text within the tab */
	cursor: pointer;  /* this makes the browser show the "hand" cursor when hovering over the tab */
}
#tabs ul li a:hover, #tabs ul li a.selected {
	position: relative; /* again, keep things relative */
	z-index: 5; /* we show this tab over all other tabs in the menu, which would be on layer 0, thus overlapping occurs */
	background: url(../images/tabs.png) no-repeat left -75px;  /* now we show the bottom part of the tabs image, the "hover" instance */
	color: #000000;   /* we color the hovered tab's text black */
}
#tabs ul li a:hover strong, #tabs ul li a.selected strong {
	background-image: url(../images/tabs.png) no-repeat;  
	position: relative; /* keep it relative */
	z-index: 5; /* show this on layer 5 as well */
	background-position: right -25px; /* we show the right bottom part of the tabs image (the hover instance) */
}