/* Load basic components */
@import url('basic.reset.css');
@import url('basic.helpers.css');

/* Load basic theme */
@import url('basic.theme.screen.css');

/* ============================================================================
 == LAYOUT =====
 =========================================================================== */

/* Top wrappers */
body { background: url('../img/bg.png') repeat top left; }
#page { }

/* Header */
#header { height: 90px; background: #37A315 url('../img/head.bg.png') repeat-x top left; margin-top: 20px; margin-bottom: 5px; }
	#header h1 { width: 243px; height: 90px; position: relative; left: 20px; }
	#header h1 a { width: 100%; height: 100%; position: relative; display: block; overflow: hidden; text-decoration: none; color: white; font-family: sans-serif; font-weight: bold; font-size: 22px; }
	#header h1 a span { width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; background: url('../img/head.logo.png') no-repeat top left; }

/* Navigation */
#navigation { display: none; }

/* Contact */
#contact { position: relative; padding: 10px 20px; background: url('../img/contact.bg.gif') repeat top left; font-size: 17px; font-weight: bold; font-family: Calibri, "Trebuchet MS", sans-serif; line-height: 1.3em; }
	#contact h4 { display: none; }
	#contact li a { color: black; text-decoration: none; }
	#contact .general li { float: left; width: auto; clear: left; padding: 10px; margin-bottom: 10px; background: white; color: black; }
	#contact .general li.active { background-color: black; color: white; cursor: pointer; }
	#contact .general li.active a { background-color: black; color: white; }

	#contact .payment { padding: 10px 10px 10px 10px; margin-bottom: 10px; background: white; color: black; float: left; width: auto; }
	#contact .payment p { display: none; }
	#contact .payment.active p { display: block; }
	#contact .payment h3 { float: left; width: auto; font-weight: bold; margin-right: 0px; cursor: pointer; padding-right: 20px; background: url('../img/contact.arrow.png') no-repeat 100% 60%; }
	#contact .payment p { width: 220px; margin-left: 10px; float: left; font-weight: normal; font-size: 14px; }

	#contact .socioware { clear: left; padding: 10px; background: white; color: black; float: left; width: auto; }
	#contact .socioware li { float: left; margin-left: 10px; width: auto;  }
	#contact .socioware li.first { margin-left: 0px; }
	#contact .socioware li a { width: 105px; height: 45px; position: relative; display: block; overflow: hidden; text-decoration: none; }
	#contact .socioware li a span { width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; background: no-repeat top left; }
	#contact .socioware li a:hover span { background-repeat: no-repeat; background-position: bottom left; }
	#contact .socioware li.youtube a span { background-image: url('../img/misc.youtube.png'); }
	#contact .socioware li.twitter a span { background-image: url('../img/misc.twitter.png'); }
	#contact .socioware li.facebook a span { background-image: url('../img/misc.facebook.png'); }
	#contact .socioware li.blog a { width: 59px; }
	#contact .socioware li.blog a span { background-image: url('../img/misc.blog.png'); }

	#contact .qrcode { position: absolute; top: 20px; right: 20px; padding: 5px; border: 1px solid #d0d0d0; }
	#contact .qrcode:hover { border: 1px solid #a0a0a0; }
	

/* Content */
#content { }
	#content h2 { padding: 10px 10px 10px 20px; margin: 10px 0; background: #03B5CE url('../img/title.bg.gif') repeat top left; }
	#content div { padding: 10px 0px 10px 20px;  width: 970px; }
	#content div div { padding: 0px; width: auto; }

	#content .projects { list-style: none; margin-left: 0; }
	#content .projects .project { list-style: none; width: 310px; margin: 0 10px 20px 0; float: left; border: 1px solid #c6c6c6; -moz-border-radius: 15px; -webkit-border-radius: 15px; }
	#content .projects .project .thumbnail { width: 290px; height: 120px; display: block; border-bottom: 1px solid #c6c6c6; padding: 10px;  }
	#content .projects .project .thumbnail img { margin: 0;  }
	#content .projects .project .info { padding: 10px 15px 10px; }
	#content .projects .project .info h3 { font-size: 20px; margin-bottom: 5px; }
	#content .projects .project .info h3 a { color: black; background: none; padding: 0;}
	#content .projects .project .info h3 .subtitle { font-size: 14px; display: block; font-weight: normal; }
	#content .projects .project .info p.services {  }
	#content .projects .project .info p.description {  }
	#content .projects .project .info p { margin: 0; height: 25px; line-height: 25px; margin-bottom: 5px; clear: left; background-color: #e3e3e3; color: #222; float: left; width: auto; padding: 0 7px; }
	#content .projects .project .info abbr { border-bottom: 1px dotted #666; cursor: help; }


	#content .codeListing ul { margin-left: 0; padding-left: 0; margin-bottom: 5px;  }
	#content .codeListing li { list-style: none; background: no-repeat 0 2px; padding: 0 0 0 22px; }
	#content .codeListing .dir { background-image: url('../img/icons/folder.png'); }
	#content .codeListing .file { background-image: url('../img/icons/page_white_cup.png'); background-position: 0 3px; }

	#content .codeListing .list { float: left; width: 250px; }
	#content .codeListing .code { padding: 10px; margin: 10px 0; margin-left: 260px; font-size: 12px; line-height: 120%; border: 1px solid silver; -moz-border-radius: 15px; -webkit-border-radius: 15px; }

    
/* Footer */
#footer { padding: 10px 20px; margin: 10px 0; border-top: 1px solid silver; border-bottom: 1px solid silver;  }
	#footer .credits { float: left; width: auto; }
	#footer .backend { float: right; width: auto; }