/* -------------------------------------------
project:	Zonica.com
date:		05/06/08
------------------------------------------- */

html { font-size: 100.01%; }
body { margin: 0; padding: 0 0 15px; background: #fff; color: #333; font: 62.5%/1.4 Arial,Helvetica,sans-serif; }
textarea, input, select, option, optgroup, button { font: 1em Arial,Helvetica,sans-serif; }

/* RE-SETS
------------------------------------------- */
* { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }

li, dt, dd, p, th, td, caption { font-size: 1.4em; }
ul, ol, dl { margin-bottom: 1.5em; }
p { margin-bottom: 1.25em; }
li *, li p, li li, dt *, dd *, p * { font-size: 1em; }

fieldset, img { border: none; }
button { overflow: visible; cursor: pointer; }
legend { display: none; }

pre { font: 1.1em "Courier New",monospace; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ }

em { background: #FFFF9D; font-style: normal; }

a { color: #a00; text-decoration: none; }
a:hover, a:focus, a:active { color: #a00; text-decoration: underline; }

/* HEADINGS
------------------------------------------- */
h1, h2, h3, h4, h5, h6 { margin: 0 0 20px; font: normal 2.4em Arial,Helvetica,sans-serif; color: #666; }
h1 { margin-bottom: 30px; font-size: 4.0em; }
h2 { margin: 20px 0; font-size: 2.6em; }
h3 { margin: 0 0 15px; color: #333; font-size: 1.4em; font-weight: bold; }
 #side h3 { font-size: 1.6em; text-transform: uppercase; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1.0em; }

/* HELPERS
------------------------------------------- */
.wrapper { width: 100%; overflow: hidden; }
.center { margin-left: auto; margin-right: auto; text-align: center; }
.offset { position: absolute; left: -10001px; overflow: hidden; height: 0; margin: 0; line-height: 0; }

legend.offset { display: none; }

/* LAYOUT
------------------------------------------- */
#root { border-top: 2.1em solid #333; }
 #top { position: relative; width: 770px; height: 120px; margin: 0 auto 30px; padding: 0 15px; border-bottom: 1px solid #e5e5e5; }
  #logo { position: absolute; left: 20px; top: 50%; width: 106px; height: 26px; margin: -13px 0 0; padding: 0; background: url(../images/zonica.png) no-repeat; }
   #logo a { display: block; overflow: hidden; width: 100%; height: 100%; text-indent: -10001px; }
  #top p.contact { position: absolute; top: -1.7em; right: 20px; color: #bcbcbc; font-size: 1.1em; }
   #top p.contact a { color: #bcbcbc; }
   #top p.contact a:hover { color: #fff; }
  #nav { position: absolute; right: 10px; top: 50%; float: right; list-style: none; margin: -15px 0 0; padding: 0; }
   #nav li { display: inline; float: left; margin: 0 0 0 9px; }
    #nav li a { overflow: hidden; float: left; height: 10px; border: 10px solid #fff; background: url(../images/nav-a.png) no-repeat; text-indent: -10001em; }
    #nav li.about-us a { width: 63px; background-position: 0px 0; } #nav li.about-us a:hover, #nav li.about-us a:focus { background-position: 0px -10px; } #nav li.about-us a.active { background-position: 0px -20px !important; }
    #nav li.services a { width: 57px; background-position: -92px 0; } #nav li.services a:hover, #nav li.services a:focus { background-position: -92px -10px; } #nav li.services a.active { background-position: -92px -20px !important; }
    #nav li.clients a { width: 50px; background-position: -178px 0; } #nav li.clients a:hover, #nav li.clients a:focus { background-position: -178px -10px; } #nav li.clients a.active { background-position: -178px -20px !important; }
    #nav li.case-studies a { width: 87px; background-position: -257px 0; } #nav li.case-studies a:hover, #nav li.case-studies a:focus { background-position: -257px -10px; } #nav li.case-studies a.active { background-position: -257px -20px !important; }
    #nav li.blog a { width: 33px; background-position: -373px 0; } #nav li.blog a:hover, #nav li.blog a:focus { background-position: -373px -10px; } #nav li.blog a.active { background-position: -373px -20px !important; }
    #nav li.contact-us a { width: 77px; background-position: -435px 0; } #nav li.contact-us a:hover, #nav li.contact-us a:focus { background-position: -435px -10px; } #nav li.contact-us a.active { background-position: -435px -20px !important; }
    #nav li span { position: absolute; left: -10001px; }
 #header { position: relative; width: 800px; margin: -31px auto 25px; padding: 10px 0 1px; background: #2e6b9a url(../images/header.jpg) no-repeat; color: #fff; }
  #header h1 { position: absolute; left: -10001px; top: -10001px; }
  #header h2 { margin: 0 10px 10px 538px; color: #fff; font-size: 1.2em; line-height: 1.3; }
  #header p { margin: 0 10px 10px 538px; line-height: 1.3; }
 #content { overflow: hidden; width: 770px; margin: 0 auto; padding: 0 15px 25px; }
  #content h1 {  }
  #content div.wrapper { overflow: hidden; width: 100%; }
   #cols { overflow: hidden; width: 100%; }
    #main { float: left; width: 480px; }
    #side { float: right; width: 195px; padding: 0 15px; }
    #cols .shift { padding-top: 10px; }
 #additional { margin: 0 0 20px; background: #f4f4f4; }
  #additional div.inner { width: 770px; margin: 0 auto; padding: 25px 15px; }
  * html #additional div.inner { padding-bottom: 15px; }
   #additional p { margin: 5px 0 0; font-size: 1.2em; }
   #additional li { font-size: 1.2em; }
   #additional form { margin: 0; padding: 0; }
    #additional input { float: left; width: 180px; margin: 0 2px 0 0; padding: 2px; border: 1px solid #999; }
    #additional button { overflow: visible; float: left; padding: 0 5px; }
 #footer { width: 770px; margin: 0 auto; padding: 0 15px; background: url(../images/zonica-icon.png) 25px 50% no-repeat; }
  #footer p { margin: 3px 0 3px 50px; font-size: 1.1em; }
   
/* SKIP LINKS
------------------------------------------- */
#skip-links { position: absolute; top: 0; left: -10001px; list-style: none; margin: 0; padding: 0; }
 #skip-links li a:focus, #skip-links li a:active { display: block; position: absolute; left: 10001px; top: 0; z-index: 10001; width: 800px; margin: 0; padding: 2px 0; background: #444; color: #fff; font-size: 1.4em; text-align: center; }

/* GENERAL
------------------------------------------- */
div.columns-three-a { overflow: hidden; width: 100%; }
 div.columns-three-a div.column { display: inline; float: left; width: 215px; }
 div.columns-three-a div.second { width: 280px; margin: 0 25px; }
 div.columns-three-a div.third { width: 200px; padding-left: 15px; }
 
div.columns-two-a { overflow: hidden; width: 100%; }
 div.columns-two-a div.column { display: inline; float: left; width: 47%; }
 div.columns-two-a div.second { float: right; }
 
div.box-a { margin: 0 0 20px; padding: 15px 15px 5px; background: #f4f4f4; }
 div.box-a p { margin-bottom: 10px; }
#side div.box-a { margin-left: -15px; margin-right: -15px; }
div.box-b { margin: 0 0 25px; }

div.showcase-a { overflow: hidden; width: 100%; padding: 0; }
 div.showcase-a div.row { overflow: hidden; margin: 0 0 0 -58px; padding: 0; }
 * html div.showcase-a div.row { width: 829px; }
  div.showcase-a div.item { display: inline; float: left; width: 218px; margin: 0 0 0 58px; padding: 0 0 25px; }
   div.showcase-a div.item h3 { margin: 0 0 3px; padding: 0 9px; font-size: 1.4em; font-weight: normal; }
   div.showcase-a div.item h3 a { font-weight: bold; }
   div.showcase-a div.item p { margin: 0 0 3px; padding: 0 9px; font-size: 1.2em; }
   div.showcase-a div.item p.image { margin: 0 0 7px; padding: 0; }
    div.showcase-a div.item p.image img { display: block; padding: 3px; border: 6px solid #ccc; }
	div.showcase-a div.item p.image img:hover { border-color: #a00; } 
#main div.showcase-a + h2 { margin-top: 0; }
 #main div.showcase-a div.row { margin-left: -44px; }
  #main div.showcase-a div.row div.item { margin-bottom: 15px; margin-left: 44px; }
 
div.testimonial-a { margin: 0 0 15px; }
 div.testimonial-a h3 { margin: 0; color: #333; font-size: 1.4em; line-height: 1.4; font-weight: bold; }
 div.testimonial-a blockquote { margin: 0; padding: 0; }
 div.testimonial-a p { margin: 0; }
 div.testimonial-a p.author { color: #666; }
 
div.feature-a { overflow: hidden; width: 100%; }
 div.feature-a h3 { float: left; width: 155px; margin: 0 -155px 0 0; line-height: 120%;}
 div.feature-a p { margin-left: 165px; }

div.feature-b { }
 div.feature-b h3 { margin-bottom: 4px; }
 div.feature-b p { }
 
div.services-a { overflow: hidden; width: 100%; }
 div.services-a * { margin-right: 305px; }
  div.services-a * * { margin-right: 0; }
 div.services-a h2 { margin-top: 5px; margin-bottom: 15px; }
 div.services-a p.info { float: right; width: 175px; margin: -10px 0 0 -225px; padding: 10px 25px; background: #f4f4f4; line-height: 1.5; font-size: 11px; }
 
ul.icons-a { list-style: none; margin: 0 0 15px; padding: 0; }
 ul.icons-a li { margin: 0 0 5px; padding: 1px 0 1px 25px; }
 ul.icons-a li.pdf { background: url(../images/icon-pdf-a.gif) 0 0.15em no-repeat; }
 ul.icons-a li.link { background: url(../images/icon-link-a.gif) 3px 0.15em no-repeat; }
 ul.icons-a li.card { background: url(../images/icon-card-a.gif) 0 0.4em no-repeat; }
 ul.icons-a li.feed { background: url(../images/icon-feed-a.gif) 0 0.2em no-repeat; }
 
ul.studies-a { list-style: none; margin: 0 0 15px; padding: 0; }
 ul.studies-a li { margin: 0 0 15px; font-size: 1.2em; }
  ul.studies-a li a { font-size: 1.17em; }
  
ul.info-a { list-style: none; margin: 0 0 15px; padding: 12px 15px 5px; background: #f4f4f4; }
 ul.info-a li { overflow: hidden; width: 100%; margin: 0 0 7px; }
  ul.info-a li strong { float: left; width: 115px; padding: 0 10px 0 0; font-weight: normal; }
 
ul.logos-a { overflow: hidden; list-style: none; margin: 0 0 15px -15px; padding: 0; }
* html ul.logos-a { width: 495px; }
 ul.logos-a li { display: inline; float: left; width: 150px; margin: 0 0 25px 15px; }
 
ul.bookmarks-a { list-style: none; overflow: hidden; width: 100%; margin: 0 0 15px; padding: 0; }
 ul.bookmarks-a li { display: inline; float: left; margin: 0 8px 0 0; }
  ul.bookmarks-a li a { overflow: hidden; float: left; width: 16px; height: 16px; background: url(../images/bookmarks-a.png) no-repeat; text-indent: -10001px; opacity: 0.5; }
  ul.bookmarks-a li a:hover { opacity: 1; }
  ul.bookmarks-a li.delicious a { background-position: 0 0; }
  ul.bookmarks-a li.digg a { background-position: -16px 0; }
  ul.bookmarks-a li.furl a { background-position: -32px 0; }
  ul.bookmarks-a li.gwar a { background-position: -48px 0; }
  ul.bookmarks-a li.newsvine a { background-position: -64px 0; }
  ul.bookmarks-a li.technorati a { background-position: -80px 0; }
  
ul.bookmarks-b { list-style: none; overflow: hidden; width: 100%; margin: 0 0 15px; padding: 0; }
 ul.bookmarks-b li { display: inline; float: left; margin: 0 8px 0 0; }
  ul.bookmarks-b li a { float: left; opacity: 0.5; }
  ul.bookmarks-b li a:hover { opacity: 1; }
   ul.bookmarks-b li a img { float: left; }
 
ul.a { list-style: none; margin: 0 0 15px; padding: 0; }
 ul.a li { margin: 0 0 3px; padding: 0 0 0 25px; background: url(../images/bullet-a.gif) 8px 6px no-repeat; }
 ul.a li.active, ul.a li.current_page_item, ul.a li.current-cat { font-weight: bold; }
  ul.a li.active a , ul.a li.current_page_item a, ul.a li.current-cat a { color: #333; }
 
form.a { margin: 0; padding: 0; }
 form.a p { margin: 0 0 10px; padding: 0 6px 0 0; }
 form.a p.submit { font-size: 1.2em; }
  form.a p label { display: block; margin: 0 0 2px; }
  form.a p input { width: 100%; padding: 2px; border: 1px solid #999; }
  form.a p textarea { width: 100%; height: 102px; padding: 2px; border: 1px solid #999; }
  form.a p button { padding: 1px 10px; }
 form.a div.double { overflow: hidden; width: 100%; margin: 0 0 10px; }
  form.a div.double p { float: right; width: 45%; }
  form.a div.double p.first { float: left; }
  
form.b { margin: 0 0 15px; padding: 0; }
 form.b p { margin: 0 0 5px; }
 form.b p.submit { padding-left: 90px; }
  form.b p label { float: left; width: 80px; padding: 0 10px 0 0; }
  form.b p input { width: 274px; margin: 0 3px 0 0;  padding: 2px; border: 1px solid #ccc; }
  form.b p textarea { width: 374px; height: 130px; margin: 0 3px 0 0;  padding: 2px; border: 1px solid #ccc; }
  form.b p button { padding: 2px 5px; }
  form.b p span { font-size: 11px; text-transform: uppercase; }
 
/* ELEMENTS
------------------------------------------- */
.home div.showcase-a { }
.home h2 { margin-top: 0; }

.blog { }
 .blog h1 { margin-bottom: 25px; }
 .blog h2 { margin-top: 25px; }
 div.posts { }
  div.posts h2 { margin-top: 0; }
 div.post { overflow: hidden; width: 100%; }
  div.post p.date { margin-top: -10px; color: #999; }
  div.post blockquote { margin: 0 0 15px; padding: 0 0 0 30px; background: url(http://www.zonica.com/images/quotie-a.gif) 0 3px no-repeat; }
   div.post blockquote p { margin: 0; }
  div.post ol { margin: 0 0 15px; padding: 0 0 0 30px; }
  div.post img { padding: 2px; border: 2px solid #ccc; }
  div.post img.left { float: left; margin: 0 10px 3px 0; }
  div.post img.right { float: right; margin: 0 0 3px 10px; }
 div.post-info { margin: 20px 0 15px; padding: 10px 15px; background: #f4f4f4; }
  div.post-info p { margin: 0; }
  div.post-info p.bookmark { display: inline; float: right; margin: 2px 0 0 10px; }
 div.comments {  }
  div.comment { overflow: hidden; width: 100%; padding: 20px 0 10px; border-top: 1px solid #ccc; }
   div.comment p.author { margin: 0; }
   div.comment p.date { margin: 0 0 10px; color: #999; }
   div.comment blockquote { margin: 0; padding: 0; }
    div.comment blockquote p { margin: 0 0 10px; font-size: 1.2em; }
  div.comments div.first { padding-top: 0; border-top: none; }
 div.add-comment { }
  div.add-comment h2 { margin-top: 10px; }
  div.add-comment #f-url { width: 234px; }
  
#call-us-box { }
 #call-us-box h4 { overflow: hidden; height: 19px; margin: 0; padding: 0 0 10px; background: url(../images/number.png) no-repeat; text-indent: -10001px; }

#hcard-box { }
 #hcard-box ul { list-style: none; margin: 0 0 20px; padding: 0; }
  #hcard-box ul li { margin: 0 0 5px; font-weight: normal; }
  #hcard-box ul li.first { font-weight: bold; }
   #hcard-box ul li strong { float: left; width: 50px; padding: 0 10px 0 0; font-weight: normal; }
   #hcard-box ul li.first strong { font-weight: bold; }
 #hcard-box h4 { margin: 0; font-size: 1.4em; line-height: 1.4; }
  #hcard-box h4 a { color: #333; text-decoration: none; }
 
#search-box { margin-right: -15px; }
 #search-box p { font-size: 1.2em; }
  #search-box input { width: 130px; }
  #search-box button { padding: 1px 5px; }
 
ul#social { list-style: none; overflow: hidden; width: 100%; margin: 0 0 15px; padding: 0; }
 ul#social li { display: inline; float: left; margin: 0 8px 0 0; }
  ul#social li a { overflow: hidden; float: left; opacity: 0.5; }
  ul#social li a:hover { opacity: 1; }
   ul#social li a img { float: left; }
   
#showcase { margin: 0 0 25px; padding: 8px; background: #e5e5e5; }
 #showcase div.images { position: relative; overflow: hidden; width: 100%; }
  #showcase div.images p { margin: 0 0 8px; }
   #showcase div.images p img { display: block; border: 2px solid #fff; }
 #showcase ul.index { position: relative; overflow: hidden; list-style: none; width: 100%; margin: 8px 0 0; padding: 0; text-align: center; }
  #showcase ul.index li { display: inline; padding: 0 2px; }
  #showcase ul.index li.step { position: absolute; padding: 0; }
  #showcase ul.index li.prev { left: 5px; }
  #showcase ul.index li.next { right: 5px; }
   #showcase ul.index li a { padding: 2px 5px; font-weight: normal; }
   #showcase ul.index li a:hover { background: #ccc; text-decoration: none; }
   #showcase ul.index li a.current { background: #666 !important; color: #fff; }
   #showcase ul.index li.step span { position: relative; top: -2px; font-weight: bold; color: #000; }
   #showcase ul.index li.step a { padding: 0; }
   #showcase ul.index li.step a:hover { background: none; }
   
   
.table-a { margin: 0 0 15px 0; }
.table-a caption { display: none;}
.table-a thead {}
.table-a thead th {text-align: left; font-weight: bold;}

 
/* PLUGINS
------------------------------------------- */
.sIFR-flash { visibility: visible !important; margin: 0; }
.sIFR-replaced { visibility: visible !important; }
 .sIFR-replaced embed { display: block; }
span.sIFR-alternate { display: block; position: absolute; left: 0; top: 0; overflow: hidden; width: 0; height: 0; }
.sIFR-flash + div[adblocktab=true] { display: none !important; }

.sIFR-hasFlash #content h1 { visibility: hidden; }
.sIFR-hasFlash #content h2 { visibility: hidden; }
.sIFR-hasFlash #side h3 { visibility: hidden; height: 20px; margin: 0 0 15px; font-size: 1.6em; }
.sIFR-hasFlash #side div.box-a h3 { height: 25px; margin-bottom: 10px; font-size: 2em; }
.sIFR-hasFlash #additional h3  { visibility: hidden; margin: 0 0 10px; font-size: 1.6em; }