@import url(reset.css);

/********************************************************************************
   UNIVERSAL STYLES
 ********************************************************************************/
* {
    margin: 0;
    padding: 0; }

body {
    width: 100%;
    height: 100%;
    background: rgb(70,70,70);
    font-family: Georgia, "Times New Roman", serif;
}

h1 {
    padding-top:40px;
    font-size:32px;
}

h2 {
    text-align:left;
    padding-top:20px;
    font-size:26px;
    font-weight:normal;
}

ul {
    list-style-type:disc;
}


p {
    font-size:16px;
    margin-top:20px;
}

form {
    margin-top:40px;
    margin-left:10px;
}
/* attribute selectors do not work in IE 6 -- otherwise I would use input[type=text]  */
input.text, textarea {
    width:280px;
    border: 1px solid rgb(179,179,179);
    border-top:2px solid rgb(179,179,179);
    font-size:14px;
}

textarea {
    height:108px;
}

label {
    font-style:italic;
    font-size:12px;
}

label.disabled {
    color: rgb(153,153,153);
}

em {
    font-style:italic;
}

td {
    padding-bottom:12px;
    padding-right:6px;
}

th {
    vertical-align:top;
    padding-right:6px;
}
/*Note, when updating the width on this you should also check the width on th.features*/
th label {
    display:block;
    width:118px;    
}

a {
    text-decoration:underline;
    color: rgb(0,0,0);
    font-weight:bold;
}

h2 a {
    text-decoration:none;
    font-weight:normal;
}


a:hover {
    text-decoration:none;
}

.clearer {
    clear:both;
    height:0px;
    line-height:0px;
}

.error {
    color:rgb(213,9,28);
    font-weight:bold;
}

td.error {
    padding-bottom:0px;
}

.inline_icon {
    vertical-align:middle;
}

/********************************************************************************
   HEADER STYLES
 ********************************************************************************/

.header {
    background:url(/images/banner.gif) no-repeat 90px 40px;
    background-color: rgb(0,0,0);
    height:149px;
    width:1180px;
    margin:auto;
}

#logo {
    position:absolute;
    scale:1;
    margin-left:90px;
    margin-top:40px;
}

#navigation {
    float:right;    
    list-style:none;
    width: 433px;
    margin:0;
    padding: 0;
}

#navigation li {
    float:left;
    display:block;
    margin-left:0px;
    color:rgb(252,252,252);
}

#navigation a {
    display:block;
    color:rgb(252,252,252);
    background:url(/images/button-normal.gif);/*rgb(70,70,70);*/
    text-transform:uppercase;
    text-decoration:none;
    font-weight:normal;
    font-size:14px;
    font-family: "Gill Sans", "Lucida Sans Unicode", "Lucida Grande", Arial, sans-serif;
    padding:4px 10px;
    border-left:1px solid rgb(30,30,30);
    border-top:1px solid rgb(30,30,30);
    border-bottom:1px solid rgb(30,30,30);
}

#navigation li.last {
    border-right:1px solid rgb(30,30,30);
}

#navigation a:hover, #navigation li.current a {
   /*background:rgb(70,70,70);*/
   background:url(/images/button-over.gif);
}


/********************************************************************************
   BODY STYLES
 ********************************************************************************/

.main_body_content {
    background-color: rgb(252,252,252);
    width:1180px;
    margin:auto;
}

.splash {
    background-color: rgb(75,75,75);
    height:336px;
    width:1180px;
    margin:auto;
}

.caption {
    font-size:12px;
}

h2.conversational {
    font-style:italic;   
    line-height:120%;
}

h3.conversational {
    font-style:italic;   
    margin-bottom:10px;
}

.submit_button {
    float:right;
    margin-top:20px;
}


/* 
   The About Us page is odd in that it blends with the footer
*/
#about_us {
    background-color:rgb(58,58,58);
    color:rgb(217,217,217);
    padding-left:120px;
    padding-right:120px;    
}

#about_us .two_thirds {

}
#about_us .one_third {
    margin-left:70px;
    margin-right:0px;
}

#about_us a {
    color:rgb(252,252,252);
}

.contact_info {
    float:left;
    width:140px;
    margin-top:40px;
}

