/* 
	Webfaction stylesheet
	Copyright 2003-2009 Swarma Limited
	
	last update: July 14 2009

	Thanks to Eric Meyer for the reset tool.

*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
  font-size: 80%;
  color: #132738;
  background: #EAEAE8;
  text-align: center;
  line-height: 1em;
}

/* Events */

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* Links */

a:link, a:visited {
  color: #4A9DE1;
  text-decoration: none;
}
a:hover {
  color: #6DB0E6;
}

/* Typography */

/* headers */ 

h1, h2, h3, h4 {
  color: #132738;
  font-weight: 300;
  margin: 0;
  padding: 0;
}

h1 {
  font: normal 2.3em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
  line-height: 1.9em;
  margin: 0 0 1em 0;
}

h2 {
  font: normal 1.9em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
	line-height: 1.9em;
	margin: 0 0 1em 0;
}

h3 {
  font: normal 1.4em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
	line-height: 1.7em;
}

h4 {
  font: normal 1.2em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
	line-height: 1.5em;
}

p {
  font: normal 1em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
  line-height: 1.6em;
	margin: 1em 0 1em 0;
  color: #132738;
}

strong {
	font-weight: 800;
}

em {
	font-style: italic;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
}
blockquote, q {
  quotes: "" "";
}

blockquote {
	font: normal 1.4em Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif;
  line-height: 1.6em;
  text-indent: 0;
  font-style: italic;
}

.legal {
  font-size: 1em;
}

.amp { 
  font: normal 1.4em Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif;
  font-style: italic;
  line-height: inherit;
}

small {
  font: .9em normal "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
}

.big {
  font: 1.1em normal "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
}

/* Lists */

ol {
  padding: 0px 0px 0px 20px;
}

ol li {
  line-height: 1.6em;
  padding-bottom: 10px;
}

ol li ol li {
  list-style-type: lower-alpha;
}

ol li ol li ol li {
  list-style-type: lower-roman;
}

ul {
  list-style: none;
}

ul {
  margin:  0 0 10px 0;
  padding: 0;
  list-style: none;
  overflow: hidden; 
}

ul li, li a {
	font: 300 1em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
	line-height: 1.6em;
}

ul.bulleted li {
	font: 300 1em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
	line-height: 2em;
	padding: 0 0 0 20px;
	background: transparent url(../images/check.png) no-repeat;
}

ul li.current a {
		font-weight: 800;
}

.seealso {
    list-style: square;
}

.side-navigation li a {
  color: #50A0E1;
  background: #C2DEF5;
  height: 20px;
  padding: 11px 10px 11px 10px;
  margin: 0 0 4px 0;
  display: block;
  text-align: left;
  font: normal 1.1em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
}

	.side-navigation li a:hover {
	  background: #6DB0E6;
	  color: #E2EFFA;
	}
	
	.side-navigation li.current a {
  	color: #E2EFFA;
  	background: #50A0E1;
	}

/* Orizontal navigation */

ul.orizontal-navigation li {
  float: left;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

ul.orizontal-navigation li a {
  float: left;
  display: block;
  margin: 0;
  padding: 10px;
}

ul.orizontal-navigation li.current a {
  display: block;
  font-weight: 800;
}

ul.orizontal-navigation.right-aligned {
  float: right;
}

/* Tables */

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: separate;
  border-spacing: 0;
}
caption, th, td {
  text-align: left;
  font-weight: normal;
}

/* Layout */

#container {
  width: 960px;
  margin: 0 auto;
  text-align: left;
}

#header {
  margin: 0 0 10px 0;
  background: transparent;;
}

	#logo {
	  padding: 20px 15px 10px 30px;
	  /* background: url('../images/webfaction-logo-home.png') no-repeat; */
	}
	
	#menu{
	  padding: 5px 0px 10px 0px;
	}
	
		#menu ul.orizontal-navigation li a {
	  	line-height: 1.4em;
	  	font: 300 1.2em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
		}
		
		#menu ul.orizontal-navigation li.current a {
			font-weight: 800;
		}

#content {
  background: #fff;
  border: 5px solid #fff;
}

	.topmain {
	  width: 620px;
	  float: left;
	}
	.main {
	  width: 548px;
	  float: left;
	}
	
	.topside {
	  width: 282px;
	  float: left;
	}
	.side {
	  width: 322px;
	  float: left;
	}
	
	.main-big {
	  width: 648px;
	  float: left;
	}
	
	.side-small {
	  width: 222px;
	  float: left;
	}
	
	.left {
	  padding: 0px 15px 30px 25px;
	} 
	
	.right {
	  padding: 0px 25px 30px 15px;
	}
	
	.first {
	  margin-left: 0;
	}
	
	.last {
	  margin-right: 0;
	}
	
	.top {
	  margin-top: 0;
	}
	
	.bottom {
	  margin-bottom: 0;
	}

#extra {
  padding: 30px 15px 30px 15px;
  background: #fff;
}

dl.feature {
  float: left;
  padding: 0 15px 0 15px;
  width: 198px;
}

	dl.feature dt {
	  font: normal 1.4em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
	  margin: 0 0 15px 60px;
	  color: #4A9DE1;
	}
	
  dl.feature dd {
  	line-height: 1.4em;
  }
  
  dl.showcase dd {
     margin: 0 0 0 58px;
     color: #132738;
  }

dl.faster {
  background: url(../images/faster.png) no-repeat 15px 0;
}

  dl.showcase.faster dt {
    margin: 0 0 10px 58px;
  }

dl.save {
  background: url(../images/calc.png) no-repeat 15px 0;
}

  dl.showcase.save dt {
    margin: 0 0 10px 58px;
  }

