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

version:   1.0
date: 10-20-09
author: marc duisenberg
email:  stylehelp@mouseworks.biz
website:   http://www.mouseworks.biz


NOTES:
"min-height" possibly causes shortened editor window issue with WriteWRX editor

1. 2set Normailizing font size to px and Typography to px for more consistent display on IE 6 & 7 otherwise fonts in IE 7 are larger than IE6.  The you can still use percent in other attributes

2. for second level vertical nav, use text-indent to move 2nd level inward instead of left margin, also use both height AND line-height for correct spacing between 2nd level links
-----------------------------------------------------------------------------*/


/* =Normalizing - overriding default browser styles
-----------------------------------------------------------------------------*/

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{ 
margin:0; padding:0;
}

p,h1,h2,h3,h4,h5,h6,pre,code { 
font-size: 14px;  /*  was 100%  */
}

ul,ol { 
list-style:none 
}

fieldset, img {
border:0;
}

.clear {
 clear:both;
}

img {
 border: none;
}



/* =General
-----------------------------------------------------------------------------*/
html {
text-align:center;
}

body{
background: #dfdfdf url(../images/bg_body2.jpg) repeat-x 0% 0%;
text-align:center;
margin:15px auto;
}

div#pagewrap{
background: #000;
position:relative;
width: 942px;
min-width:900px;
margin: 0px auto 0px auto;
padding:0px;
text-align:left;
color: #333;
 }

/* =Typography
-----------------------------------------------------------------------------*/

body{
font-size: 14px;  /*  was small */
font-family: Verdana, Arial, Helvetica, "Lucida Grande", "Lucida Sans", "Trebuchet MS", Tahoma, Verdana, sans-serif;
color: #333; }

/* =Branding
-----------------------------------------------------------------------------*/
div#branding{
height: 65px  ;
width:942px;
margin:0px 0 0px 0;
padding:0px 0 0 0;
background: transparent url(../images/bg_branding.jpg) no-repeat 0% 0%; 
}


div#branding h3#logo{
 display:block;
 position:absolute;
 top:-2px;
 left:-23px;
 height: 88px;
 width:88px;
 margin:0;
 padding:0;
 background: transparent url(../images/bg_logo.jpg) no-repeat 0% 0%;
}
div#branding h3#logo a:link img{
border:none;
color:transparent;
}

h4 img#branding2{
position:absolute;
top:480px;
left:285px;
}




/* =Content Container
-----------------------------------------------------------------------------*/
div#content{
background-color:#000;
margin:0 0px ;
padding:0 0px;
float:right;
display:inline;
width:818px;
height:580px;
text-align:left;
}

/*  NOT USED  
div#content-about{
background-color:#000;
margin:0 0px ;
padding:0 0px;
float:right;
display:inline;
width:823px;
text-align:left;

}
*/

/* = Sliding Panel Content Container
-----------------------------------------------------------------------------*/
div#content-slider{
background-color:#000;
margin:0 0px ;
padding:0 0px;
float:right;
display:inline-block;
width:750px;
height:570px;
text-align:left;

}

div#content-slider div#slider{
margin:0px 0;
padding:0;
border: none;   
width: 690px;
height:590px;
text-align:left;
}

/* =Content Main  &  Secondary 
   includes first and second columns of main content

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

div#maincontent, div#maincontent-home, div#maincontent-contact{ 
background: #fff url(../images/bg_maincontent.gif)  repeat-y;
padding:0px;
margin:0px; 
float:left;
display:inline;
width:690px;
height:580px;
}

div#maincontent-home{ 
background:#2b2b2b ;
padding:30px 0 0 0px;
margin:0px; 
float:left;
display:inline;
width:690px;
height:550px;
}

div#maincontent-contact{ 
background: #fff url(../images/bg_maincontent_contact.gif)  repeat-y;
}

div#firstcolumn{ 
float:left;
display:inline;
width:310px;
padding:0;
margin:10px 0 10px 15px;  
line-height:18px;
font-family: Helvetica, Arial ;
}

div#firstcolumn-news{
line-height:18px;
font-family: Helvetica, Arial ;
margin:10px 0px 10px 15px;
padding:0;
width:650px;
}

div#firstcolumn p#contact-info{ 
background: transparent url(../images/contact_info2.gif) no-repeat;
padding:0px;
margin:0px;  
width:309px;
height:150px;
}

div#firstcolumn p#email-landing{
 height:29px;
 width:300px;
 position:absolute;
 top:192px;
 left:130px;
 margin:0;
 padding:0;
}

div#firstcolumn .news-date{
padding:0 15px 0 0;
margin:0 ;
}

div#firstcolumn .news-year{
padding:0 23px 0 0;

}

/*
div#firstcolumn ul{ 
padding:0 0px;
margin:0px; 
width:310px;
}

div#firstcolumn ul li.title{ 
padding:0 0px;
margin:0 0 5px 0px;   
color:#696969;
font-size:90%; 
}

div#firstcolumn ul li.info{ 
font-family: verdana, trebuchet;
padding:0 0px;
margin:0 0 5px 0px;   
color:#fff;
font-size:160%; 
}

*/

