﻿/*
Theme Name: Iodic Design
Theme URI: http://iodicdesign.com
Description: My blog design
Version: 0.9 (WP2.9)
Author: Marko Randjelovic
Author URI: http://iodicdesign.com
Tags: fancy, schmancy
*/

@charset "UTF-8";
/* RESET */
a img { border: none }
.left { float: left }
.right { float: right }

table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; }
blockquote, q { quotes: none }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
	text-decoration: none;
	font-size: 100%;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
}
:focus { outline: 0 }
strong { font-weight: bold }
em { font-style: italic }
ins { text-decoration: none }
del { text-decoration: line-through }
ol, ul { list-style: none }


/* Clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html .clearfix				{ zoom: 1 } /* IE6 */
*:first-child+html .clearfix	{ zoom: 1 } /* IE7 */

@font-face {
	font-family: 'ComfortaaRegular';
	src: url('fonts/Comfortaa_Regular-webfont.eot');
	src: local('☺'), url('fonts/Comfortaa_Regular-webfont.woff') format('woff'), url('fonts/Comfortaa_Regular-webfont.ttf') format('truetype'), url('fonts/Comfortaa_Regular-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'ComfortaaBold';
	src: url('fonts/Comfortaa_Bold-webfont.eot');
	src: local('☺'), url('fonts/Comfortaa_Bold-webfont.woff') format('woff'), url('fonts/Comfortaa_Bold-webfont.ttf') format('truetype'), url('fonts/Comfortaa_Bold-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}


/* Real CSS Begins */
.container {
	width: 960px;
	margin: 0 auto;
}

body {
	color: #eee;
	background: #074665 url(images/bgBody.png) no-repeat 50% 0%;
	font: 14px/19px Corbel, Arial, Helvetica, sans-serif;
	text-align: justify;
}

p { margin-bottom: 19px }
.small {
	color: #ccc;
	font-size: 12px;
	line-height: 18px;
	margin-bottom: 18px;
}
span.small { font-size: 12px }
span.orange { color: #f90 }

a { color: #f90; border-bottom: 1px dotted #f90 }
a:hover { color: #f90; border-bottom: 1px solid #f90 }
a:active { border-bottom: 2px solid #f90 }

.thumbLink {
	background-repeat: no-repeat;
	background-position: 5px 5px;
	display: block;
	width: 588px;
	padding: 5px;
	background-color: #fff;
	border: 1px solid #777;
	margin: 15px 0 10px;
	text-indent: -9999px;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	box-shadow: 0 0 8px #333, inset 0 1px 9px #333;
	-moz-box-shadow: 0 0 8px #333, inset 0 1px 9px #333;
	-webkit-box-shadow: 0 0 8px #333;
	overflow: hidden;
}
.loopLink { height: 125px }
.fullLink { height: 250px; margin-bottom: 15px }
.thumbLink, .thumbLink:hover, .thumbLink:visited { border: none }

code {
	background-color: #05354d;
	font-family: "DejaVu Sans Mono", "Lucida Console", Monaco, monospace;
	font-size: 12px;
	padding: 3px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}


/* HEADER */
#navSearch { margin-left: 16px; height: 45px }
#navSearch ul li { display: inline }
#navSearch ul li a {
	height: 38px;
	display: block;
	float: left;
	text-indent: -9999px;
	margin-right: 14px;
	border: none;
}

.home {
	background: url(images/bgNav.png) no-repeat;
	width: 60px;
}
.blog {
	background: url(images/bgNav.png) no-repeat -60px 0;
	width: 50px;
}
.about {
	background: url(images/bgNav.png) no-repeat -296px 0;
	width: 64px;
}
.portfolio {
	background: url(images/bgNav.png) no-repeat -110px 0;
	width: 96px;
}
.services {
	background: url(images/bgNav.png) no-repeat -206px 0;
	width: 90px;
}
.hireMe {
	background: url(images/bgNav.png) no-repeat -361px 0;
	width: 78px;
}
.contact {
	background: url(images/bgNav.png) no-repeat -439px 0;
	width: 86px;
}

/* Hover */
#navSearch ul li a:hover { border: none }
.home:hover { background-position: 0 -38px }
.blog:hover { background-position: -60px -38px }
.about:hover { background-position: -296px -38px }
.portfolio:hover { background-position: -110px -38px }
.services:hover { background-position: -206px -38px }
.hireMe:hover { background-position: -361px -38px }
.contact:hover { background-position: -439px -38px }
}
/* Active */
#active .home { background: url(images/bgNav.png) no-repeat 0px -76px }
#active .blog { background: url(images/bgNav.png) no-repeat -60px -76px }
#active .about { background: url(images/bgNav.png) no-repeat -296px -76px }
#active .portfolio { background: url(images/bgNav.png) no-repeat -110px -76px }
#active .services { background: url(images/bgNav.png) no-repeat -206px -76px }
#active .hireMe { background: url(images/bgNav.png) no-repeat -361px -76px }
#active .contact { background: url(images/bgNav.png) no-repeat -439px -76px }

/* Search */
.searchForm {
	float: right;
	line-height: 40px;
	margin: -2px 17px 0 0;
}

.msgField {
	float: left;
	margin-right: 8px;
}

.s {
	width: 214px;
	height: 22px;
	padding: 0 6px;
	font: 12px/17px Corbel, Arial, Helvetica, sans-serif;
	background-color: #eee;
	border: 2px solid #2b93d9;
	border-radius: 9px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	box-shadow: 0 2px 10px inset #bbb;
	-moz-box-shadow: 0 2px 10px inset #bbb;
}
.s:hover, .s:active, .s:focus {
	background-color: #fff;
	border-color: #d9860b;
}

.buttonContainer { float: right }
.searchsubmit {
	background: transparent url(images/buttonGo.png) no-repeat;
	width: 54px;
	height: 28px;
	border: 0;
	padding: 0;
	text-indent: -9999px;
}
.searchsubmit:active { background-position: left bottom }

#override { margin: -48px -18px 0 0 }


/* LOGO */
#logo p a {
	background: transparent url(images/logo.png) no-repeat;
	width: 404px;
	height: 108px;
	margin: 28px 0 82px 17px;
	border: none;
	display: block;
}
#logo p { margin: 0; text-indent: -9999px; }
#logo p small { display: none }


/* MAIN CONTENT */
#insetBg {
	background-color: #074665;
	border: solid 1px #052d41;
	padding-top: 10px;
	margin-bottom: 10px;
	box-shadow: 0 0 40px #042a3c, inset 0 0 30px #333;
	-moz-box-shadow: 0 0 40px #042a3c, inset 0 0 30px #333;
	-webkit-box-shadow: 0 0 40px #042a3c;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
}

#gradBg {
	background: #074665 url(images/gradBg.png) no-repeat;
	min-height: 250px;
	float: left;
	width: 922px;
	padding: 18px;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
}

#mainCont {
	width: 602px;
	float: left;
	padding-bottom: 5px;
}

#welcomeCont {
	margin-bottom: 18px;
	background: url(images/boxWelcome.png) no-repeat;
	width: 584px;
	height: 180px;
	padding: 20px 0 10px 20px;
}

