/*
----------------------------------------
file: main.css
app: appmill
date: september 2007
desc: 
----------------------------------------
*/


/* elements
................................................................................ */
body {
   margin: 0;
   padding: 10px 0 20px;
   font: 1em verdana, arial, helvetica, sans-serif;
   line-height: 1em;
   color: #222;
   background-color: #737373;
   }

div, span, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, form, img, blockquote, tr, td {
   margin: 0;
   padding: 0;
   border: 0;
   }

table {
   border-collapse: collapse;
   }

ul, ol, li {
   list-style: none;
   }

img {
   display: block; /* remove inline whitespace (strict doctype) */
   }


/* layout
................................................................................ */
#maincontain {
   width: 770px;
   margin: 0 auto;
   }

#centercontain {
   padding: 0 10px;
   background: #fff url(../img/center_back.gif) repeat-y 0 0;
   }


/* head
................................................................................ */
#head {
   position: relative;
   height: 155px;
   }

#head_left {
   position: absolute;
   top: 90px;
   left: 0;
   width: 20px;
   height: 65px;
   background: url(../img/head_left.gif) no-repeat 0 0;
   }

#head_logo {
   position: absolute;
   top: 0;
   left: 20px;
   width: 210px;
   height: 155px;
   }

#head_right {
   position: absolute;
   top: 90px;
   left: 230px;
   width: 540px;
   height: 65px;
   background: url(../img/head_right.gif) no-repeat 0 0;
   }


/* banner
................................................................................ */
#banner {
    background-color: #000000; 
    }

/* bannerClientArea
................................................................................ */
#bannerClientArea {
    background: url(../img/client_area_banner_fill.gif) repeat-x 0 0;
    width: 750px;
    height: 70px;     
    }

/* nav
................................................................................ */
#nav {
   position: absolute;
   top: 130px;
   right: 10px;
   }

#nav li {
   float: left;
   width: 6em; /* this value governs the physical tab width - keep this value relative (EMs) */
   }

#nav a {
   display: block;
   height: 20px;
   padding: 6px 10px 0;
   border-left: 1px solid #161616;
   font: bold 75% arial, helvetica, sans-serif;
   text-align: center;
   text-decoration: none;
   color: #eee;
   }

#nav a:hover {
   color: #fff;
   background: url(../img/nav_link_back.gif) repeat-x 0 0;
   }


/* left column
................................................................................ */
#leftcol {
   float: left;
   }

/* right column
................................................................................ */
#rightcol {
   float: right;
   }


/* content
................................................................................ */
#content {
   padding: 10px 0;
   background-color: #fff;
   }

#middlecol1 {
   margin: 0 30px 0 235px;
   padding: 15px 0 0;
   }

#middlecol2 {
   margin: 0 225px 0 30px;
   padding: 15px 0 0;
   }

h2 {
   margin: 0 0 20px;
   font: bold 95% verdana, arial, helvetica, sans-serif;
   color: #555;
   }

h4 {
   margin: 0 0 20px;
   font: bold 75% verdana, arial, helvetica, sans-serif;
   color: #555;
   }

h5 {
   margin: 0 0 5px;
   font: bold 70% verdana, arial, helvetica, sans-serif;
   }

h6 {
   margin: 0 0 5px;
   font: bold 70% verdana, arial, helvetica, sans-serif;
   font-style: italic;
   }

p {
   padding: 0 0 20px;
   font-size: 70%;
   line-height: 1.5em;
   }

p.lessbord {
   padding: 0 0 5px;
   }

p.right {
   padding: 0;
   text-align: right;
   }

p a {
   color: #bf5f00;
   }

ul.items {
   margin-left: 16px;
   padding: 0 0 20px;
   font-size: 70%;
   }

ul.items ul {
   margin-left: 15px;
   }

ul.items li {
   list-style-image: url(../img/bullet1.gif);
   }

ul.items li li {
   list-style-image: url(../img/bullet2.gif);
   }


/* box1
................................................................................ */
.box1 td {
   vertical-align: top;
   font: 80% arial, helvetica, sans-serif;
   }