div#secondcolumn{ 
float:right;
display:inline;
width:310px;
padding:0 15px 0 0;
margin:10px 0px 0px 0px;  
line-height:18px;
font-family: Helvetica, Arial ;
}

div#secondcolumn h3#client-logos{ 
padding:0 0px;
margin:0px 0 0 0px; 
float:right;
display:inline;
width:320px;
333height:570px;

}

div#secondcolumn-logos div#client-logos{ 
padding:0 0px;
margin:25px 0 0 0px; 
width:320px;
height:540px;

}


div#secondarycontent{ 
padding:0 0px;
margin:0px; 
float:right;
display:inline;
444width:126px; /* was 127 */

}




/* =Content Sub
-----------------------------------------------------------------------------*/

div#subcontent{   /* currently this can be photos, text, etc. - located below left nav */
width:120px; 
margin:30px 0 0 0;
padding: 0;
float:left;
display:inline;
background-color: transparent;
}


div#subcontent img{ 
margin:0 0 0 0px;
padding:0px;

}




/* =Headings & Paragraphs
-----------------------------------------------------------------------------*/


#content h1, #content h3, #subcontent h2{
}



div#firstcolumn h5.subtitle{
font-size:82%;
font-weight:bold;
line-height:16px;
color: #505050;
height:60px;
margin: 7px 0 40px 0;
}

div#firstcolumn h3,div#firstcolumn-news h3{
font-size:140%;
font-weight:normal;
margin:10px 0 20px 0;
}

div#firstcolumn-news h4{
font-size:120%;
font-weight:normal;
margin:0;
}

div#firstcolumn h4{
line-height:20px;
font-size:100%;
font-weight:normal;
}

div#firstcolumn p{
line-height:20px;
font-size:96%;
color:#5e5e5e;
}

div#firstcolumn-news p{
width:260px;
margin: 10px 0px 10px 0;
line-height:20px;
font-size:96%;
color:#5e5e5e;
}

div#firstcolumn-news p.news-date {
color:#666; 
font-weight:normal; 
font-size:85%; line-height:15px;
margin:15px 0 5px 0;
}

.news-author {
color:#666; 
font-weight:normal; 
font-size:75%; line-height:22px;
}


div#firstcolumn p.photo-caption{
font-weight:normal;
font-size:95%;
color: #5c5c5c;
}




div#firstcolumn-company p{
font-size:100%;
}

div#secondcolumn p{
font-family: Helvetica, Arial ;
font-size:80%;
margin: 0 0px 10px 0;
line-height:16px;
}

p.first{
margin:35px 0 0 0 ;

}

div#secondcolumn div#contactus{
background: #fff url(../images/bg_contact_phone.jpg) no-repeat 0% 0%;
text-align:left;
width:300px;
height:400px;
margin:0 0px 0 -19px;
padding:0 ;
}

.news li h4{
margin:0
}


/* =Images / FLASH / Slideshows
-----------------------------------------------------------------------------*/
div#firstcolumn img{
float:left;
display:inline;
margin:0 15px 0px 0;
}

div#firstcolumn-news img{
float:right;
display:inline;
margin:0 15px 30px 0;
}

div#firstcolumn-news img#news-googgear{
background: #ffffff url(../images/news_googgear2.jpg) no-repeat 0 0;
margin:10px 0 20px 0;
}

