body
{
   font-family: Georgia, serif;
   font-size: 0.8em;
   background: #F2F2F2;

   padding: 20px 0 0 0;
   margin: 0;

   text-align: center; /* for IE */
}

a
{
   color: #486FB4;
}

a:hover
{
   text-decoration: none;
}

a:visited
{
   text-decoration: none;
}

td
{
   padding: 2px 5px;
   border-bottom: 1px solid #DDD;
}

input
{
   border: 1px solid #666;
   margin-right: -1px;
}

#footer a, #mini-nav a
{
   text-decoration: none;
   margin-right: 10px;
}

#footer a:hover, #mini-nav a:hover
{
   color: #212121;
}

ul.tripple, #navigation ul, .showcase ul, .showcase li, .ui-tabs-nav, #mini-nav ul
{
   list-style: none;
   margin: 0;
   padding: 0;
}

h1
{
   position: absolute;
   left: 0px;
   top: -500px;
   width: 1px;
   height: 1px;
   overflow: hidden;
}

h3
{
   margin: 0;
   margin-bottom: -0.7em;
   font-size: 1.1em;
}

img { border: none;}

textarea
{
   width: 90%;
   height: 300px;
}

/*** HTML tag styling end ***/
/*** main begin ***/

#main
{
   margin: 0 auto;
   text-align: left;

   /*float: left;
   margin-left: -475px;*/
   width: 930px;
   padding: 12px 10px;

   background: #FFFFFF;
   color: #4C4C4C;
}

/*** main end ***/
/*** header begin ***/

#header
{
   height: 125px;
   padding: 0;
   margin-bottom: 8px;

   background: url('/images/topbg.png') center repeat-x;
   color: #FFFFFF;
}

#header #logo
{
   float: right;
}

#header #tag
{
   float: left;
}

/*** header end ***/
/*** navigation begin ***/

#navigation
{
   float: left;
   clear: both;
   width: 180px;
   margin-right: 10px;

   font-family: Trebuchet MS, Helvetica, sans-serif;
}

/* We are on this item's page */
#navigation li.on
{
   font-weight: bold;
}

#navigation > ul > li
{
   padding-left: 20px;
}

#navigation ul li ul
{
   display: none;
}

#navigation ul li > ul
{
   margin-bottom: 10px;
}

/* All the list items */
#navigation li
{
   font-weight: normal;
   margin: 4px 0;
}

/* The subitem links*/
#navigation ul ul a
{
   color: #4C4C4C;
   font-size: 0.95em;
   text-decoration: none;
}

/* The sub sub menu titles */
/* `sub */
.what .whatsize > a, .what .whatfloats > a
{
   color: #6f8725 !important;
}

/* The section titles */
#navigation > ul > li > a
{
   display: block;
   background-image: url('/images/nav.png');
   background-repeat: no-repeat;
   width: 100%;
   height: 15px;
   overflow: hidden;
   text-indent: -9000px;
}

#navigation .who > a
{ background-position: 0 -15px; }

#navigation .what > a
{ background-position: 0 -30px; }

#navigation .how > a
{ background-position: 0 -45px; }

#navigation .work > a
{ background-position: 0 -60px; }

#navigation .join > a
{ background-position: 0 -75px; }

#navigation .contact > a
{ background-position: 0 -90px; }

.who #navigation li.who ul,
.what #navigation li.what ul,
.how #navigation li.how ul ,
.work #navigation li.work ul
{
   display: block;
}

.index #navigation li.index,
.who #navigation li.who,
.what #navigation li.what,
.how #navigation li.how,
.work #navigation li.work,
.join #navigation li.join,
.contact #navigation li.contact
{
   background: 4px 3px no-repeat url('/images/bullet.png');
}

/*** navigation end ***/
/*** main content begin ***/

.subtitle
{
   font-size: 1.1em;
   font-weight: bold;
   margin-bottom: -0.4em;
}

#mainContent
{
   float: left;
   width: 550px;
   font-size: 0.9em;
}

/* removes any funny gaps that appear with images */
#mainContent *
{
   vertical-align: middle;
}

#mainContent .mainImage, #mainContent .showcase
{
   display: block;
   width: 542px;
   height: 192px;
   overflow: hidden;

   border: 4px solid #F2F2F2;
   padding: 0;
   margin-bottom: 25px;
}

#mainContent .mainImage
{
   height: auto;
}

#mainContent .mainImage img
{
   vertical-align: middle;
}

#mainContent .showcase img
{
   width: 542px;
   height: 192px;

}

/** Carousel begin **/

#mainContent .carousel
{
   border: 4px solid #F2F2F2;
   width: 100%;
   overflow: hidden;
}

#mainContent .carousel ul
{
   list-style: none;
   padding: 0;
   margin: 0;
   overflow: hidden;
}

#mainContent .carouselNav
{
   width: 100%;
   height: 45px;

   background : #F2F2F2;
   position: relative;
}

#mainContent .carouselNav #client
{
   float: left;
   color: #4C4C4C;
   margin: 25px 5px 0 5px;
}

#mainContent .carouselNav .panel
{
   position: absolute;
   left: 50%;
   margin-left: -40px;
}

#mainContent .carouselNav .prev, #mainContent .carouselNav .next
{
   float: left;
   margin-top: 8px;
}

