/****************************************************
    CSS file for http://www.creativenights.com/
    Copyright (c) Marko Dugonjic, 2005-2009.
****************************************************/

*       { margin: 0; padding: 0; }
                                            
html    { text-align: center; background: #000 url(i/bg-2010.jpg) fixed no-repeat 50% 0; color: #fff; font: 11px/18px "proxima-nova-1", "proxima-nova-2", Arial, Helvetica, sans-serif; }
body 	{  }

p 		{ font-size: 14px; line-height: 20px; margin-bottom: 20px; }
li 		{ font-size: 14px; line-height: 20px; list-style: none; }

strong { font-weight: 600; }

a 			{ color: #b1ddfe; font-weight: 600; text-decoration: none; outline: none; }
a:hover 	{ color: #fff; border-bottom: .1em solid #fff; }

a img,
fieldset 	{ border: 0; }
img 		{ color: #335E91; }

#sizer  { width: 894px; margin: 0 auto; padding: 0; text-align: left; border: 1px solid #4C7AA7; border-width: 0 1px; }
#sizer:after  { content: " "; display: block; clear: both; height: 0; font-size: 0; visibility: hidden; }
#header 	{ padding-bottom: 4em !important; border-top: 0 !important; }
#header a   { font-weight: normal; }

#logo 	{ float: left; display: inline; position: relative; margin: 0 0 0 -44px; background: url(i/cnse_logo.gif) no-repeat 10px 0; }
#logo a { display: block; width: 243px; height: 24px; text-indent: -9999px; overflow: hidden; border: 0; }

#tagline	{ float: left; clear: left; width: 200px; }
#tagline p  { padding: 12px 2px 0; font-size: 12px; text-transform: uppercase; color: #B1DDFE; }

#main-nav		{ float: right; padding: 10px 0 0 0; }
#main-nav li	{ list-style: none; display: inline; }

#main-nav li a,
a.pseudo-button         { display: inline-block; font-size: 12px; text-transform: uppercase; padding: 2px 15px 1px; font-weight: normal; border: 0; 
    border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; 
    -webkit-transition: all .2s ease; }

a.pseudo-button { background: #4776ad; }
#main-nav li a:hover,
#main-nav li a:focus,
a.pseudo-button:hover,
a.pseudo-button:focus   { color: #369; background: #fff; background: rgba(255,255,255,.9); }  

#main-nav li.selected a { color: #b1ddfe; background: #4776ad; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; }


/*** Content area ***/

body #content #page-intro p         { font: 700 32px/40px "proxima-nova-1","proxima-nova-2", "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0 0 40px; letter-spacing: -1px; }

.section,
#portfolio-list .section    { position: relative; float: left; display: inline; width: 674px; width: 684px; padding: 60px 105px; border-top: 1px solid #4C7AA7; border-bottom: 1px solid #294b74; background: #335E91 url(section-grad.gif) repeat-x 0 0; }

#content .col        { float: left; width: 320px; }
#content .col-left   { margin-right: 44px; }
#content .col-right  { }

#content h1         { font: 600 32px/40px "proxima-nova-1","proxima-nova-2", "Helvetica Neue", Helvetica, Arial, sans-serif; margin-bottom: 40px; letter-spacing: -1px; }

#content h2 	    { font: 600 24px/28px "proxima-nova-1","proxima-nova-2", "Helvetica Neue", Helvetica, Arial, sans-serif; margin-bottom: 16px; text-transform: uppercase; }
#content h2 a	    { color: #fff; }
#content h2 a:hover	{ color: #b1ddfe; border: 0 !important; }

#content h3         { font: 600 14px/20px "proxima-nova-1","proxima-nova-2", "Helvetica Neue", Helvetica, Arial, sans-serif; margin-bottom: 12px; text-transform: uppercase; }

#content li         { padding-left: 19px; background: url(i/bullet.gif) no-repeat 0 .4em; }

#content blockquote         { font: italic 14px/20px Georgia, serif; }
#content blockquote p       { font-size: 14px; line-height: 20px; }
#content blockquote cite    { display: block; margin: 0 0 32px; text-align: right; }

.project-image,
.left-col 		{ float: left; clear: both; width: 211px; } 

.project-image img,
.left-col img 	{ float: right; }

.project-desc,
.right-col 		{ float: right; width: 440px; }


/*** Homepage ***/

#home-body #content .section    { padding-top: 47px; }
#home-body #page-intro          { min-height: 230px; margin-bottom: 30px; padding: 28px 0 1px 240px; border-bottom: 1px solid #4C7AA7; background: url(i/nanoscale.gif) no-repeat 0 12px; }

#client-list    { margin-bottom: 20px; }
#client-list li { margin-bottom: 10px; }

/*** Services ***/

#services-body #content p,
#services-body #content li   { font-size: 14px; line-height: 20px; }
#services-body #content p,
#services-body #content ul   { margin-bottom: 22px; }


/*** Portfolio ***/

#portfolio-body h1              { position: absolute; left: -9999px; top: -9999px; }

#portfolio-list                 { float: left; width: 100%; }
#portfolio-list li.first-child  { padding-top: 68px; }

#content .project-desc p,
#content .project-desc li       { font-size: 14px; line-height: 20px; }

#content .project-desc p        { margin-bottom: 20px; }

#content .project-desc p + ul   { margin-top: -14px; }
#content .project-desc ul       { margin-bottom: 20px; }

.project-meta			        { float: left; width: 100%; border-top: 1px solid #4C7AA7; padding-top: 2em; }

#content .responsibilities		{ float: left; width: 250px; }
#portfolio-body #content h3	    { margin-bottom: 5px; font-weight: normal; font-size: 14px; line-height: 22px; text-transform: uppercase; letter-spacing: 1px; }
#content .responsibilities li	{ list-style: none; padding-left: 19px; font-size: 14px; background: url(i/check.gif) no-repeat 2px .3em; }

.see-project-links          { float: right; }
.see-project-links a        { font-weight: normal !important; }
.see-project-links h3       { text-align: right; }

.screenshots-nav            { float: right; margin: 0 0 10px !important; padding: 0 !important; }
.screenshots-nav li         { display: inline; padding: 0 0 0 5px !important; background: none !important; }
.screenshots-nav li a       { } 
.screenshots-nav li a:hover { }

a.visit-button { clear: both; float: right; font-weight: normal !important; }


/*** About ***/

#mtz 		{ float: left; display: inline; width: 211px; margin: 0 0 0 -242px; position: relative; }
#mtz img	{ border: 4px solid #fff; margin-bottom: .3em; }
#mtz p		{ padding: 0 2px; font-size: 9px; text-align: right; text-transform: uppercase; }


/*** Footer ***/

#footer 	{ float: left; display: inline; padding-top: 5em !important; padding-bottom: 4em !important; border-bottom: 0; }
#footer p 	{ font-size: 12px; line-height: 18px; padding: 0 10px; }
#footer a 	{ line-height: 18px; }


/*** Contact ***/

#contact-body h1                { margin-bottom: 12px; }
#contact-body #page-intro       { margin-bottom: 18px !important; }
#contact-body #page-intro p     { font-weight: 600 !important; font-size: 22px !important; line-height: 28px !important; margin-bottom: 0 !important; }

#contact-form 	{ float: left; width: 100%; margin-top: 18px; padding-bottom: 20px; font-size: 14px; /* background: url(i/cnse-form.gif) no-repeat 0 100%; */ }
#contact-form p { font-size: 14px; line-height: 22px; }

fieldset 		{ padding: 20px 30px; margin-bottom: 20px; background: #4f83c1; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; } 
fieldset .col   { width: 290px !important; }

.field              { float: left; width: 100%; padding: 15px 0 17px; background: url(i/divider.gif) repeat-x 0 100%; }
.last-field         { background: none; }

.field label        { display: inline-block; padding: 0 10px 5px 0; }

.label-check        { float: left; display: inline; width: 260px; padding: 0 20px 10px 10px !important; }
.label-check input  { margin-right: 5px; }
#button-fieldset .label-check { padding: 5px 0 0 10px !important; }

.input-hidden	{ position: absolute; left: -9999px; }
.input-text,
textarea		{ padding: 2px 0 2px 2px; border: 2px solid #345E91; background: #fff; font: bold 14px/20px 'Lucida Grande', Verdana, sans-serif; color: #000; }

.input-text     { width: 280px; }
#website        { width: 440px; } 
textarea        { width: 610px; }

.select-wrapper { float: left; width: 100%; height: 30px; }

select  { width: 200px; margin-top: 2px; }
option  { padding: 0 10px; }
select,
option  { font-size: 12px !important; }
     
input#budget    { float: left; width: 80px; margin-right: 5px; padding-right: 2px; text-align: right; }             
select#currency { width: 60px; }

.input-text:focus,
textarea:focus 		{ border: 2px solid #f60; }

.input-image 				{ float: right; display: inline; margin: 0 0 0 0; background: #f60; color: #fff; outline: none; }
input[class="input-check"] 	{ margin-bottom: .15em; }

#contact-form .smallnote  { clear: both; font-size: 12px; line-height: 18px; margin-bottom: 0; padding-top: 10px; color: #b1ddfe; }
.checkgroup .smallnote { clear: both; }

/*** Form messages ***/
.error-message,
.thankyou-message { clear: both; padding: 20px 30px; margin-bottom: 20px; border: 4px solid #fff; background: #C00; color: #fff; font-weight: bold; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; }
.thankyou-message { background: #0C0; }
.error-message ul,
.error-message p,
.thankyou-message p { font-size: 18px !important; line-height: 28px !important; margin-bottom: 0 !important; }
.error-message ul { margin-top: 0 !important; }
.error-message li { list-style: square outside; margin-left: 1.8em; font-size: 18px !important; line-height: 28px !important; padding: 0 !important; background: none !important;  }