/** 
    Styles for Productorials — productorials.com
    Original stylesheet by Eric D. Fields - ericdfields.com
    All content below "Content Grid" copyright 2007 Productorials
    Browser Resets by Eric Meyer - meyerweb.com

=== === === === === === === === === === === === === **/

/** Browser Resets
--------------------------------------------------- */
html,body,div,span,
applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
dd,dl,dt,li,ol,ul,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;line-height:1;font-family:inherit;text-align:left;vertical-align:baseline;}
a img,:link img,:visited img{border:0;}
table{border-collapse:collapse;border-spacing:0;}
ol,ul{list-style:none;}
q:before,q:after,
blockquote:before,blockquote:after{content:"";}
/* ----------------------------------------------- **/

/** Content Grid
--------------------------------------------------- */
.grid:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
  width: 100%;
}
.grid {
  zoom: 1;
}
.unit {
  padding: 3.87%;
  float: left;
  width: 42%;
}


.innertext ul {
  margin-bottom: 8px 0 60px 15px;
  font-size: 10px;
}

.innertext li  {
  line-height: 1.6em;
  list-style-type: square;	
  margin-left: 15px;
}

.home .unit {
  width: 49.5%;
}
.home .unit.first {
  width: 35%;
}

.page .unit {
  width: 29.8%;
}
.grid .spanGrid {
  width: 92.2%;
  padding-bottom: 0;
}
.grid .twoThirds {
  width: 67.2%;
  padding-right: 4%;
}

.grid .oneThird {
  width: 33%;
  padding-right: 4%;
}
.grid .rail {
  width: 18.7%;
  padding: 3%;
}
.noPadding {
  padding: 0;
  width: 50.1%;
}
/* ----------------------------------------------- **/

/** Foundation
--------------------------------------------------- */
body {
  font-family: tahoma, helvetica, arial, sans-serif;
  font-size: 0.9em;
}
body.home {
  background: #CCCBCB url(../images/nav_home_bkg.png) repeat-x left top;
}
#wrap {
  width: 754px;
  margin: 0px auto;
  background: #F4F4F4;
}
p {
  font-size: 90%;
}
.widthKeeper {
  width: 754px;
}
/* ----------------------------------------------- **/

/** Header
--------------------------------------------------- */
#header {
  background: #CCCBCB url(../images/nav_home_bkg.png) repeat-x 5px top;
}
#header .widthKeeper {
  margin: 0px auto;
  position: relative;
  height: 102px;
}
#header h1 {
  height: 80px;
  width: 330px;
  border-right: 2px groove #999;
  position: relative;
  top: 11px;
}
#header h1 a {
  text-indent: -1000em;
  display: block;
  width: 300px;
  height: 22px;
  background: url(../images/logo.gif) no-repeat left top;
  position: relative;
  top: 40%;
}
#nav {
  position: absolute;
  bottom: 0;
  right: 0;
}
#nav li {
  display: inline;
  font-size: 83%;
  padding: 1em 0;
}
#nav li.first {
  border: 0;
}
#nav a {
  color: #bbb;
  text-decoration: none;
  display: inline-block;
  padding: 0 0.7em 0 0.7em;
  margin: 1em 0 1.05em;
}
.gecko #nav a {
  display: -moz-inline-box; 
  margin-bottom: 0.5em;
}
#nav a:hover {
  text-decoration: underline;
  color: white;
}
#nav li.selected {
  background: #333
}
#nav li.selected a {
  text-decoration: none;
  color: #bbb;
}
#options {
  position: absolute;
  right: 0;
  top: 20%;
  width: 18em;
}
#options li {
  display: inline;
  font-size: 110%;
  color: #aaa;
}
#options a {
  display: block;
  width: 104px;
  height: 28px;
  background: url(../images/clientLogin.png) no-repeat left top;
  text-indent: -1000em;
  float: right;
  margin-left: 30px;
  position: relative;
  top: -1.3em;
}
#options a:hover {
  background-position: left bottom;
}
/* ----------------------------------------------- **/