h1#welcome {
	background: url(images/hWel.png) no-repeat;
	width: 494px;
	height: 38px;
	text-indent: -9999px;
	margin-bottom: 12px;
}

#welcomeCont p {
	font-size: 16px;
	line-height: 19px;
	margin-bottom: 19px;
	color: #042b3b;
	text-align: left;
	width: 435px;
}
#welcomeCont a {
	color: #005676;
	border-color: #005676;
}


/* Sidebar */
#sidebar {
	width: 294px;
	float: right;
	padding-bottom: 15px;
}

#sidebar ul li ul { padding: 0 2px }

h3 {
	background: url(images/bgH2.png) no-repeat;
	width: 264px;
	height: 34px;
	font: 18px/34px ComfortaaBold, Corbel, Arial, Helvetica, sans-serif;
	text-shadow: -1px -1px 1px #666;
	padding: 0 15px;
	margin: 20px 0 10px;
	clear: both;
}
h3.firstOne { margin-top: 0 }

ul#inTouch li {
	display: block;
	float: left;
}

#inTouch { margin: 0 2px; height: 128px; }
#inTouch a { border: none }

#twitter {
	background: url(images/monsterTwitter.png) no-repeat;
	width: 128px;
	height: 128px;
	display: block;
	margin-right: 20px;
	text-indent: -9999px;
}

#rss {
	background: url(images/monsterRSS.png) no-repeat;
	width: 128px;
	height: 128px;
	display: block;
	text-indent: -9999px;
	margin-left: 8px;
}

#rssEmail {
	margin: 8px 0 20px;
	display: block;
	background: #042b3b;
	border: 1px solid #264758;
	border-radius: 12px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	box-shadow: 0 0 10px #333 inset;
	-moz-box-shadow: 0 0 10px #333 inset;
	float: left;
	height: 25px;
	padding: 2px 0;
	line-height: 25px;
	width: 294px;
	text-align: center;
}