.box1 .headleft {
   width: 14px;
   background: url(../img/box1_head_left_back.gif) repeat-y 0 31px;
   }

.box1 .headright {
   width: 15px;
   background: url(../img/box1_head_right_back.gif) repeat-y 0 31px;
   }

.box1 .headcenter {
   /* to ensure seamless display of repeating background, use the following equation to determine width (repeat for content section below): */
   /* [ P + W = Z ]  P = sum of horizontal padding, W = desired cell width, Z = a number evenly divisible by 4 */
   /* Current example: P(10) + W(170) = Z(180) */
   width: 170px;
   padding: 10px 5px 5px;
   font-weight: bold;
   color: #fff;
   background: url(../img/box1_head_center_back.gif) repeat-x 0 0;
   }

.box1 .contentleft {
   width: 14px;
   vertical-align: bottom;
   background: url(../img/box1_content_left_back.gif) repeat-y 0 0;
   }

.box1 .contentright {
   width: 15px;
   vertical-align: bottom;
   background: url(../img/box1_content_right_back.gif) repeat-y 0 0;
   }

.box1 .contentcenter {
   /* to ensure seamless display of repeating background, use the following equation to determine width (repeat for head section above): */
   /* [ P + W = Z ]  P = sum of horizontal padding, W = desired cell width, Z = a number evenly divisible by 4 */
   /* Current example: P(10) + W(170) = Z(180) */
   width: 170px;
   padding: 5px 5px 12px;
   background: #fffefd url(../img/box1_content_center_back.gif) repeat-x 0 bottom;
   }


/* box2
................................................................................ */
.box2 td {
   vertical-align: top;
   font: 80% arial, helvetica, sans-serif;
   }

.box2 .headleft {
   width: 12px;
   background: url(../img/box2_head_left_back.gif) repeat-y 0 31px;
   }

.box2 .headright {
   width: 12px;
   background: url(../img/box2_head_right_back.gif) repeat-y 0 31px;
   }

.box2 .headcenter {
   width: 170px;
   padding: 10px 5px 5px;
   font-weight: bold;
   background: url(../img/box2_head_center_back.gif) repeat-x 0 0;
   }

.box2 .contentleft {
   width: 12px;
   vertical-align: bottom;
   background: url(../img/box2_content_left_back.gif) repeat-y 0 0;
   }

.box2 .contentright {
   width: 12px;
   vertical-align: bottom;
   background: url(../img/box2_content_right_back.gif) repeat-y 0 0;
   }

.box2 .contentcenter {
   width: 170px;
   padding: 5px 5px 12px;
   background: #fff url(../img/box2_content_center_back.gif) repeat-x 0 bottom;
   }


/* testimonial
................................................................................ */

.testimonialText {
   padding: 0px 0px 5px 0px;
   font: 100% arial, helvetica, sans-serif;
   font-style: italic;
   }
   
.testimonialSignature {
   padding: 0px 0px 5px 10px;
   font: 75% arial, helvetica, sans-serif;
   }
   
/* imagePopup
................................................................................ */

.imagePopupContainer
{
}

.imagePopupDivSmall 
{
	float:left;
	position: relative;
}
   
.imagePopupDivLargeHidden 
{
	float:left;
	display: none;
	position: absolute;
}
   
.imagePopupDivLargeVisible 
{
	float: left;
	display: block;
	position: absolute;
}

/* form styling
................................................................................ */
.formLabel
{
	width: 100px;
	float:left;
	padding-right: 10px;
	font: 75% arial, helvetica, sans-serif;
	font-weight: bold;
}


/* miscellaneous
................................................................................ */

.popupImageLinkParagraph
{
	float: right;
}
   
/* foot
................................................................................ */
#foot {
   clear: both;
   background: #fff url(../img/foot_back.jpg) repeat-x 0 100%;
   }

#foot p {
   padding: 10px 10px 5px;
   font: 70% arial, helvetica, sans-serif;
   text-align: center;
   color: #666;
   }


/* keel
................................................................................ */
#keel {
   height: 32px;
   background: url(../img/keel_back.gif) no-repeat 0 0;
   }
   
/* keel
................................................................................ */
.floatClear
{
	clear: both;
}