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

body {
  font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
  color: #555;
  font-size: 62.5%; 
  line-height: 1.7; /* Unitless for proper inheritance */
    text-align: center; /* IE Fix */
    margin:0px auto;
    background: url(/img/bg1.gif) repeat-x 0 0;
}

html > body   { font-size: 12px; }  /* Other browsers */


/* - - - - - clearfix - - - - - - - - - - - -*/            
                        
            /* float clearing for IE6 */
            * html .clearfix{
              height: 1%;
              overflow: visible;}
            
            /* float clearing for IE7 */
            *+html .clearfix{
              min-height: 1%;}
            
            /* float clearing for everyone else */
            .clearfix:after{
              clear: both;
              content: ".";
              display: block;
              height: 0;
              visibility: hidden;
              font-size: 0;}
              

#container {
  text-align: left;
  position: relative;
  padding: 0px;
  margin: 0 auto;   /* Centers layout */
  width: 1000px;     /* Total width */
}


#head{
    padding: 65px 0px 30px 0px;
    background: transparent url(/img/bg2.gif) no-repeat 60% 0}


#footer{   
        background: #0a495b url(/img/bg2.gif) no-repeat 45% 0; 
        position: relative;
        clear: both;
        text-align: left;
        width: 100%;
        margin: 80px auto 0px auto;
        padding: 20px 0px 40px 0px;
}

#footer #inner{
        width: 950px;
        margin: 0 auto}


/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { 
  color:#000; 
  clear:both; 
  margin: 0px;
}

h1  { 
    font-size: 28px;
    line-height: 34px;
    display: inline;
    margin: 0px;
    color: #fff; 
    font-family: Georgia;
    text-shadow: 0px 1px  2px #021e26;
    font-weight: normal }

