/* Neutralize styling: 
   Elements we want to clean out entirely
   and we reset the base font-size to 10px:
---------------------------------------------------------------- */
html, body, form, fieldset {
        margin: 0;
        padding: 0;
        font-size: 100%;
        line-height: 1.5;
        font-family: Arial, Helvetica, sans-serif;
}
html { 
    font-size: 100.01%; /* avoids obscure font-size bug */
    height: 100%;
    margin-bottom: 1px; /* avoid jumping scrollbars */
} 
body { 
    font-size: 62.5%; /* 10px ... 68.75%=11px 75%=12px  81.25%=13px  87.5%=14px*/
    height: 100%;
    text-align: center;
    background: #fff url(../images/bg.gif) repeat-x;
    margin-bottom: -25px;
}
img {
    border: 0;
}

/* Neutralize styling:
   Elements with a vertical margin:
---------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, li, dl, address {
        margin: 0 0 1em;
        padding: 0;
}

/* Apply left margin:
   Only to the few elements that need it:
---------------------------------------------------------------- */
li, dd, blockquote {
        margin-left: 1em;
}

/* Miscellaneous conveniences: 
---------------------------------------------------------------- */
form label {
        cursor: pointer;
}
fieldset {
        border: none;
}
input, select, textarea, td {
        font-size: 100%;
}
.clearfix, .cls { /* use with a <br class="cls" /> to clear floats with no extra space*/
    clear: both;
    height: 0;
    margin: 0;
    font-size: 1px;
    line-height: 0;
}
.clear { clear: both; }


/* Headers and Paragraphs:
---------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	clear: both;
}

h1 { font-size: 218%; }
h2 { font-size: 164%; }
h3 { font-size: 145%; }
h4 { font-size: 118%; }
h5 { font-size: 100%; font-weight: bold; }
h6 { font-size: 86%; font-weight: bold; }

p, li { color: #777; }
p.caption { font-size: 86%; color: #555; }

a { 
    color: #00a;
    color: #e88b00;
}
/* Basic Layout:
---------------------------------------------------------------- */
/* this provides a way to set your width and build sticky footers */

#lead {
    width: 675px;
    margin: 0 auto;
    padding: 12px 8px 1px;
    text-align: right;
    font-size: 120%;
    color: #aaa;
    background: transparent url(../images/lead-bg.png) no-repeat bottom;
}
    #nav {
        padding: 0 0 2px;
    }
        #nav a {
            color: #444;
            text-decoration: none;
            padding: 12px 8px 4px;
            line-height: 22px;
        }
        #nav a:hover, #nav .active a {
            color: #111;
            border-bottom: 2px solid #fc950c;
        }
        #nav .active a { cursor: default; }
        #nav span.last span { display: none }
        #nav a.active { color: #000 }

#wrap {
    margin: 0 auto;
    width: 675px;
    padding: 0 8px;
    text-align: left;
    background: transparent url(../images/shadow-bg.png) repeat-y top center;
    font-size: 120%;
}
#contentwrap {
    background: #fff url(../images/header.gif) repeat-x 0 201px;
    width: 675px;
}

#content {
    margin: 0 0 10px 0;
    padding: 0 8px 1em;
    clear: both;
}

.thirds, .lastthird {
    width: 200px;
    padding: 0 16px 0 4px;
    float: left;
}
.lastthird {
    padding: 0 0 0 4px;
    width: 208px;
}
    h1, h2 { 
        color: #6a6a6a;
        line-height: 1.2;
        font-size: 150%;
        margin: 0;
    }
    h1 { font-size: 170%;}
#intro {
}
    #intro h1 {
        font-size: 220%;
        margin: -30px 0 0;
        margin: 0;
        padding: 4px 25px 0 3px;
    }
    #intro p {
        margin-left: 4px;
        font-size: 110%;
        line-height: 1.75;
        width: 475px;
    }
    h1 span, h2 span, span.emph { color: #fc950c; }
    h4 span { color: #aaa; font-size: 86%; }
    .thirds p,
    .lastthird p {
        font-size: 110%;
        line-height: 1.4;
    }
#main {
    margin-top: 1em;
    padding: 0 14px 0 4px;
    width: 420px;
    float: left;
    position: relative;
}
#side {
    margin-top: 1em;
    width: 216px;
    float: left;
    position: relative;
}
    #side h2 { margin-left: 5px; }
    #side-content {
        border-left: 1px solid #efefef;
        padding-left: 9px;
        margin-left: -5px;
    }
    
    #main p, #side p {
        line-height: 1.6;
    }
    h3,h4,h5 {
        color: #666;
        margin: 0;
    }
#head {
    height: 250px;
    background: transparent url(../images/pencils.jpg) no-repeat 320px 100%;
    border: 8px solid #fff;
    border-width: 0 8px 8px;
    position: relative;
}
    h1#logo {
        width: 155px;
        height: 64px;
        font-size: 218%;
        text-indent: -9999px;
        overflow: hidden;
        background: url(../images/logo.png) no-repeat;
        position: absolute;
        top: -13px;
        left: 6px;
    }
        #logo a {display: block}

#foot {
    background: transparent url(../images/foot-bg.png) no-repeat;
    width: 653px;
    margin: 0 auto 20px;
    padding: 55px 18px 20px;
    text-align: right;
    clear: both;
}
#foot a {
    color: #777;
    text-decoration: none;
}
#foot a:hover {
    color: #444;
}