/** Content
--------------------------------------------------- */
#breadcrumbs {
  background: #333;
  position: relative;
  height: 24px;
  font-size: 90%;
}
#breadcrumbs ul {
  position: relative;
  top: 23%;
  margin-left: 0.5em;
}
#breadcrumbs li {
  display: inline;
  color: #777;
}
#breadcrumbs a {
  color: #777;
  text-decoration: none;
}
#breadcrumbs a:hover {
  color: white;
}
#breadcrumbs p {
  display: block;
  color: #777;
  position: absolute;
  top: 19%;
  right: 0.5em;
}

.bigger {
  line-height: 1.4em;
  font-size: 0.7em;
  margin-bottom: 1.4em;
}

#content {
  border-bottom: 28px solid #333;
  color: #555;
}
p {
  line-height: 140%;
  margin-bottom: 1.4em;
}

strong {
  font-weight: bold;
}
h2 {
  font-size: 119%;
  margin-bottom: 1.1em;
}
/*.grid ul li {
  margin: 1em 0;
  padding-left: 2em;
  list-style: disc inside;
  font-size: 90%;
}
*/
.grid .technology {
  width: 71.2%;
  padding-right: 0;
}
.technology div {
  margin-bottom: 2em;
  margin-top: 30px;
  padding-right: 21%;
  background: url(../images/category1_technology_icons.png) no-repeat right top;
}
.technology div.liveStats {
  background-position: right -308px;
}
.technology div.akamai {
  background-position: right -564px;
}
.technology h3 {
  font-weight: bold;
}
.technology p {
  margin-bottom: 0;
}
.technology a {
  font-weight: bold;
  color: #73C6EE;
  text-decoration: none;
}
.technology a:hover {
  color: #EA654E;
  text-decoration: underline;
}
		
.portfolio a {
	font-size: 9px;
	font-weight: bold;
	margin-top: 40px;
	color: white;
	background-color: #BDBDBD;
	padding: 3px 8px;
	text-decoration: none;
}

.portfolio a:hover {
	color: white;
	background-color: #74C7EF;
	padding: 3px 8px;
	text-decoration: none;
}




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

/** Home Page Styles
--------------------------------------------------- */
#homeFlash {
  width: 754px;
  height: 323px;
}
.home #content {
  background: #F4F4F4 url(../images/homeContent_bkg.png) repeat-y left top;
}
.home .featured { /* Featured Items Boxes */
  width: 362px;
  background: #333 url(../images/homeFeature_top.png) no-repeat left top;
  margin: 0px auto 1.4em;
  color: white;
  position: relative;
}
.home .featured .gutter {
  background: url(../images/homeFeature_bottom.png) no-repeat left bottom;
  padding: 1em;
}
.home .featured h3,
.home .featured p,
.home .featured ul {
  width: 50%;
}
.ie6 .home .featured ul {
  width: 52%; 
}
.home .featured h3 {
  font-size: 112%;
  margin-bottom: 0.35em;
}
.home .featured p {
  font-size: 76%;
}
.home .featured ul {
  text-align: center;
}
.home .featured img {
  position: absolute;
  right: 1em;
  top: 1em;
}
.home .featured a img {
  border: 4px solid white;
}
.home .featured a:hover img {
  border-color: #66c3ed;
}
.home .featured ul:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
.home .featured ul {
  zoom: 1;
}
.home .featured li {
  display: block;
  float: left;
  text-indent: -1000em;
  width: 80px;
  margin: 0 0 0 3px;
  padding: 0;
}
.gecko .home .featured li {
  display: -moz-inline-box;
}
.home .featured li a {
  display: block;
  width: 80px;
  height: 25px;
  background: url(../images/homeFeature_buttons.png) no-repeat right top;
}
.home .featured li a:hover {
  background-position: right bottom;
}
.home .featured li.first a {
  background-position: left top;
}
.home .featured li.first a:hover {
  background-position: left bottom;
}
/* ----------------------------------------------- **/