ul#adBanners {
	height: 280px;
}

li#ads {
	clear: both;
}

ul#adBanners li {
	border: 1px solid #a6a6a6;
	display: block;
	float: left;
}

.rightM { margin: 0 10px 10px 0 }

ul#adBanners li a {
	border: 5px solid #e6e6e6;
	display: block;
}

ul#adBanners li a span {
	display: block;
	width: 125px;
	height: 125px;
	border: 1px solid #a6a6a6;
	text-indent: -9999px;
}

ul#adBanners li a:hover { border: 5px solid #fff }

#genius span { background: url(images/adGenius.jpg) no-repeat }
#daVidim span { background: url(images/adDavidim.jpg) no-repeat }
#tForest span { background: url(images/adTF.jpg) no-repeat }
#buySell span { background: url(images/adAd.jpg) no-repeat }

ul.categories li, ul.blogroll li, .recentComms li {
	font-size: 16px;
	line-height: 24px;
	display: block;
	list-style: none;
}


/* POSTS */
.post { margin-bottom: 20px }

.title {
	background: url(images/bgH1.png) no-repeat;
	width: 589px;
	padding-left: 15px;
	height: 40px;
	clear: both;
	margin-bottom: 10px;
}

h1, h2 {
	font: 24px/40px ComfortaaRegular, Corbel, Arial, Helvetica, sans-serif;
	float: left;
	text-shadow: -1px -1px 1px #666;
}
h1 a, h1 a:hover, h1 a:visited, h2 a, h2 a:hover, h2 a:visited {
	color: #fff;
	border: none;
}
h2.inline {
	background: #042b3b;
	background-image: none;
	border: 1px solid #264758;
	text-shadow: none;
	height: 34px;
	font: 18px/34px ComfortaaRegular, Corbel, Arial, Helvetica, sans-serif;
	border-radius: 18px;
	-moz-border-radius: 18px;
	-webkit-border-radius: 18px;
	box-shadow: 0 0 10px #333 inset;
	-moz-box-shadow: 0 0 10px #333 inset;
	width: 570px;
	margin: 8px 0 10px;
	padding: 0 15px;
}

.title .comments {
	background: url(images/commNo.png) no-repeat;
	width: 63px;
	height: 36px;
	display: block;
	float: right;
	color: #fff;
	border: none;
	margin: 5px 20px 0 0;
	text-align: center;
	padding: 8px 17px 10px 0;
	font-size: 22px;
}

.post p { clear: right }

div.postInfo { margin-top: 10px }
div.postInfo p {
	background: #042b3b;
	border: 1px solid #264758;
	border-radius: 12px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	box-shadow: 0 0 10px #333 inset;
	-moz-box-shadow: 0 0 10px #333 inset;
	display: block;
	float: left;
	height: 25px;
	margin-right: 10px;
	padding: 0 10px;
	line-height: 25px;
}
div.postInfo p a {
	border: none;
	padding: 0 2px;
}

div.sexy-bookmarks a { border: none }

a.continue {
	background: url(images/continue.png) no-repeat;
	width: 152px;
	height: 28px;
	display: block;
	border: none;
	float: right;
	text-indent: -9999px;
	margin-bottom: 20px;
}
a.continue:active, .older a:active, .newer a:active, .olderComm a:active, .newerComm a:active, #submit:active {
	background-position: bottom left;
	border: none;
}

#nextPrev {
	display: block;
	clear: both;
}
#nextPrev li {
	display: inline;
	list-style: none;
}

.older a {
	background: url(images/olderPosts.png) no-repeat;
	width: 152px;
	height: 28px;
	display: block;
	border: none;
	float: left;
	text-indent: -9999px;
	margin-top: 10px;
}
.newer a {
	background: url(images/newerPosts.png) no-repeat;
	width: 152px;
	height: 28px;
	display: block;
	border: none;
	float: right;
	text-indent: -9999px;
	margin-top: 10px;
}


/* PORTFOLIO */
.portfolioThumbs { float: left; margin-top: 15px }
.portfolioThumbs li { margin: 0 20px 20px 0 }
.portfolioThumbs li img {
	box-shadow: 0 -1px 10px #111;
	-moz-box-shadow: 0 -1px 10px #111;
	-webkit-box-shadow: 0 -1px 10px #111;
}

