/* Global
----------------------------------------------- */



/* Structure
----------------------------------------------- */

body { font-family: serif;}


#topper { background:#fff; border-bottom:2px solid #B4D5FE; }

#wrapper { background-image:url('/wp-content/themes/ocupop/images/headers/HDR_001big.jpg'); background-repeat: no-repeat; background-position: top center;}

#container { width:1024px; margin:0px auto; background:#ffffff; height:100%;  }

#topNav { width:910px; margin:0px auto;  background:#fff; padding:6px 57px 4px 57px; font-family: sans-serif; }

#header { height:200px; background:#000; }

.singleCol { padding:0 57px; }

#intro { padding:30px 57px 0 57px; }

#leftFifty { display:inline; float:left; width:433px; margin:0 0 0 57px; padding:0 16px 0 0; }

#rightFifty { display:inline; float:right; width:433px; margin:0 57px 0 0px; padding:0 16px 0 0;}

#leftInt { display:inline; float:left; width:666px; margin:0 0 0 57px; padding:0 0 0 0; }

#rightInt { display:inline; float:right; width:204px; margin:0 57px 0 0px; padding:0 16px 0 0;}

.story { border-top:1px solid #666; width:680px; padding:15px 0 0 0; margin:0;  }

.storyFront { border-top:1px solid #666; padding:15px 0 0 0; margin:0;  }

#footer { margin:32px 57px 32px 57px; padding: 32px 0; border-top:1px solid #666; background-image:url('/wp-content/themes/ocupop/images/wordmark.jpg'); background-repeat: no-repeat; background-position:0 32px; }


/* Type
----------------------------------------------- */

p { font-family: sans-serif; font-size:12px; color:#666; margin:0 0 20px 0; line-height:16px; }

#intro p { font-size:18px; line-height:22px; color:#C3C3C3; }

h2 { font-size:36px; color:#383838; padding:0 0 15px 0; font-weight:bold;}

h3 { font-size:24px; color:#383838; padding:8px 0; font-weight:bold;}


h4 { font-size:14px; color:#383838; padding:8px 0; font-weight:bold;}

#footer { font-family: sans-serif; font-size:12px; color:#666; }

#L2sidebar h2 { font-size:24px; border-top:1px solid #666; border-bottom:1px solid #666; padding:10px 0; margin-bottom:10px; }

#L2sidebar h3 { font-size:16px; border-bottom:1px solid #666; margin-bottom:10px; }

.disHead { border-top:1px solid #666; border-bottom:1px solid #666; margin-top:30px; margin-bottom:30px; font-size:30px;}

/* Lists
----------------------------------------------- */

#topNav ul {  }

.story li { font-family: sans-serif; font-size:12px; color:#666; margin:0 0 20px 20px; line-height:16px; }

.listNoGap li  { margin:0 0 0 20px; line-height:16px; }

.listNoGapNoPad li  { margin:0 0 0 0px; line-height:16px; }

#topNav li { display:inline; font-size:12px; padding:4px; margin:0 10px 0 0; }

#footer li { padding:0 0 6px 0; }

#L2sidebar ul { padding-left:15px; font-size:12px; }

#L2sidebar ul li { padding-bottom:10px; font-size:12px; font-family: sans-serif; }

/* Nav
----------------------------------------------- */

a { font-weight:bold; color:#383838; text-decoration:none; }

a:hover { background:#B4D5FE; }

#topNav a { padding:4px; }

#topNav a:hover { background:#B4D5FE; }



/* Forms
----------------------------------------------- */

/* Tables
----------------------------------------------- */

td { vertical-align: top; }

#pricesheet { margin:0; border:0; }

#priceHeader { margin-bottom: 8px; }

.leftyPrice {border:0; width:224px; padding:0; vertical-align: top;  }

.leftyPrice p {padding:0 20px 0 0; }

#leftPriceHeader h3 { border-top:1px solid #666; border-bottom:1px solid #666;font-size:24px; color:#383838; padding:8px 0; font-weight:bold; width:216px;  }

#leftPriceFirst p { padding-top:10px;}

.rightyPrice { padding:0; margin:0; border:0; width:224px; vertical-align: top;}

#rightPriceHeader h3 { border-top:1px solid #666; border-bottom:1px solid #666; font-size:24px; color:#383838; padding:8px 0; font-weight:bold; }

#rightPriceFirst p { padding-top:10px;}

#clientShowcase { margin:0; padding:0; border:0; }

#clientShowcase tr td { padding-bottom:10px; }

.clientDesc p { margin:0 0 0 12px; }

.clientDesc h3 { margin:0 0 0 12px; padding:0 0 8px 0; }

#lfoot { width:227px; }

#lmfoot { width:243px; }

#rmfoot { width:221px; }

#rfoot { width:228px; }

/* Images
----------------------------------------------- */

.cases { clear: both; height:145px; }

.cases h3 { padding-top:0; }

.cases img { float:left; padding:0 10px 10px 0; }

/* Blog
----------------------------------------------- */

.post { margin-bottom:40px;}

.post h2 { font-size:36px; color:#383838; padding:0; margin:0 0 2px 0; font-weight:bold;}

.posthead { background:#F3F3F3; padding:16px 12px; border-bottom:1px solid #666; border-top:1px solid #666; margin-bottom:20px;  }

.posthead p  { margin:0; padding:0; }

.entry { padding:0 12px; }

.postmetadata { border-top:1px solid #666; padding-top:16px; margin-bottom:32px; }


/* Contact Form

----------------------------------------------- */

form#contactform legend {display:none; }

form#contactform label {display:block; margin:0; padding:0; margin-bottom:2px;}
 }

form#contactform fieldset {border:0; margin:0; padding:0; }

form#contactform fieldset ol {list-style-type:none; border:0; margin:0; padding:0; }

form#contactform fieldset li {list-style-type:none; border:0; margin:0; padding:0; margin-bottom:20px;}

#messaged { width:600px; height:200px; }

#response { }

/* Testimonials

----------------------------------------------- */

.testify { margin-bottom:50px;}


.testify p  { font-style: italic; margin-bottom:12px; }

p.testifier  { font-style: normal; font-weight:bold; }


/* Misc
----------------------------------------------- */

#hideMe { display:none; }




/* SLIDESHOW */

.slideshow_container .clear
{
  clear: both;
}

.slideshow_container
{
  background: #f3f3f3;
  padding: 8px;
  width: 664px;
}

.slideshow_container h3,
.slideshow_container .caption
{
  color: #383838;
  clear: right;
  float: right;
  margin: 0 0 0 10px;
  width: 214px;
}

.slideshow_container h3
{
  font-family: 'Times New Roman', Times, Georgia, serif;
  margin-bottom: .5em;
}

.slideshow_container .caption
{
  border-top: 1px solid #000;
  font-family: sans-serif;
  font-size: 11px;
  line-height: 1.4;
  padding-top: .5em;
}

.slideshow_container .slideshow img
{
  width: 440px;
  height: 243px;
}

.slideshow_container ul.slideshow_nav
{
  clear: both;
  list-style: none;
  margin: .5em 0 0;
  padding: 0;
}

.slideshow_container ul.slideshow_nav li
{
  float: left;
  font-size: 16px;
  line-height: 1;
  margin: 0;
  padding: 0;
  position: relative;
  color: #383838;
}

.slideshow_container ul.slideshow_nav li a
{
  color: #383838;
  display: block;
  float: left;
  font-family: sans-serif;
  font-weight: bold;
  outline: 0;
  text-decoration: none;
}

.slideshow_container ul.slideshow_nav li a img
{
  border: 4px solid #f3f3f3;
  display: none;
  position: absolute;
  top: -68px;
  left: -35px;
  width: 100px;
  height: 55px;
  z-index: 99;
  -moz-box-shadow: 0 0 8px #666;
  -webkit-box-shadow: 0 0 8px #666;
  box-shadow: 0 0 8px #666;
}

.slideshow_container ul.slideshow_nav li a:hover img
{
  display: block;
}

.slideshow_container ul.slideshow_nav li a:active img,
.slideshow_container ul.slideshow_nav li a:focus img,
.slideshow_container ul.slideshow_nav li.activeSlide a img
{
  display: none;
}

.slideshow_container ul.slideshow_nav li a span
{
  display: block;
  padding: 5px 8px;
  height: 14px;
  text-align: center;
}

.slideshow_container ul.slideshow_nav li a:hover span,
.slideshow_container ul.slideshow_nav li.activeSlide a span
{
  background: #B4D5FE;
}

.slideshow_container.numerous ul.slideshow_nav li
{
  font-size: 14px;
}

.slideshow_container.numerous ul.slideshow_nav li a span
{
  padding: 4px 6px;
}

.slideshow_container.taller .slideshow img
{
  width: 440px;
  height: 267px;
}


.slideshow_container.ringmark .slideshow img, .slideshow_container.dartslide .slideshow img
{
  width: 440px;
  height: 340px;
}

.slideshow_container.prairieslide .slideshow img
{
  width: 440px;
  height: 243px;
}


.slideshow_container.taller ul.slideshow_nav li a img
{
  width: 100px;
  height: 61px;
}

#tech_class_icons
{
  padding-top: 20px;
  height: 615px !important;
}

#tech_class_icons .section
{
  background-position: left top;
  background-repeat: no-repeat;
  float: left;
  padding-left: 110px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  width: 310px;
}

#tech_class_icons .section.access { background-image: url(http://ocupop.com/flash/html5/class_access.gif); }
#tech_class_icons .section.connectivity { background-image: url(http://ocupop.com/flash/html5/class_connectivity.gif); }
#tech_class_icons .section.css3 { background-image: url(http://ocupop.com/flash/html5/class_css3.gif); }
#tech_class_icons .section.graphics { background-image: url(http://ocupop.com/flash/html5/class_graphics.gif); }
#tech_class_icons .section.integration { background-image: url(http://ocupop.com/flash/html5/class_integration.gif); }
#tech_class_icons .section.multimedia { background-image: url(http://ocupop.com/flash/html5/class_multimedia.gif); }
#tech_class_icons .section.semantics { background-image: url(http://ocupop.com/flash/html5/class_semantics.gif); }
#tech_class_icons .section.storage { background-image: url(http://ocupop.com/flash/html5/class_storage.gif); }

#tech_class_icons .section.semantics,
#tech_class_icons .section.storage,
#tech_class_icons .section.multimedia,
#tech_class_icons .section.integration
{
  margin-right: 55px;
}

#tech_class_icons .section h4
{
  font-size: 17px;
  margin-top: 0;
  padding-top: 0;
}


/* jQuery UI overlay */

.ui-widget-overlay
{
  background: url(images/modal_background.png);
  position: absolute;
  top: 0;
  left: 0;
}

.ui-dialog
{
  background: #fff;
  border: 1px solid #000;
  padding: 12px;
  left: 50% !important;
  margin-left: -455px !important;
}

.ui-dialog-title
{
  font-size: 1.3em;
  font-weight: bold;
  display: block;
  margin-bottom: .5em;
}

.ui-dialog-titlebar-close
{
  background-image: url(images/close.png);
  background-repeat: none;
  background-position: left top;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 19px;
  height: 18px;
}

.ui-dialog-titlebar-close:hover
{
  background: transparent url(images/close.png) left -18px no-repeat !important;
}

.ui-dialog-titlebar-close span
{
  display: none;
}

.ui-dialog-content p
{
  font-size: 12px;
}

/* Identity Grid */

#identity_grid br
{
  display: none;
}

#grid li img,
#controls span
{
  cursor: pointer;
}

#identity_grid,
#thumbnails
{
  width: 690px;
  height: 565px;
}

#identity_grid
{
  position: relative;
}

#thumbnails
{
  list-style: none;
  margin: 0;
  padding: 0;
}

#thumbnails li
{
  float: left;
  font-size: 10px;
  margin: 0 10px 10px 0;
  padding: 0;
  width: 105px;
  height: 105px;
}

#thumbnails li img
{
  display: block;
  opacity: .8;
}

#thumbnails li img:hover
{
  opacity: 1;
}

#controls
{
  position: absolute;
  right: 20px;
  top: 470px;
  z-index: 2;
}

#controls span
{
  background-image: url(images/controls.gif);
  background-repeat: no-repeat;
  float: left;
  margin-left: 1em;
  opacity: .25;
  text-indent: -9999px;
  width: 20px;
  height: 20px;
}

#controls span:hover
{
  opacity: 1;
}

#controls #previous { background-position: left top; }
#controls #grid     { background-position: left -50px; }
#controls #next     { background-position: left -100px; }

#slides div
{
  background: #ebebeb;
  position: absolute;
  top: 0;
  left: 0;
  width: 680px;
  height: 565px;
  z-index: 1;
}

#slides div img
{
  border-bottom: solid 10px #fff;
  display: block;
}

#slides div h3,
#slides div p
{
  margin: 10px;
}

#slides div h3
{
  font-size: 22px;
  margin-bottom: 6px;
  padding: 0;
}

#slides div p
{
  font-family: sans-serif;
  font-size: 11px;
  line-height: 1.3;
  margin-top: 6px;
}

/* Team */

ul.team li
{
  clear: left;
  height: 110px;
}

ul.team li br
{
  display: none;
}

ul.team li img
{
  float: left;
  margin-right: 15px;
}

ul.team li h4 em
{
  color: #666;
  font-size: 11px;
  margin-left: 1em;
  text-transform: uppercase;
}

ul.team li.dayna
{
  height: 125px;
}