dl.one-click {
  background: url(../images/one-click.png) no-repeat 15px 0;
}

  dl.showcase.one-click dt {
    margin: 0 0 10px 58px;
  }

dl.flexible {
  background: url(../images/spring.png) no-repeat 15px 0;
}

  dl.showcase.flexible dt {
    margin: 0 0 10px 58px;
  }

dl.scale {
  background: url(../images/scale.png) no-repeat 15px 0;
}
	dl.showcase.scale dt {
    margin: 0 0 10px 58px;
	}

dl.support {
  background: url(../images/support.png) no-repeat 15px 0;
}

	dl.showcase.support dt {
    margin: 0 0 10px 58px;
	}

dl.neutral {
}

	dl.showcase.neutral dt {
    margin: 0 0 10px 58px;
	}
	
dl.rock {
  background: url(../images/rock.png) no-repeat 15px 0;
}

  dl.showcase.rock dt {
    margin: 0 0 10px 58px;
  }

dl.spam {
  background: url(../images/spam.png) no-repeat 15px 0;
}

  dl.showcase.spam dt {
    margin: 0 0 10px 58px;
  }
	
#details {
  background: #D7D7D5;
  text-align: left;
  margin: 0;
  padding: 15px 0 30px 30px;
}
	
	#details a {
		color: #898987;
	}
	
	#details a:hover {
		color: #9C9C9B;
	}
	
	#details p {
  	color: #626261;
	}
	
.slot {
	width: 196px;
	float: left;
	margin: 0 34px 0 0;
}
	

#footer {
  padding: 10px;
  color: #B0B0AE;
  text-align: center;
  height: 1%;
}

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

/* Home page related stuff */ 

#description {
  background: #C2DEF5 url(../images/big-faction.png) no-repeat bottom right;
}

	#description h2, #description h3 {
	  color: #132738;
	}

#buttons {
  padding: 25px 0 0 0;
}

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

/* Hosting page related stuff */ 

table.home_top_right td {
    vertical-align: middle;
    padding-left: 20px;
    color: #aaa;
}

table.login_screen td {
    padding: 10px 10px 10px 0;
    line-height: 1.4;
}

table.login_screen td.centered {
    text-align: center;
}

.plans {
  margin: 25px 0 25px 0;
  padding: 0;
  text-align: center;
}

table.plans td {
  border-bottom: 1px solid #EAEAE8;
  padding: 10px 0 10px 0;
  text-align: center;
  line-height: 1.4;
}

table.plans tr.namehead {
  font: normal 1.2em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
  background: #D8D8D6;
}

table.plans tr.namehead th {
    padding: 6px 0 6px 0;
    text-align: center;
  }

table.plans tr.head {
  font: normal 1.5em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
  background: #D8D8D6;
}

  table.plans tr.head th {
    padding: 6px 0 6px 0;
    text-align: center;
  }
  
  table.plans tr.head td {
    font: normal .9em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
    padding: 6px 0 6px 15px;
    text-align: left;
  }

.signup_form {
  margin: 25px 0 25px 0;
  padding: 0;
  text-align: center;
  width: 100%;
}

table.signup_form td {
  border-bottom: 1px solid #EAEAE8;
  padding: 10px 10px 10px 0;
  text-align: left;
  line-height: 1.4;
}

table.signup_form tr.namehead {
  font: normal 1.2em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
  background: #D8D8D6;
}

table.signup_form tr.namehead th {
    padding: 6px 0 6px 0;
    text-align: center;
  }

table.signup_form tr.button {
  font: normal 1.2em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
}

table.signup_form tr.button th {
    padding: 6px 0 6px 0;
    text-align: center;
  }


table.signup_form tr.head {
  font: normal 1.5em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
  background: #D8D8D6;
}

  table.signup_form tr.head th {
    padding: 6px 0 6px 0;
    text-align: center;
  }
  
  table.signup_form tr.head td {
    font: normal .9em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
    padding: 6px 0 6px 15px;
    text-align: center;
  }

/* Why Webfaction? page related stuff */ 

dl.why {
  padding: 0 15px 30px 15px;
  color: #4A9DE1;
}

	dl.why dt {
	  font: normal 1.5em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
	  margin: 0 0 15px 58px;
	}

.why dd {
	line-height: 1.4em;
}

.testimonial blockquote {
	font: normal 1.2em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
  line-height: 1.6em;
  text-indent: 0;
  font-style: italic;
}

/* Shared stuff */

.button a {
  height: 20px;
  padding: 8px 10px 11px 10px;
  display: block;
  text-align: center;
}

	.button a:hover {
		display: block;
	}

.button.orange a {
  color: #80582E;
  background: transparent url(../images/button-orange.png) no-repeat;
}

.button.blue a {
  color: #E2EFFA;
  background: transparent url(../images/button-blue.png) no-repeat;
}

.button.home a {
	float: left;
	width: 223px;
	height: 38px;
	margin: 0 30px 0 0;
	font: normal 1.4em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
}

.widget-green {
	background: #F0FAAC;
	padding: 15px;
  margin: 30px 0 30px 0;
}

.widget-grey {
  background: #EDEDEC;
  padding: 15px;
  margin: 30px 0 30px 0;
}

.widget-yellow {
  background: #FFF0B0;
  padding: 15px;
  margin: 30px 0 30px 0;
}

.clear:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}

.clear {
  display: inline-block;
}

/* Hides from IE-mac \*/
* html .clear {height: 1%;}
.clear {display: block;}
/* End hide from IE-mac */

/* This fixes the problem where IE6 adds an extra 3px margin to
two columns that are floated up against each other. */