div#firstcolumn-news img#news-slam{
background: #ffffff url(../images/news_slam.jpg) no-repeat 0 0;
margin:10px 0 20px 0;
}

div#firstcolumn-news img#news-googweather{
background: #ffffff url(../images/news_googweather.jpg) no-repeat 0 0;
margin:15px 0 20px 0;
}

div#firstcolumn-news img#news-googplaces{
background: #ffffff url(../images/news_googplaces.jpg) no-repeat 0 0;
margin:15px 0 20px 0;
}

div#firstcolumn-news img#news-googhotpot{
background: #ffffff url(../images/news_googhotpot.jpg) no-repeat 0 0;
margin:15px 0 20px 0;
}

div#firstcolumn-news img#news-googgmail{
background: #ffffff url(../images/news_googgmail.jpg) no-repeat 0 0;
margin:15px 0 20px 0;
}

div#firstcolumn-news img#news-googhotpot{
background: #ffffff url(../images/news_googhotpot.jpg) no-repeat 0 0;
margin:15px 0 20px 0;
}


div#secondcolumn li img{
padding:0 0 0 10px;
}


div#ss{
width:126px;
position:relative;
height:420px;
 }

div#ss img {
 position:absolute;
 top:-5px;
 left:0px;
 z-index:8;
 opacity:0.0;
  }

div#ss img.active {
 z-index:10;
 opacity:1.0;
  }

div#ss IMG.last-active {
 z-index:9;
  }


/* =Links
-----------------------------------------------------------------------------*/

a:link, a:visited, a:active{
color:transparent;
text-decoration:none;
border:none;
 }

p a:link, p a:visited, p a:active, ul a:link, ul a:visited, ul a:active{
color:#67a00c;
text-decoration:none;
}

div#secondcolumn p a:hover{
text-decoration:underline;
}

p a:hover{
text-decoration:underline;
}

a#imagelink{
color:transparent;
}


/* =Lists
-----------------------------------------------------------------------------*/
div ul.faq li{
margin: 0 0 0px 15px;
line-height:20px;
list-style-type: none;
}
div ul.faq li.faq-question{
font-size:110%;
font-weight:bold;
margin:0;
padding: 20px 0 5px 0;
}

div ul.faq ul.sub-list li{
font-weight:normal;
padding: 3px 0;
margin:0 0 0 15px;
width:270px;
line-height:18px;
display: list-item;
list-style-type: none;
list-style-position: outside; }

div ul.news{
clear:both;
list-style-type: none;
}

div ul.news li{
margin: 0 0 0px 0px;
line-height:20px;
list-style-type: none;
}
div ul.news li.news-date{
font-size: 110%;
font-weight: bold;
margin:0;
padding: 20px 0 5px 0;

}

div ul.news ul.sub-list li{
font-weight:normal;
padding: 3px 0;
margin:0 0 0 15px;
width:270px;
line-height:18px;
display: list-item;
list-style-type: none;
list-style-position: outside; }



/* =Nav Main 
-----------------------------------------------------------------------------*/

div#primarynav{ /* left column */
font-family: Helvetica, Arial ;
font-weight: normal; 
text-align:left;
float:left;
display:inline;
width:95px;
margin:0px 0 0 15px;
padding:0px 0px 0 0px;

}

div#primarynav ul{
margin:0;
padding:0;
list-style-type:none;
}

div#primarynav ul li a{ 
width:80px;
display:block;
margin:0px 0 0 0;
padding: 0px;
height:22px;
line-height: 22px;
color: #989898;
font-weight: normal; 
text-decoration:none; 
border:none;
}

div#primarynav li a:hover{
color: #fff;
text-decoration:none;
font-weight:normal;

}

#company #primarynav .company a, 
#principals #primarynav .principals a, 
#icons #primarynav .icons a, 
#interfaces #primarynav .interfaces a,
#mobile #primarynav .mobile a,
#blog #primarynav .blog a,
#contact #primarynav .contact a,
#news #primarynav .news a,
#faqs #primarynav .faqs a,
#partners #primarynav .partners a{
display:block;
margin:0px;
padding:0;
color: #b3ff00;
cursor:default;
}




 =Nav 3  -  Product Thumbnail Nav  
-----------------------------------------------------------------------------*/




/* =Nav Sub 
-----------------------------------------------------------------------------*/



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

