html { background: #f0f0f0; }
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,figure { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; }
body {
  color: #333 !important;
  margin: 0;
  padding: 0;
  cursor: default;
  font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
  background-color: transparent;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6,strong { color:#333; }
h1,h2,h3,h4 { font-weight: normal; }
h2,h3,h4 { line-height: 18px; }
h1,h2 { margin-bottom: 18px; }
h1 { font-size: 42px; line-height: 48px; }
h2 { font-size: 16px; }
h3 { font-size: 1em; }
h4 { font-size: 10px; }
p { margin-bottom: 18px; }

.clear { clear: both; }

img { border: 0; }
img.left { float: left; margin: 2px 20px 16px 0; }
img.right { float: right; margin: 2px 0 16px 50px; }

a { color: #08c; }
a:link, a:visited, a:active { text-decoration: none; }
a:hover { text-decoration: underline; }
/*  
a.block { display: block; cursor: pointer; }
a.block span,
a.block em { color:#08c; cursor: pointer; }
a.block:hover { text-decoration: none; }
a.block:hover span,
a.block:hover em { color: #08c; text-decoration: underline; }
*/  
a.more, em.more, span.more { white-space: nowrap; padding-right: 10px; background: url(morearrow.gif) no-repeat 100% 50%; cursor: pointer; zoom: 1; }

/* header */
#header {
  zoom:1;
  position: relative;
  width:960px; 
  margin:0 auto;
  padding:0 10px; 
}
#header h1 { font-size: 30px; line-height: 40px; margin-bottom: 4px; }

.content { background: #fff; border: 1px solid; border-color: #e5e5e5 #dbdbdb #d2d2d2; -webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 3px; -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px; box-shadow: rgba(0,0,0,0.3) 0 1px 3px; }
.content { border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -khtml-border-radius: 4px; }

#main {
zoom:1;
position: relative;
width:880px; 
margin:0 auto;
padding: 0 50px; 
/*  background: #fff url(content_bg.gif) no-repeat; */
background: #fff url(content_bg_1px.png) repeat-x;
/* background: #fff;  */
}
/*    #main:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } */
#main:after  { clear: both; }

#main.content { color:#444; }

#main.content { margin-bottom:50px; }
#main.content img.left { margin: 0 10px 8px 0; }
#main.content h2 { font-size: 20px; margin-bottom: 30px; padding-top: 18px; }
#main.content h3 { margin-bottom: 0; }
#main.content h3,
#main.content p, #main.content span, #main.content li { font-size: 14px; line-height: 19px; }
#main.content * ul { margin-left: 1em;}


.column, .colthin, .colwide { float: left; }
.grid2col, .grid3col { width: 100%; margin-bottom:50px; }
.grid2col .column { width: 49%; }
.grid2col .colthin { width: 24%; }
.grid2col .colwide { width: 74%; }
.grid3col .column { width: 32%; margin-left: 2%; }
.column.first, .column.last, .colthin.first, .colwide.last { margin-left: 0 !important; }
.column.last, .colwide.last { float: right !important; }

.grid2col, .grid3col { zoom: 1; }
.grid2col:after, .grid3col:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.contentheader { padding-top: 36px; margin-bottom:30px; }
#main.content .contentheader h2 { color:#666; font-size: 20px; margin-bottom: 10px; padding-top: 20px; }
.contentheader:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.apppageheader { padding-top: 36px; margin-bottom:25px; }
#main.content .apppageheader h2 { color:#666; font-size: 20px; margin-bottom: 10px; padding-top: 0px; }
.apppageheader:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.colthin p, .colwide p { color: #666; }
.colthin ul, .colwide ul { color: #666; }
.colthin h3 { color:#333; font-weight: bold; padding-bottom: 10px; padding-top: 10px; }

#main.content .colthin h2, #main.content .colwide h2 { margin-bottom: 20px; padding-top: 10px; }

.appheader { margin-top: 10px;}
.more { text-align: right; }

/* navcontainer */
#navcontainer { position:relative; display:block; width:980px; height:36px; margin:15px auto; text-align:left; z-index:9998; background:url(navheader_bg.png) repeat-x;
-khtml-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;
-khtml-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -ms-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -o-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -moz-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -webkit-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; box-shadow:rgba(0,0,0,0.3) 0 1px 2px;
font:12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
}

#navcontainer #nav { position:relative; display:block; margin:0; padding:0; zoom:1; z-index:3; }
#navcontainer #nav:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
#navcontainer #nav li { display:inline; }
#navcontainer #nav li.left a { float:left; width:260px; height:36px; overflow:hidden; text-indent:-9999px; background:url(nav_left.png) no-repeat; cursor:pointer; }
#navcontainer #nav li.middle a { float:left; width:180px; height:36px; overflow:hidden; text-indent:-9999px; background:url(nav_middle.png) no-repeat; cursor:pointer; }
#navcontainer #nav li.right a { float:left; width:180px; height:36px; overflow:hidden; text-indent:-9999px; background:url(nav_right.png) no-repeat; cursor:pointer; }

/* ACTION STATES */
#navcontainer #nav li a { background-position:100% 0; outline:none; }
#navcontainer #nav li a.before { background-position:100% -36px; }
#navcontainer #nav li a:hover,
#navcontainer #nav li a:focus  { background-position:100% -72px; }
#navcontainer #nav li a:active { background-position:100% -108px; }

#navcontainer #nav li#nav-colmertech a { background-position:0 0; }
#navcontainer #nav li#nav-colmertech a.before { background-position:0 -36px; }
#navcontainer #nav li#nav-colmertech a:hover,
#navcontainer #nav li#nav-colmertech a:focus  { background-position:0 -72px; }
#navcontainer #nav li#nav-colmertech a:active { background-position:0 -108px; }

/* SELECTED STATES */
#navcontainer.iphone    li#nav-iphone   a,
#navcontainer.ipad      li#nav-ipad     a,
#navcontainer.support   li#nav-support  a,
#navcontainer.about     li#nav-about    a { background-position:right -144px !important; }

/* TEXT */
#navcontainer #nav li                a span { display:block; width:100%; height:34px; margin:1px auto; background:url(nav_text.png) no-repeat 50% 0; }
#navcontainer #nav li#nav-colmertech a span { background-position:50% 0; }
#navcontainer #nav li#nav-iphone     a span { background-position:50% -34px; }
#navcontainer #nav li#nav-ipad       a span { background-position:50% -68px; }
#navcontainer #nav li#nav-support    a span { background-position:50% -102px; }
#navcontainer #nav li#nav-about      a span { background-position:50% -136px; }

/*---  FOOTER ---*/
#footer { width: 980px; color: #888; font-size: 11px; margin: 18px auto 0; padding-bottom: 36px; text-align: left !important; }
#footer a { color: #08c; }
#footer p { margin-bottom: 1em; }
#footer .copyright { clear: both; width: 100%; border-top: 1px solid #ddd; padding-top: 9px; }
#footer .copyright a { padding: 0 10px; }
#footer .copyright p { float: left; margin-left: 3px; }

/* popup thumnail images */
.thumbnail {
  position: relative;
  z-index: 0;
}

.thumbnail img { /* thumnail */
  border: 1px solid #C0C0C0;
  padding: 0px;
  margin: 0px 50px 20px 0px;
}

.thumbnail:hover {
  background-color: transparent;
  z-index: 50;
}

.thumbnail span { /*CSS for enlarged image*/
  position: absolute;
  padding: 7px;
  left: -1000px;
  visibility: hidden;
  background-color: #F0F0F0;
  color: #444;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  border: 1px solid;
  border-color: #e5e5e5 #dbdbdb #d2d2d2; 
  -webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 3px; 
  -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
  box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
}

.thumbnail span img { /*CSS for enlarged image*/
  border: 1px solid #C0C0C0;
  padding: 0;
  margin: 0;
}

.thumbnail:hover span { /*CSS for enlarged image on hover*/
  visibility: visible;
  top: -345px;
  left: -80px; /*position where enlarged image should offset horizontally */
}