/*
#mainContent .carouselNav .prev, #mainContent .carouselNav .next
{
   float: left;
   margin-left: -40px;
   margin-right: 40px;
   margin-top: 8px;

}
*/
#mainContent .carouselNav .stick
{
   float: left;
   margin-top: 20px;
   position: relative;
   left: -60px;
}

#mainContent .carouselNav .expand
{
   float: right;
   color: #4C4C4C;
   margin: 25px 5px 0 0;
}

/** Carousel end **/

/** Tabs begin **/
.ui-tabs-nav
{
   text-align: center;
}

.ui-tabs-nav li
{
   display: inline;
}

.ui-tabs-selected
{
   opacity: 0.5;
}

.ui-tabs-unselect
{

}

.ui-tabs-disabled
{

}

.ui-tabs-panel
{

}

.ui-tabs-hide
{
   display: none;
}

#mainContent .caseStudy
{
   width: 100%;
   margin-top: -25px;
   margin-bottom: 25px;
   text-align: center;
   height: 45px;
   background: url('/images/brown.png') no-repeat;
}

#mainContent .caseStudy .ui-tabs-selected
{
   display: inline;
   opacity: 1;
}

#mainContent .caseStudy li
{
   float: left;
   opacity: 0.1;
   margin: 0;
   padding: 0;
}

/** Tabs end **/

#mainContent .hilight
{
   font-family: FSAlbert, sans-serif;
   font-weight: bold;
   font-size: 1.5em;
   color: #0d87d3;
   margin-bottom: 15px;
}

#mainContent .feature
{
   float: left;
   /* width = 275 - 2*2 + 10 */
   width: 261px;
   border: 2px solid #F2F2F2;
   margin-right: 10px;
   overflow: hidden;
}

/** Boxout begin **/

#mainContent .boxout, #mainContent .boxout .more
{
   border: 4px solid #F2F2F2;
   /* Push items away from images */
   padding: 5px 5px 5px 190px;
   margin-bottom: 7px;

   overflow: hidden;
}


#mainContent .boxout img
{
   float: left;
   clear: left;
   /* pull back from padding */
   margin-left: -185px;
   /*padding: 0 10px 5px 0;*/
}

#mainContent .boxout h2
{
   margin: 0;
   font-size: 1em;
}

#mainContent .boxout p
{
   margin: 5px 0;
}

#mainContent .boxout .more
{
   margin-left: -190px;
   border: none;
   clear: both;
}

#mainContent .boxout .expand
{
   font-weight: bold;
   cursor: pointer;
   float: right;
   clear: both;
   color: #4C4C4C;
}

.how #mainContent .boxout, .work #mainContent .boxout
{
   padding: 5px 5px 5px 215px;
}

.how #mainContent .boxout img, .work #mainContent .boxout img
{
   margin-left: -210px;
}


/** Boxout end **/

/** Tripple begin **/
#mainContent .tripple
{
   width: 100%;
   float: left;
   margin-bottom: 25px;
   overflow: hidden;
}

#mainContent .tripple div, #mainContent .tripple li
{
   display: block;
   width: 170px;
   height: 115px;
   float: left;

   border: 4px solid #F2F2F2;
   margin: 2px 2px;
   background: #F1F9FB;

   text-align: center;
   vertical-align: middle;
   font-family: Trebuchet MS, Helvetica, sans-serif;
   color: #767779;
}

#mainContent .tripple a
{
   text-align: center;
   vertical-align: middle;
   font-family: Trebuchet MS, Helvetica, sans-serif;
   color: #767779;
}

/** Tripple end **/


/*** main content end ***/
/*** features begin ***/

#features
{
   float: right;
   width: 180px;
   margin-left: 10px;
}

#features ul
{
   display: block;
   margin: 0;
   padding: 0;

}

#features ul li
{
   display: block;
   overflow: hidden;

   /*Adjust for padding + borders. Total = 180px*/
   width: 106px;
   border: 2px solid #F2F2F2;
   margin: 0 0 10px 0;
   padding: 5px 5px 10px 60px;

   font-size: 0.8em;
   font-family: Trebuchet MS, Helvetica, sans-serif;
}

#features li img
{
   float: left;
   /* Set bottom margin to -200% so that it doesn't make the box higher than
   the text */
   margin: 0 5px -200% -60px;
}

#features li h2
{
   color: #486FB4;
   font-size: 1.1em;
   line-height: 1;
}

#features li p
{
   line-height: 1.1;
   margin-bottom: 5px;
}

#features li p a
{
   color: #4C4C4C;
}

#features a
{
   border: none;
   text-decoration: none;
}
/*** features end ***/

/*** mini-nav begin ***/

#mini-nav
{
   clear: both;
   padding-top: 50px;
   font-size: 0.9em;
}

#mini-nav ul
{
   text-align: center;
}

#mini-nav li
{
   display: inline;
}

#mini-nav a
{
   color: #4C4C4C;
}

/*** mini-nav end ***/
/*** footer begin ***/

#footer
{
   margin: 0 auto;
   text-align: left;
   font-size: 0.85em;
   padding: 13px 0;
   margin-bottom: 60px;
   width: 950px;
   color: #4C4C4C;
}

#footer a
{
   color: #4C4C4C;
}

#footer #valid
{
   float: left;
}

#footer #legal
{
   float: right;
}

/*** footer end ***/