div#contact-form{
background-color:#ccc;
width:310px;
height:350px;
margin:0;
padding:0;
}


fieldset {  /* Removes fieldset borders. even on Opera 7 */
  border: 1px solid transparent;
margin:0;
padding:0;
}

form#contact {
text-align:left;
margin:0px 0 0 5px;  /*  top margin was 7 */
color:#fff;
font-weight:normal;
}

input, textarea {
padding:1px 0 3px 0px;
margin: 2px 0 4px 0;
}

textarea {
width:300px;
padding:1px 0 3px 0px;
margin: 0;
}


.checkboxstyled{
padding:1px 0 3px 0px;
margin: 7px 0px 0px 8px;
}

form#contact p{
margin:10px 5px;
padding:0;
}
.radiostyled{
border:none;
margin:5px 0 0 0 ;
}

.submit{
border:none;
}



/* =Footer (site info)
-----------------------------------------------------------------------------*/
div#footer{
font-size:80%;

font-family: Arial, Helvetica, Verdana, "Lucida Grande", "Lucida Sans", "Trebuchet MS", Tahoma, sans-serif;
font-weight:normal;
background: #dfdfdf url(../images/bg_footer.gif) no-repeat top left;
height:29px;
clear:both;
margin:0;
padding:6px 45px 3px 45px;
}

div#footer ul{
margin: 0;
padding:0;
}

div#footer ul li a{
display:inline;
padding:0px;
color:#aaaaaa;
text-decoration:none; 
cursor:default;
 }

div#footer ul li #email{
display:inline;
color:#383f15;
}



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





/* =Misc 1
-----------------------------------------------------------------------------*/
.small{
font-size:85%;
}

div#firstcolumn-news img.uparrow{
float:left;
clear:both;
display:inline;
margin:0px 0 10px 0;
}

hr.divider {
 color: #ccc;
background: #ccc; 
width: 100%; 
clear:both;
}



/* =Spry Validation
------------------------------------------------------------------------*/


/* SpryValidationTextField.css - version 0.4 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */


/* These are the classes applied on the error messages
 * which prevent them from being displayed by default.
 */ 
.textfieldRequiredMsg, 
.textfieldInvalidFormatMsg, 
.textfieldMinValueMsg,
.textfieldMaxValueMsg,
.textfieldMinCharsMsg,
.textfieldMaxCharsMsg,
.textfieldValidMsg {
 display: none;
}

/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a default red border and color for the error text.
 * The state class (e.g. .textfieldRequiredState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.textfieldRequiredState .textfieldRequiredMsg, 
.textfieldInvalidFormatState .textfieldInvalidFormatMsg, 
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg
{
 
display: inline;
color: #CC3333;
font-size:85%;
font-weight:bold;
padding: 0 3px;
width:350px;
border:none;
}



/* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required / invalid / minValue / maxValue / minChars / maxChars , valid 
 * There are two selectors for each state, to cover the two main usecases for the widget:
 * - the widget id is placed on the top level container for the INPUT
 * - the widget id is placed on the INPUT element itself (there are no error messages)
 */
 
 /* When the widget is in the valid state the INPUT has a green background applied on it. */
.textfieldValidState input, input.textfieldValidState {
 background-color: #B8F5B1;
}

/* When the widget is in an invalid state the INPUT has a red background applied on it. */
input.textfieldRequiredState, .textfieldRequiredState input, 
input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, 
input.textfieldMinValueState, .textfieldMinValueState input, 
input.textfieldMaxValueState, .textfieldMaxValueState input, 
input.textfieldMinCharsState, .textfieldMinCharsState input, 
input.textfieldMaxCharsState, .textfieldMaxCharsState input {
 background-color: #FF9F9F;
}

/* When the widget has received focus, the INPUT has a yellow background applied on it. */
.textfieldFocusState input, input.textfieldFocusState {
 background-color: #FFFFCC;
}

/* This class applies only for a short period of time and changes the way the text in the textbox looks like.
 * It applies only when the widget has character masking enabled and the user tries to type in an invalid character.
 */
.textfieldFlashText input, input.textfieldFlashText {
 color: red !important;
}

/* When the widget has the hint message on, the hint text can be styled differently than the user typed text. */
.textfieldHintState input, input.textfieldHintState {
 /*color: red !important;*/
}