#main a, #side a { 
    color: #009;
    color: #e57215;
    padding: 1px 2px;
    margin: -1px -2px;
}
#main a:hover, #side a:hover {
    color: #fff;
    background-color: #22b;
    text-decoration: none;
}

/* paragraph icons */
#dev, #host, #supp {
    background: #fff url(../images/dashboard.gif) no-repeat;
    padding-left: 40px;
}
#host { background-image: url(../images/database.gif);}
#supp { background-image: url(../images/help.gif);}

#modx, #xpdo, #tattoo {
    background: #fff url(../images/modx.jpg) no-repeat;
    padding-left: 110px;
}
#xpdo { background-image: url(../images/xpdo.jpg);}
#tattoo { background-image: url(../images/tattoo.jpg);}
    
/* Forms (http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/):
---------------------------------------------------------------- */
div.form { 
    margin: 10px 0;
    background: #fff;
    position: relative;
    z-index: 9999;
}

p.legend { margin-bottom: 1em; }
p.legend em { color: #C00; font-style: normal; }

div.errors { margin: 0 0 10px 0; padding: 5px 10px; border: 1px solid #fc6; background-color: #ffc; }
div.errors p { margin: 0; }
div.errors strong { color: #c00; font-weight: bold; }

div.form form p { margin: 0; }
div.form form p.note { margin-left: 123px; font-size: 90%; color: #333; }
div.form form fieldset { margin: 10px 0; padding: 10px; border: 1px solid #ddd; background-color: #fbfbfb; }
div.form form legend { font-weight: bold; color: #666; }
div.form form fieldset div { padding: 0.25em 0; }
div.form label { margin-right: 10px; padding-right: 10px; width: 100px; display: block; float: left; text-align: right; position: relative; }
div.form label.error, 
div.form span.error { color: #c00; }
div.form label em { position: absolute; right: 0; font-size: 120%; font-style: normal; color: #C00; }
div.form input.error,
div.form textarea.error { border-color: #c00; background-color: #ffc; }
div.form input:focus,
div.form textarea:focus,
div.form input.error:focus, 
div.form textarea.error:focus { background-color: #fff !important; border-color: #fc6; }
div.form div.controlset label, 
div.form div.controlset input { display: inline; float: none; }
div.form div.controlset label.controlset { display: block; float: left; }
div.form div.controlset div { margin-left: 120px; }
div.form div.buttonrow { margin-left: 130px; }

/* Tables:
---------------------------------------------------------------- */
caption {
	padding: 0 0 5px 0;
	width: 400px;
	text-align: right;
	font-size: 86%;
}

thead th {
	border-top: 1px solid #cbcbcb;
	border-right: 1px solid #cbcbcb;
	letter-spacing: 1px;
	padding: 2px 0 0;
	background: #f90;
	width: 40px !important;
	color: #fff;
	font-weight: normal;
	text-align: center;
}

thead th.nobg {
	border-top: 0;
	border-left: 0;
	border-right: 1px solid #cbcbcb;
	background: none;
	width: 200px !important;
	text-align: left;
	color: #555;
	padding-left: 12px;
	text-align: left;
}

td, th {
	border-right: 1px solid #cbcbcb;
	border-bottom: 1px solid #cbcbcb;
	background: #fff;
	padding: 0 6px 0 12px;
	color: #333;
	height: 24px;
    line-height: 24px;
    background: #fff url(../images/bg-td.gif) repeat-x;
    line-height: 1.3;
}

tbody th {
	border-left: 1px solid #cbcbcb;
	border-top: 0;
	text-align: left;
	font-weight: normal;
}
tbody td {
    text-align: center;
    padding: 3px 6px;
}
tr.alt td, tr.alt th {
	background: #ffffcc url(../images/bg-tdalt.gif) repeat-x bottom;
}
tr.highlight td, tr.highlight th {
    background-color: #dae2d0;
    background-color: #feffd2;
    background-image: none;
    color: #000;
}
td.included span,
td.not-included span {
	display: block;
	width: 100%;
	text-indent: -999px;
    overflow: hidden;
	background: url(../images/host/accept.png) no-repeat center center;
}
td.not-included span {
    background: url(../images/host/bullet_white.png) no-repeat center center;
}
tr.designed-for td {
    font-size: 75%;
}



/* Ajax Search:
---------------------------------------------------------------- */
#ajaxSearch_form {
    color: #444;
    width: auto;
}
#ajaxSearch_input {
    width: auto;
    display: inline;
    height: 17px;
    border: 1px solid #ddd;
    border-left-color: #c3c3c3;
    border-top-color: #7c7c7c;
    background: #fff url(images/input-bg.gif) repeat-x top left;
    margin: 0 3px 0 0;
    padding: 3px 0 0;
    vertical-align: top;
}
#ajaxSearch_submit {
    display: inline;
    height: 22px;
    line-height: 22px;
}
#ajaxSearch_output {
    border: 1px solid #444;
    padding: 10px;
    background: #fff;
    display: block;
    height: auto;
    vertical-align: top;
}
.ajaxSearch_paging {

}
.AS_ajax_result {
    color: #444;
    margin-bottom: 3px;
}
.AS_ajax_resultLink {
    text-decoration: underline;
}
.AS_ajax_resultDescription{
    color: #555;
}
.AS_ajax_more {
    color: #555;
}
.AS_ajax_highlight {
    background: #FFFEab;
    padding: 1px;
    margin: -1px;
}