.contact_info p {
    font-size:12px;
    margin-bottom:0px;
}

/* 
   The container for a three column layout. All column layout code taken from 
   manisheriar.com 
*/
#columns {
  width: 940px;
  margin: 0 auto 10px;
}

#column_wrapper_1 {
    position:relative;
    text-align:left;
    width:100%;
}

#column_wrapper_2 {
    position:relative;
    text-align:left;
    width:100%;
}

/* A column of text that spans all three layout columns */
.full_width {
    padding-top:20px;
    margin-bottom:40px;
}

.one_third {
    float:left;
    width:280px;
    margin-right:50px;
}

.two_thirds {
    float:left;
    width:560px;
}

.one_half {
    float:left;
    padding-top:40px;
    width:460px;
}

p.contact {
    padding-right:80px;
}

input.short_input {
    width:100px;
}

p.features {
    width:118px;
    font-size:12px;
    font-style:italic;
    margin-top:0px;
}

p.important {
    font-size:24px;
}

label.features {
    display:block;
    width:120px;
}

.screencast {
    width:384px;
    margin:auto;
    padding-top:16px;
}

/* cols 1,2,3 are in this order because it's the order they must appear in the 
   source HTML */
.column_1 { 
    position:relative;
    top:-10px;
    left:-10px;
    float:left;
    width:300px;  /* for IE5/WIN */
    voice-family: "\"}\"";
    voice-family:inherit;
    width:280px; /* actual value */
    margin:0 0 -10px 0;
    padding:0 25px;
    z-index:100;
}

.column_3 {
    position:relative;
    top:-10px;
    right:-10px;
    float:right;
    width:300px;  /* for IE5/WIN */
    voice-family: "\"}\"";
    voice-family:inherit;
    width:280px; /* actual value */
    margin:0 0 -10px 0;
    padding:0 25px;
    z-index:99;
}

.column_2 {
    position:relative;
    top:-10px;
    padding:0 330px;
}

.row_separator {
    height:30px;
    clear:both;
}

.last_row_separator {
    height:60px;
    clear:both;
}

.second_row p {
    margin-top:0px;
}

/* Light colored text, for columns */
.normal_fade, .normal_fade a {
    color:rgb(102,102,102);
    font-size:14px;
}
/* Non breaking text, should be placed around parenthesized words */
.nobreak {
    white-space:nowrap;
}

ul.normal_fade {
    padding-left:40px;
    padding-top:10px;
}



/* The Gears diagram needs to break out from the left margin */
.diagram_breakout {
    margin-left:-60px;
}


/* 
   A feature description box consisting of a heading, a drop-cap 
   style image, and one or more paragraphs of text.
*/
.feature {
    color:rgb(102,102,102);
}

.feature img {
    float:left;
    margin-right:10px;
    margin-top:30px;
    margin-bottom:30px;
}

.feature h2 {
    font-size:18px;
    color:rgb(0,0,0);
    float:left;
    width:190px;
    text-align:left;
    line-height:24px;
}

.feature h3 {
    margin-top:15px;
    font-weight:normal;
    color:rgb(153,153,153);
}

.feature p {
    font-size:14px;
}

.feature ul, .feature ol {
    font-size:14px;
    margin-left:20px;
}


ul.thanks {
    font-size:16px;
    padding-top:14px;
}
ul.thanks li {
    margin-left:60px;
    padding-top:10px;
    width:460px;
}

h2.package {
    margin-bottom:0px;
}

div.more_info {
    /*display:none;*/
}

a.more_info {
    font-size:10px;
}

.more_info h3 {
    margin-top:12px;
    margin-bottom:3px;
}

/********************************************************************************
   FOOTER STYLES
 ********************************************************************************/

.footer {
    width:1180px;
    height:100px;
    margin:auto;
    margin-top:0px;
    padding-top:10px;
    background-color:rgb(58,58,58);
}

.footer p {
    font-style:italic;
    font-size:12px;
    color: rgb(252,252,252);
    margin-left: 120px;
    margin-right: 120px;
    margin-top:0px;
}


.footer a {
    color: rgb(252,252,252);
    text-decoration:none;
}

.footer a:hover {
    text-decoration:underline;
}