/************************************

    CSS file for jasnoiglasno.com
    (c) Creative Nights 2009.
    http://creativenights.com

*************************************/

* { margin: 0; padding: 0; }

html { font: 13px/18px Georgia, Times, serif; background: #e3f9fd; }
a:hover,
a:focus { text-decoration: none; }

#sizer { min-width: 960px; overflow: hidden; }  

.grid { width: 960px; margin: 0 auto; }  
.grid:after  { content: "."; display: block; clear: both; height: 0; font-size: 0; visibility: hidden; }
          
#header,
#main-content { float: left; width: 100%; color: #fff; background: #3ca2bc; }

#header         { background: #3ca2bc url(i/header.png) no-repeat 50% 0; }
#header .grid   { position: relative; padding-top: 400px; }
#header h1 a    { position: absolute; top: 60px; left: 260px; display: block; width: 510px; height: 130px; text-indent: -9999px; overflow: hidden; }

#main-content { text-shadow: 0 1px 1px #3791a8; background: #3ca2bc url(i/main-content-bottom.png) repeat-x 0 100%; }

#intro      { float: left; width: 540px; padding: 0 0 330px 10px; font-size: 20px; line-height: 28px; background: url(i/clouds.png) no-repeat 95px 100%; }
#intro h2   { width: 460px; height: 73px; margin-bottom: 38px; text-indent: -9999px; overflow: hidden; background: url(i/h/kako-je-lijepo.png) no-repeat; }
#intro p    { margin-bottom: 28px; }
#intro p a  { font-weight: bold; color: #ff0; text-decoration: none; border-bottom: 1px solid #ff0; }
#intro p a:hover,
#intro p a:focus { border-bottom: 1px solid #3ca2bc; }

#services       { padding: 48px 0 0 100px; margin-left: -20px; background: url(i/hive.png) no-repeat 4px 32px; }
#services li    { list-style: none; padding: 0 0 8px 22px; font-weight: bold; background: url(i/cross.png) no-repeat 6px .45em; }

#about          { float: right; }

#the-crew           { width: 404px; margin: -15px -38px 0 0; font: 12px/20px 'Lucida Grande', Verdana, sans-serif; background: url(i/sidebox-bottom.png) no-repeat 0 100%; } 
#the-crew h2        { width: 404px; height: 98px; text-indent: -9999px; overflow: hidden; background: url(i/sidebox-top.png) no-repeat; }
#the-crew ul        { width: 300px; min-height: 355px; padding: 0 48px 1px 56px; }

#the-crew .member       { list-style: none; margin-bottom: 72px; }
#the-crew .member h3    { float: right; width: 225px; font: bold 14px/20px Georgia, serif; color: #ff0; text-transform: uppercase; }
#the-crew .member img   { float: left; margin: 0 0 .2em 0; }
#the-crew .member .desc a { color: #fff; }
#the-crew .member .desc a:hover,
#the-crew .member .desc a:focus { text-decoration: none; }

#the-crew #ana img      { margin: -20px 6px 0 -3px; }
#the-crew #borja        { margin-bottom: 42px; }
#the-crew #borja img      { margin: -50px 10px 0 -1px; }

#the-crew #twitter          { list-style: none; padding-bottom: 52px; text-align: center; font-size: 16px; }
#the-crew #twitter a        { color: #ff0; text-decoration: none;  border-bottom: 1px solid #3ca2bc; }
#the-crew #twitter a:hover,
#the-crew #twitter a:focus  { border-bottom: 1px solid #ff0; } 


#contact        { position: relative; width: 210px; padding: 45px 96px 242px 86px; margin: 0 0 0 -80px; font-size: 16px; line-height: 20px; background: url(i/island.png) no-repeat 0 100%; }
#contact h2     { position: absolute; left: -9999px; top: -9999px; }
#contact strong { color: #ff0; }
#contact a          { text-decoration: none; font-weight: bold; color: #fff;  border-bottom: 1px solid #fff; }
#contact a:hover,
#contact a:focus    { border-bottom: 1px solid #3ca2bc; }

#what-we-do         { float: left; width: 100%; clear: both; font-size: 16; line-height: 20px; color: #3ca2bc; background: #e3f9fd; text-shadow: 0 1px 0 #f3fcfe; }
#what-we-do .grid   { position: relative; }

#what-we-do a       { text-decoration: none; }
#what-we-do h2      { position: absolute; top: -55px; left: 30px; width: 557px; height: 153px; text-indent: -9999px; overflow: hidden; background: url(i/h/na-primjer.png) no-repeat 0 0; }

#what-we-do #portfolio-list     { padding-top: 90px; }
#what-we-do #portfolio-list li  { float: left; width: 100%; list-style: none; padding: 72px 0; } 

#what-we-do h3    { margin-bottom: 18px; font-size: 24px; line-height: 28px; color: #f26522; }
#what-we-do .desc { width: 380px; padding: 72px 0 24px; }

#what-we-do .desc p { margin-bottom: 18px; }
#what-we-do .desc a { padding: 0 4px; color: #ff0; background: #3ca2bc; text-shadow: none; }
#what-we-do .desc a:hover,
#what-we-do .desc a:focus { text-decoration: none; color: #fff; background: #f26522; }

#what-we-do .fig            { float: left; }
#what-we-do .fig img        { display: block; background: #eee; border: 8px solid #fff; min-height: 393px;
    -webkit-box-shadow: 0 10px 30px #c1d4d7; background: #3ca2bc; }

#what-we-do .style-odd .fig     { float: left; width: 540px; }
#what-we-do .style-odd .desc    { float: right; padding-right: 10px; }
#what-we-do .style-odd .fig img { width: 524px; }

#what-we-do .style-even .fig        { float: right; width: 540px; }
#what-we-do .style-even .desc       { float: left; padding-left: 10px; }
#what-we-do .style-even .fig img    { width: 524px; }

#what-we-do .style-large .fig      { width: 960px; }
#what-we-do .style-large .desc     { clear: both; padding: 0 10px 24px; }
#what-we-do .style-large .fig img  { width: 944px; }
                                                  

#footer         { clear: both; text-align: center; color: #fff; word-spacing: .1em; background: url(i/footer.png) no-repeat 50% 100%; }
#footer .grid   { padding: 101px 0 300px; }
#footer a       { font-weight: bold; color: #ff0; text-decoration: none; border-bottom: 1px solid #3ca2bc; }
#footer a:hover,
#footer a:focus { color: #fff; border-bottom: 1px solid #fff; }