/* 
Real Costs style-sheet
	 styles.css
*/


/* 
styling the body, this is probably the most important style we'll be using.
notice that body is a tag so we have no prefix ( # or . )
*/

body {
font-family: helvetica, arial, sans-serif;
font-size: 15px;
color: #0E4F1F;
text-align: center;
/* this centers the page in IE (this is an incorrect interpretation by IE 
but we use it because it works.  usually we will have to do the "wrong" thing
for IE to work properly */
padding: 0 0 0 0;
margin: 0 0 0 0;
background-color:#fff;
}

#header {
width: 100%;
height: 77px;
float: left;
/*when we use the float tag, all parent elements need to float as well.  
this is the only way to get it working properly */
background-image: url('images/gradient.gif');
background-repeat: repeat-x;
margin: 0 0 25px 0;
}

#headertext {
width: 965px;
text-align: left;
margin: 0 auto;
padding: 0 0 0 15px;
}

.container {
width: 950px;
text-align: left;
margin: 0 auto;
/* this centers the container in all browsers except IE */
padding: 0 0 0 15px;
}

#logo {
width: 163px;
height: 77px;
float: left;
padding: 20px 0 0 0;
margin: 0 0 0 0;
}

div.float {
  float: left;
  }
  
div.clear {
  clear: both;
  }

#list {
width: 550px;
height: 77px;
float: left;
margin: 0 0 0 0;
}

#list ul {
list style: none;
padding: 29px 0 0 60px;
}

#list li {
list style: none;
display: inline;
/* 
this gives us a horizontal running list as opposed to the traditional vertical list.
now we need to set the margins correctly.
*/
margin: 0 20px 0 0;
font-size: .78em;
}

#list li a {
color: #0E4F1F;
text-decoration: none;
}

#list li a:hover {
color: #0E4F1F;
text-decoration: underline;
}

a {
color: #06c;
text-decoration: underline;
}


#name {
width: 187px;
height: 77px;
float: right;
text-align: right;
margin: 0 15px 0 0;
}

#name p {
margin: 45px 0 0 0;
font-size: .8em;
font-weight: bold;
}

#name a {
color: #0E4F1F;
text-decoration: none;
}

#name li a:hover {
color: #0E4F1F;
text-decoration: underline;
}


#mainContentLeft {
width: 475px;
height: auto;
float: left;
}

#mainContentLeft .current {
text-align: center;
}

h1.current {
font-size: 3em;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
h1.current_anchor {
font-size: 3em;
margin: 45px 0 0 0;
padding: 0 0 0 0;
}

#cVersion {
width: 400px;
height: 60px;
font-size: .9em;
margin: 10px 0 0 37px;
padding: 0 0 0 0;
text-align: center;
background-image: url('images/greenbar6.gif');
}

#cVersionGM {
width: 394px;
font-size: .9em;
margin: 10px 0 0 39px;
padding: 0 0 0 0;
text-align: center;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #ccff42;
}

h3.current {
font-size: 1.8em;
margin: 10px 0 0 0;
padding: 0 0 0 0;
}

h4.current {
font-size: 1.3em;
margin: 0 0 0 0;
padding: 22px 0 0 0;
font-weight: normal;
color: #0E4F1F;
}

p.current {
margin: 0 0 0 0;
padding: 0 20px 0 20px;
font-size: .9em;
line-height: 1.15em;
letter-spacing: .04em;
}

p#require {
font-weight: bold;
margin: 0 0 10px 0;
}

h4#require {
font-weight: bold;
}

span.emph {
font-weight: bold;
}

img.current {
margin: 15px 0 15px 0;
padding: 0 0 0 0;
}

p.para {
margin: 0 0 0 0;
padding: 0 20px 0 20px;
font-size: 1.1em;
line-height: 1.15em;
letter-spacing: .04em;
}
.para a{
color:#399A4B;
text-decoration: none;
}
.para a:hover{
color:#399A4B;
text-decoration: underline;
}

h2.para {
margin: 20px 0 0 0;
padding: 0 20px 0 20px;
font-size: 1.3em;
}

#mainContentRight {
width: 450px;
height: auto;
float: left;
}

img.bigshotB { 
position: absolute;
top:0;
margin: 77px 0 0 25px;
z-index:1000;
}
img.bigshotA { 
position: absolute;
top:0;
margin: 28px 0 0 292px;
z-index:1000;
}
img.bigshotC { 
position: absolute;
top:0;
margin: 0px 0 0 292px;
z-index:1000;
}

#screenShots {
float: left;
width: 950px;
height: 125px;
background-color:#eee;
text-align: center;
padding: 30px 0 30px 0;
margin: 90px 0 0 0;
}

.shot {
width: 25%;
height: 125px;
float: left;
}

.shot p {
font-weight: bold;
margin: 10px 0 0 0;
}

#bottomContent {
width: 950px;
height: auto;
float: left;
margin: 30px 0 0 0;
}

#bottomContentLeft {
width: 475px;
height: auto;
float: left;
}

#bottomContentright {
width: 475px;
height: auto;
float: left;
}

#footer {
width: 950px;
height: 77px;
float: left;
margin: 30px 0 0 0;
padding: 15px 0 0 0;
text-align: center;
border-width: 1px 0 0 0;
border-style: solid; 
border-color: #0E4F1F;
}

#footer img {
margin: 0 25px 0 0;
}

/*installation styles*/

.instruction{
width:1000px;
float: left;
margin: 25px 0 25px 0;
}

.leaf{
float: left;
width:59px;
margin: 0 30px 0 0;
}

.installText{
float:left;
width:225px;
margin: 0 0 0 0;
}

.installShot{
float:left;
width:700px;
height: 190px;
}
/*#uninstall{
font-weight: bold;
font-size:2em;
}*/
.anchor{
color:#399A4B;
text-decoration: none;
}
.last{margin:0 0 50px 0;}


.install{
font-weight: bold;
padding: 25px 0 0 0;
}
.install a{
color:#399A4B;
text-decoration: none;
}
.install a:hover{
color:#399A4B;
text-decoration: underline;
}
#supportbox{
float: left;
}
.supportrow{
margin: 0 0 0 0;
padding: 0 0 0 0;

}

/*screenshot styles*/
.shotWrap{
width:800px;
float:left;
}

.description{
margin: 0 0 0 0;
padding: 80px 0 0 50px;
width:175px;
float:left;
} 

.description2{
margin: 0 0 0 0;
padding: 0 0 0 50px;
width:175px;
float:left;
} 

.screenshot{
margin: 0 0 20px 10px;
padding: 7px 7px 7px 7px;
border: 2px 2px 2px 2px;
border-style:solid;
border-color:#ccff42;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
float:left;
}

.screenshot2{
margin: 0 0 20px 10px;
padding: 7px 7px 7px 7px;
border: 2px 2px 2px 2px;
border-style:solid;
border-color:#ccff42;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
float:left;
}