dl {
	width: 290px;
	margin-top: 15px;
	float: right;
}
dt {
	font: 16px/24px ComfortaaRegular, Verdana, Arial, Helvetica, sans-serif;
	background: #042b3b;
	border: 1px solid #264758;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	box-shadow: 0 0 10px #333 inset;
	-moz-box-shadow: 0 0 10px #333 inset;
	padding: 3px 10px;
	margin-bottom: 5px;
}
dd {
	margin-bottom: 10px;
	padding-left: 3px;
}

ul.bullets li { margin-bottom: 3px }


/* COMMENTS */
.commentlist { width: 600px; color: #fff }
.commentlist a, #respond a { border: none }
.commentlist a:hover, #respond a:hover { border-bottom: 1px solid #f90 }

h2.orange {
	background: url(images/hOrange.png) no-repeat;
	width: 574px;
	height: 34px;
	clear: both;
	font: 18px/34px ComfortaaRegular, Corbel, Arial, Helvetica, sans-serif;
	padding: 0 15px;
	margin: 15px 0 10px;
}

.commNavigation { margin: 18px 0 }

.olderComm a {
	background: url(images/olderComments.png) no-repeat;
	width: 152px;
	height: 28px;
	display: block;
	border: none;
	text-indent: -9999px;
}

.newerComm a {
	background: url(images/newerComments.png) no-repeat;
	width: 152px;
	height: 28px;
	display: block;
	border: none;
	text-indent: -9999px;
}

.vcard {
	position: relative;
	width: 100%;
	text-align: right;
	float: right;
	height: 48px;
	display: block;
	margin-top: 10px;
}

.vcard img {
	float: right;
	margin-left: 10px;
	border: 2px solid #eee;
}

.reply {
	position: absolute;
	bottom: 0;
	left: 0;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 1px;
}

.date {
	color: #ddd;
	font-size: 13px;
	font-style: italic;
}

li.comment {
	float: right;
	width: 562px;
	border: 1px solid #063e59;
	height: 100%;
	padding: 18px;
	margin-bottom: -1px;
	background-color: #05496b;
	position: relative;
}

.commentAuthName { line-height: 26px }
li.alt { background-color: #065780 }
li.bypostauthor { background-color: #2271b3 }

ul.children {
	float: right;
	margin: 15px -18px 0;
}

li.depth-2, li.depth-2 div.vcard { width: 545px }
li.depth-3, li.depth-3 div.vcard { width: 526px }
li.depth-4, li.depth-4 div.vcard { width: 507px }
li.depth-5, li.depth-5 div.vcard { width: 488px }
li.depth-2, li.depth-3, li.depth-4, li.depth-5 { border-right: none }

.depth-1:first-child { border-top-right-radius: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 15px; }
.depth-1:last-child { border-bottom-right-radius: 15px; -moz-border-radius-bottomright: 15px; -webkit-border-bottom-right-radius: 15px; }
.depth-1:first-child, .depth-2:first-child, .depth-3:first-child, .depth-4:first-child, .depth-5:first-child {
	border-top-left-radius: 15px;
	-moz-border-radius-topleft: 15px;
	-webkit-border-top-left-radius: 15px;
}
.depth-1:last-child, .depth-2:last-child, .depth-3:last-child, .depth-4:last-child, .depth-5:last-child {
	border-bottom-left-radius: 15px;
	-moz-border-radius-bottomleft: 15px;
	-webkit-border-bottom-left-radius: 15px;
}

#respond {
	background-color: #063e59;
	border: 1px solid #074361;
	margin-top: 15px;
	border-radius: 18px;
	-moz-border-radius: 18px;
	-webkit-border-radius: 18px;
}

h3#reply {
	background: none;
	font-size: 20px;
	line-height: 26px;
	padding: 0;
	margin: 18px 18px 5px;
}

p.moderation {
	font-style: italic;
	color: #ddd;
	font-size: 12px;
	line-height: 16px;
}

#commentForm { margin: 18px }

.commentFields {
	width: 47%;
	display: block;
	float: left;
	margin: 0 25px 15px 0;
}
.commentFields:nth-last-child(even) { margin-right: 0 }
#mainComment {
	width: 100%;
	margin-right: 0;
}

label {
	width: 100px;
	float: left;
	font-size: 13px;
	line-height: 18px;
	margin-bottom: 3px;
}