/** Generic Page Styles
--------------------------------------------------- */
#subnav {
  background: #73C6EE;
  width: 566px;
  margin-top: -3px;
}
#subnav ul {
  padding: 0 5.4%;
  margin-left: -5px;
}
#subnav li {
  display: inline; 
  font-size: 91%;
  line-height: 228%;
  margin-right: 20px;
}
#subnav a {
  color: #eee;
  text-decoration: none;
}
#subnav a:hover {
  border-bottom: 4px solid #9bd7f3;
  padding-bottom: 2px;  
}
#subnav li.selected a {
  border-bottom: 4px solid #eee;
  padding-bottom: 2px;
}
.page #content {
  background: #f2f2f2 url(../images/caseStudy_content_bkg.png) repeat-y right top;
}
.spanGrid h2 {
  margin-bottom: 0;
}
.page .rail img {
  display: block;
  margin: 0px auto;
}
.noPadding {
  border-left: 1px solid #b5b5b5;
}
.noPadding p {
  padding: 0 2em;
}
#buttonBox {
  background: #f0efef url(../images/buttonBox_bkg.png) repeat-x left bottom;
  height: 118px;
  border-bottom: 3px double #b5b5b5;
  margin-bottom: 1.1em;
  text-align: center;
}
#buttonBox ul {
  margin-left: 26px;
  padding-top: 46px;
}
#buttonBox li {
  float: left;
  margin: 0 10px;
  list-style: none;
  padding: 0;
}
p#getAQuote {
  text-align: center;
}
#getAQuote a,
#launchProject a, #gosmile a {
  text-indent: -1000em;
  display: block;
  height: 39px;
  width: 141px;
  background: url(../images/getAQuote.png) no-repeat left top;
}
#launchProject a, #gosmile a {
  background: url(../images/launchProject.png) no-repeat left top;
}
#getAQuote a:hover,
#launchProject a:hover, #gosmile a:hover {
  background-position: right top;
}
.rail #getAQuote, 
.rail #launchProject,
.rail #gosmile {
  margin-bottom: 5em;
}
/* ----------------------------------------------- **/

/** Case Study
--------------------------------------------------- */
.caseStudy #breadcrumbs {
  background: none;
  z-index: 2;
}
.caseStudy #caseStudy {
  margin-top: -24px;
  position: relative;
  height: 232px;
}
.caseStudy #caseStudy:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
  width: 100%; 
}
.caseStudy #caseStudy img {
  float: left;
}
.caseStudy #launchProject{
  position: absolute;
  padding-left: 3.88%;
  bottom: 0;
}

.caseStudy #gosmile {
  position: absolute;
  padding-left: 77.88%;
  bottom: 0;
}

.caseStudy #launchProject a,
.caseStudy #gosmile a {
  background-image: url(../images/launchProject_whiteBkg.png);
}
.caseStudy span {
  display: block;
  float: left;
  height: 232px;
  width: 188px;
  overflow: hidden;
}
.caseStudy ol.spanGrid {
  background: white;
  padding-bottom: 3.88%;
  padding-left: 1%;
  padding-right: 1%;
  width: 97.9%;
}
.caseStudy ol li {
  float: left;
  margin-right: 10px;
  position: relative;
}
.caseStudy li a img {
  border: 4px solid #ccc;
}
.caseStudy li a:hover img {
  border-color: #66c3ed;
}
.caseStudy li span {
  display: block;
  width: 20px;
  height: 20px;
  background: url(../images/caseStudy_numbers.gif) no-repeat left top;
  position: absolute;
  top: 39%;
  left: -8px;
}
.caseStudy li.one {
  margin-left: 5px;
}
.caseStudy li a:hover span {
  background-position: right top; 
}
.caseStudy li.two span {
  background-position: left -20px;   
}
.caseStudy li.two a:hover span {
  background-position: right -20px; 
}
.caseStudy li.three span {
  background-position: left -40px;   
}
.caseStudy li.three a:hover span {
  background-position: right -40px; 
}
.caseStudy li.four span {
  background-position: left -60px;   
}
.caseStudy li.four a:hover span {
  background-position: right -60px; 
}
.caseStudy li.five {
  margin: 0;
}
.caseStudy li.five span {
  background-position: left -80px;   
}
.caseStudy li.five a:hover span {
  background-position: right -80px; 
}
.ie6 .caseStudy li span {
  background-position-x: right !important;
}
/* ----------------------------------------------- **/