h2 { 
    font-size: 16px;
    margin: 0px;
    display: inline;
    font-weight: normal; 
    line-height: 22px;
    text-shadow: 0px 1px  2px #063745;
    color: #42899d}
    
    
h3{
    color: #022731;
    font-size: 20px;
    font-weight: normal;
    font-family: Georgia;
    line-height: 25px;
    padding: 5px 0px 15px 0px;}
    



/* Text elements
-------------------------------------------------------------- */

p           { margin: 0em 0em 1em 0em}
p.last      { margin-bottom:0; }
p img       { float: left; margin: 1.5em 1.5em 1.5em 0; padding:0; }
p img.top   { margin-top:0; } 

p:first-line{
    padding-left: 15px;}


a           { color: #125AA7; text-decoration: none; outline: none; }
a:hover     { text-decoration: underline }

strong      { font-weight: bold; }
em          { font-style: italic; }
pre         { margin-bottom: 1.3em; background: #eee; border:0.1em solid #ddd; padding:1.5em; }




/* Use this to create a horizontal ruler across a column. */
hr {
  background: #B2CCFF; 
  color: #B2CCFF;
  clear: both; 
  float: none; 
  width: 100%; 
  height: 0.1em;
  margin: 0 0 1.4em 0;
  border: none; 
}
* html hr { margin: 0 0 1.2em 0; } /* IE6 fix */


/* Some default classes
-------------------------------------------------------------- */
.hide     { display: none; }
a.white{
    color: #fff;
}

.biggum{
    clear: left;
    font-weight: bold;
    margin: 10px 0px 0px 5px;
    color: #91d24e;
    background-color: #f4fdc2;
    font-size: 14px;
    padding: 3px 5px}

.title{
    color: #b3d094;
    font-size: 15px;
    line-height: 30px;}

a.button{   
    padding: 3px 10px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    color: #fff;
    background-color: #12acc3;
    font-size: 13px;}

#head a.button {  
    position: absolute;
    right: 87px;
    top: 87px;}
    
a.button:hover{
    background-color: #1495a9;
    text-decoration: none;}
     
#footer .button{
    position: absolute;
    right: 87px;
    top: 25px;}


.links            {font-size:13px; line-height:21px;}
.links  a           {font-size:13px; line-height:23px; color: #5da2a3}

   
.pad{
    padding-right: 20px;   } 

.info {
    border-bottom:1px solid #f3f3f3;
    padding:10px 2px}

.client {
    font-size: 20px;
    line-height: 23px;
    font-weight: bold;
    color: #111;
}

.calm{
   color: #999;
   font-weight: normal}
   
.client .calm{
   font-size: 14px;}

b                   {color: #000}
       

.right          {
    float: right;
    font-size: 11px;
}


#contact{
    width: 200px;
    float: right;
    padding-top: 10px;
    font-size: 12px;
    color: #333;
}

#contact a{
    color: #fff;
}

/* Extra fancy typography
-------------------------------------------------------------- */

/* For great looking type, use this code instead of asdf: 
   <span class="alt">asdf</span>  
   Best used on prepositions and ampersands. */
  
.alt { 
  font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", serif; 
  font-size: 1.2em;
  line-height: 1%; /* Maintain correct baseline */
  font-style: italic;
}


   
.dquo { margin-left: -.7em; } 

p.incr, .incr p {
	font-size: 0.83333em; /* font size 10px */
	line-height: 1.44em;  
	margin-bottom: 1.8em; /* Still 1.5 x normal font size as baseline */
}


/* Columns
-------------------------------------------------------------- */

/* Use this class together with the .span-x classes
   to create any compsition of columns in a layout.
   Nesting columns works like a charm (remember .first and .last). */
   
.column {
  float: left;
  margin: 0 10px;
  padding: 0;
}
* html .column { overflow-x: hidden; } /* IE6 fix */


/* Add this class to a column if you want a border on its 
   right hand side. This should be customized to fit your needs. */

.border {
  padding-right: 9px;
  margin-right: 0;
}

.bordertop {
  padding-top: 10px;
  border-top: 1px solid #ddd;
}

.bordertop3 {
  padding: 40px 0px;
 margin-top: 30px;
  border-top: 10px solid #f6f6f6;
}

.bordertop3.short {
  padding-top: 20px;
  border-top: 0px}
  
  
.description{
	float: left;
	padding-top: 0px;
	width: 340px;
  margin: 0px 40px 0px 0px;} 
  
 .testimonials{
 	font-size: 11px;
 	float: left;
 	padding-top: 20px;
	width: 430px;
  margin-right: 40px;} 
  
  .clients{
	font-size: 11px;
 	float: left;
 	margin: 0px;
 	padding: 0px;
 	width: 150px;} 


/* reccs ---*/

        .testimonials  {
            color: #999;
            padding:0px  40px 0px 0px;
            margin: 0px;}
        
         .attribution {
            padding-top: 5px;
            font-style: normal;
            display: block}
        
         .attribution strong {
            color: #666;

            display: block;
            font-weight: bold}
        
        .testimonials p{
            font-size: 11.5px;
            padding: 5px 0px 10px 0px;
            font-style: italic; 
            line-height: 18px;
            border-top: 1px dotted #eaeaea;
            margin: 0px;}


.bordertop3.short   .span-2  {
  width: 320px;
  margin-right: 40px;}
  
.bordertop3.short   .span-3  {
    width: 400px;
    padding-right: 40px;}


.close{
    padding-top: 10px;
}

.borderleft {
  padding-left: 9px;
  margin-right: 0;
  border-left: 1px solid #ddd;
}


/* BACKGROUNDS. */

.ea     {background-color:#eaeaea}


/* MARGINS/PADDING */

.pleft           {padding-left:20px;}


/* MARGINS/PADDING */

.logo{
    text-align: center;
    padding: 20px 0px;
}


.first  { margin-left: 0; }
.last   { margin-right: 0; }


/* Use these classes to set how wide a column should be. */
.span-1   { width: 150px;  }
.span-2   { width: 320px;}
.span-3   { width: 490px; }
.span-4   { width: 660px; }
.span-5   { width: 830px; }
.span-6   { width: 1000px; margin: 0;}

.nomargin { width: 185px;  margin-left:-35px; }


/* Use a .box to create a padded box inside a column. 
   Sticking to the the baseline. */ 
   
.box { 
  padding: 1.5em; 
  margin-bottom: 1.5em; 
  background: #f0f0f0; 
}


.info .att{
    color: #888  }


.clear { display: inline-block; }   
.clear:after, .container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
* html .clear { height: 1%; }
.clear { display: block; }



.back, caption,pre,blockquote,input,textarea {
  padding-left: 5px;
  padding-right: 5px;
}
div, table {
  margin-left: 5px;
  margin-right: 5px;
  padding: 0;
} 


/* to top UI */

#toTop {
	display:none;
	text-decoration:none;
	position:fixed;
	bottom:10px;
	right:10px;
	overflow:hidden;
	width:51px;
	height:51px;
	border:none;
	text-indent:-999px;
	background:url(../img/ui.totop.png) no-repeat left top;
}

#toTopHover {
	background:url(../img/ui.totop.png) no-repeat left -51px;
	width:51px;
	height:51px;
	display:block;
	overflow:hidden;
	float:left;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
	outline:none;}
	
	*{margin:0 auto;}
		#wrapper {width:90%;margin:15px auto;}