.field {
	height: 22px;
	width: 100%;
	background-color: #eee;
	border: 2px solid #2b93d9;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	box-shadow: 0 2px 10px inset #bbb;
	-moz-box-shadow: 0 2px 10px inset #bbb;
	padding: 3px;
	display: block;
}
#comment {
	overflow: auto;
	width: 99%;
	height: 125px;
	background-color: #eee;
	border: 2px solid #2b93d9;
	border-radius: 9px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	box-shadow: 0 2px 10px inset #bbb;
	-moz-box-shadow: 0 2px 10px inset #bbb;
	padding: 3px;
}
.field, #comment { font: 12px/17px Corbel, Arial, Helvetica, sans-serif; }
.field:hover, #comment:hover, .field:hover, #comment:focus, .field:active, #comment:active {
	background-color: #fff;
	border-color: #d9860b;
}
#cancel-comment-reply-link { margin: 0 0 0 18px }
#submit {
	background: url(images/submitComment.png) no-repeat;
	width: 152px;
	height: 28px;
	display: block;
	border: none;
	text-indent: -9999px;
}
.subscribe-to-comments {
	width: 100%;
	margin-top: 10px;
}
#subscribe { float: left }
.subscribe-to-comments label {
	float: left;
	width: 400px;
	margin: 1px 0 0 3px;
}


/* CONTACT */
form { text-align: left }
#fields { width: 602px }

.inputBox {
	display: block;
	float: left;
	margin-bottom: 12px;
}

label {
	display: block;
	padding-left: 3px;
	margin-bottom: 3px;
}

.fieldContact {
	width: 475px;
	padding: 0 6px;
	height: 22px;
	line-height: 24px;
}

#msgField {
	display: block;
	float: left;
	margin: 0 0 10px 0;
}

.textField {
	width: 475px;
	height: 135px;
	border: 1px solid #ccc;
	padding: 3px 6px;
}

.fieldContact, .textField {
	font: 12px/17px Corbel, Arial, Helvetica, sans-serif;
	background-color: #eee;
	border: 2px solid #2b93d9;
	border-radius: 9px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	box-shadow: 0 2px 10px inset #bbb;
	-moz-box-shadow: 0 2px 10px inset #bbb;
}
.fieldContact:hover, .textField:hover, .fieldContact:focus, .textField:focus, .fieldContact:active, .textField:active {
	background-color: #fff;
	border-color: #d9860b;
}

.buttonContainer { float: right }
.button {
	width: 65px;
	margin-left: 8px;
}

.required { color: #f90 }
#message {
	margin: 15px 0;
	padding: 10px 25px;
	background-color: #065780;
	border: 1px solid #052d41;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	box-shadow: 0 0 10px inset #074665;
	-moz-box-shadow: 0 0 10px inset #074665;
	display: none;
}
.errorMessages { margin-top: 5px }
.errorMessages li {
	list-style-position: outside;
	list-style: disc;
	margin-bottom: 3px;
	font-style: italic;
}


h2#contactInfo {
	background: url(images/hOrange.png) no-repeat;
	width: 589px;
	padding-left: 15px;
	height: 34px;
	clear: both;
	line-height: 34px;
	font-size: 18px;
	color: #001a33;
	margin-bottom: 20px;
}

.socialLinks { margin-bottom: 15px }
.socialLinks li {
	display: inline;
	margin-right: 10px;
}
.socialLinks li a { border: none }
.socialLinks li a:active { margin-top: 1px }


/* FOOTER */
#footer {
	clear: both;
	padding: 0 18px;
	position: relative;
}

#fPosts, #fComms {
	float: left;
	margin-right: 26px;
	width: 289px;
}

#fBio {
	float: right;
	width: 294px;
}

#footer div h3 {
	height: 26px;
	line-height: 26px;
	padding: 0 15px;
	font-size: 18px;
	text-shadow: -1px -1px 1px #666;
	margin-bottom: 5px;
}

#fPosts h3, #fComms h3 {
	background: url(images/h3Recent.png) no-repeat;
	width: 259px;
}

#fBio h3 {
	background: url(images/h3MiniBio.png) no-repeat;
	width: 264;
}

#footer div ul { margin: 0 2px }


#copyright {
	clear: both;
	padding: 40px 0 10px;
	text-align: center;
	height: 30px;
	line-height: 30px;
}

#copyright span {
	background: #042b3b;
	border: 1px solid #264758;
	border-radius: 15px;
	box-shadow: 0 0 10px #333 inset;
	-moz-border-radius: 15px;
	-moz-box-shadow: 0 0 10px #333 inset;
	-webkit-border-radius: 15px;
	padding: 8px 25px;
}