body {
    margin:0px; padding:0px;
    background: url("../images/bg-tree.png") repeat-y #46A0CE;
    color: #27231F;
    font: 13px/18px Georgia, Sans-Serif;
}

a { color:#999999; text-decoration: underline; }
a:hover { text-decoration: none; }

.clear { clear:both; }

h1 {
    font: bold 32px/45px Helvetica, Arial, Sans-Serif;
    color: #46A0CE;
    margin: 0px 0px 0px 0px;
}

.hr {
    background-color: #e5e5e5;
    height:1px; overflow:hidden;
    margin:20px 0px;
}

.desc {
    margin:0px 0px 20px 0px;
    font:16px/22px Georgia, Serif;
    color:#27231F;
}

#wrap { width:600px; margin:210px 0px 0px 80px; background:white; position:relative; }
#logo {
    position:absolute;
    left:-30px; top:-155px;
    width:282px; height:169px;
    overflow:hidden;
}
#logo a {
    display:block;
    width:282px; height:169px;
    overflow:hidden;
    background: url("../images/jeanluc.png") no-repeat;
}

#loginn {
    position:absolute;
    left:-80px; top:-210px;
    width:134px; height:141px;
    overflow:hidden;
    z-index: 3;
}
#loginn a {
    display:block;
    width:134px; height:141px;
    overflow:hidden;
    background: url("../images/loginn-hole.png") no-repeat;
}
* html #loginn a { cursor: pointer; background:transparent; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/assets/images/loginn-hole.png', sizingMethod='crop'); }


#leader {
    position:absolute;
    left:271px; top:-129px;
    width:320px;
    color:white;
    font: italic 16px/22px Georgia;
}
#leader a { color:white; }

#menu {
    position:absolute;
    top:-40px; left:271px;
    height:40px;
    overflow:hidden;
}
.roost #menu { width: 249px; left:354px;}

#menu a {
    display:block;
    width:80px; height:40px;
    overflow:hidden;
    background:#E5E5E5;
    font:16px/40px Georgia;
    color:#27231F;
    text-decoration: none;
    text-align: center;
    float:left;
    margin-left: 3px;
}
#menu a:hover { background: #9FC554; color:white; }
#menu a.selected { background: #9FC554; color:white; }
#menu a.first-child { margin:0px; }

#content { width:520px; padding:40px; }


#do_the_math {
    display:block;
    background: url("../images/do_the_math.png") no-repeat transparent;
    width:600px; height: 150px; overflow: hidden;
    margin:20px 0px 0px 80px;
}

#footer {
    position: relative;
    background: url("../images/ftr-bg.png") no-repeat transparent;
    width:630px; height:110px;
    overflow: hidden;
    margin:20px 0px 20px 50px;
}

#footer-info {
    color:white; 
    font: italic 13px/18px Georgia, Sans-Serif;
    padding:60px 0px 0px 30px;
}

#footer-info a { color:white; }


/* SIDEBAR :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#sidebar { position: absolute; left: 610px; top:0px; z-index: 2; width:200px; }
#sidebar .module { margin-bottom:10px; }

#sidebar #sidenote { background: url("../images/sidenote-bg.png") left bottom repeat-y; }
#sidebar #sidenote h4 { background: url("../images/sidenote-bg.png") left top repeat-y; font: normal 16px/22px Georgia, Serif; color: #27231F; padding: 15px 13px 10px 13px; margin:0px; }
#sidebar #sidenote ul { margin:0px; padding:0px 0px 20px 0px; }
#sidebar #sidenote li { list-style: none; padding: 5px 13px; margin:0px; font: italic 13px/18px Georgia, Serif; color: #27231F; }
#sidebar #sidenote a { color: #316B8A; text-decoration: underline; }
#sidebar #sidenote a:hover { text-decoration: none; }


/* STATIC PAGES ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.static h1 { margin-bottom:10px; }
.static a { color: #ED5933; }

.static a.biglink { display:block; margin:10px 0px; }

span.dark { color: #27231F; }
p.small { font-size: 13px; line-height:18px; color:#666666; }
p.mini { font-size: 11px; line-height:15px; font-style: italic; color:#666666; }
p.subhead {
    color:#27231F;
    font-size:16px;
    font-weight:normal;
    line-height:22px;
    margin-top:0px;
}

.code {
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */

    padding:10px 20px;
    border: 1px solid #e9e9e9;
    font: 10px/12px;
    font-family: monospace;
}

span.sub { font-style:italic; font-size: .9em; color: #666666; }


.static p.light { font-size: 13px; line-height:18px; color:#666666; }
.static #content {
    font-size: 16px;
    line-height: 22px;
    color: #27231F;
    font-weight:normal;
}

.green h1 { color: #9FC554; }
.green h3 { font: normal 16px/22px Georgia, Serif; margin:20px 0px 0px 0px; padding:0px; }
.green h3 a { text-decoration: none; color:#2D711C; }
.green h3 a:hover { text-decoration: underline; }


.steplist { list-style: none; margin:0px; padding:0px; }
.steplist li { list-style: none; padding:0px; margin: 20px 0px 30px 0px; }
.steplist li .number { float:left; width: 60px; font-size: 16px; line-height: 22px; color:#B3895F; font-style:italic; }
.steplist li .title { float: left; font-size: 16px; line-height: 22px; color:#27231F; }
.steplist li p { margin:5px 0px; font-size:13px; line-height:18px; color:#666666; font-style:italic; }
.steplist li p b { color:black; }
.steplist li img { margin: 20px 0px; }


#reasons { background: #B3895F; padding:10px; margin: 25px 0px 40px 0px; }
#reasons #hdr { color: white; font:bold 32px/45px helvetica, arial, sans-serif; text-align:center; }
#reasons #subhdr { color: white; font:bold 14px/20px helvetica, arial, sans-serif; text-align:center; padding-bottom:10px;}

#reasons ol, #reasons li { list-style: none; margin:0px; padding:0px; }
#reasons li { padding:15px; background:white; margin-bottom:1px;}
#reasons li .number { 
    width:50px; height:50px;
    overflow:hidden;
    font: bold 50px/50px Helvetica, Arial, Sans-Serif;
    color:#ED5933;
    float:left;
    text-align:center;
    margin-right: 10px;
}
#reasons li .title { font: 16px/22px Georgia, Serif; color: #27231F; }
#reasons li .hint { font: 13px/22px Georgia, Serif; color: #999999; }

#reasons li#reason-9 { background:#ED5933; }
#reasons li#reason-9 .number { color:white; }
#reasons li#reason-9 .hint { color: white; }
#reasons li#reason-9 .hint a { color: white; }


#btn-pro-signup {
    display: block;
    width:140px; height: 140px;
    overflow: hidden;
    background: url("../images/pro-signup.png") top left no-repeat;
    float:right;
    margin:0px 0px 50px 20px;
}
#btn-pro-signup:hover { background-position: 0px -140px; }



/* ROOST :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#cards .card {
    margin:10px 0px;
    padding:10px;
    background: #E5E5E5;
}
#cards .card .title {
    padding:0px 0px 10px 0px;
    font: 21px/30px Georgia, Serif;
}
#cards .card .title a {
    font: bold 13px/30px Helvetica, Arial, Sans-Serif;
    float:right;
}

#cards .card .title a.edit { padding-left: 10px;}

#cards .card .logo {
    width:130px; height:130px;
    overflow:hidden;
    background: white;
    float:left;
    margin-right: 10px;
}
#cards .card .logo a {
    display:block;
    width: 90px;
    height:90px;
    overflow:hidden;
    margin:20px;
}

#cards .card .email {
    height:40px;
    overflow:hidden;
    background: white;
    margin-bottom:10px;
    padding:20px;
}
#cards .card .email div {
    padding-left: 70px;
    background: url("../images/icon-card.png") no-repeat center left;
    font: italic 13px/20px Georgia, Serif;
    color: #999999;
}
#cards .card .email div span {
    font: italic 10px/20px Helvetica, Arial, Sans-Serif;
    color: #666666;
}


#cards .card .proxy {
    height:40px;
    overflow:hidden;
    background: white;
}
#cards .card .proxy span {
    display: block;
    padding:10px;
    line-height:20px;
    font: italic 14px/20px Georgia, Serif;
    color: #666666;
}

#cards .card .proxy span a {
    font: bold 14px/20px Helvetica, Arial, Sans-Serif; 
    color: #ED5933;
}

#roost .info { font: italic 18px/40px Georgia, Serif; color:#999999; }
#roost .info a { color:#ED5933; }

#roost #contacts { margin-top: 40px; }
#roost #contacts table { width:100%; margin:0px; padding:0px; border:0px; border-collapse: collapse; }
#roost #contacts tr { margin:0px; padding:0px; }
#roost #contacts td { margin:0px; padding:0px; }
#roost #contacts td { font: 12px/49px Helvetica, Arial, Sans-Serif; border-bottom: 1px solid #E5E5E5; }
#roost #contacts tr.first-child td { border-top: 1px solid #E5E5E5; }
#roost #contacts td a, #roost #contacts td.email a:visited { text-decoration: none; color: #ED5933; font-weight: bold;}
#roost #contacts td a:hover { text-decoration: underline; }
#roost #contacts td.card { font: italic 13px/49px Georgia, Serif; color: #27231F; text-align: center; }
#roost #contacts td.date { font: bold 11px/49px Helvetica, Arial, Sans-Serif; color:#999999; text-align: right; }


.btn-big {
    display:block;
    margin-top: 20px;
    width: 520px;
    height: 80px;
    background: #9FC554;
    font: bold 32px/80px Helvetica, Arial, Sans-Serif;
    text-decoration: none;
    color:white;
    text-align: center;
    border:0px;
    cursor: pointer;
}
.btn-big:hover { background: #E5E5E5; color: #27231F; text-decoration: none;}


/* EMAILS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#emails table { width:100%; margin:0px; padding:0px; border:0px; border-collapse: collapse; }
#emails tr { margin:0px; padding:0px; }
#emails td { margin:0px; padding:0px; }
#emails td { font: 12px/49px Helvetica, Arial, Sans-Serif; border-bottom: 1px solid #E5E5E5; }
#emails tr.first-child td { border-top: 1px solid #E5E5E5; }
#emails td.address { text-decoration: none; color: #ED5933; font-weight: bold;}
#emails td a:hover { text-decoration: underline; }
#emails td.status { font: italic 13px/49px Georgia, Serif; color: #27231F; text-align: center; }
#emails td.action { font: bold 11px/49px Helvetica, Arial, Sans-Serif; color:#999999; text-align: right; }

#emails #add { background: #E5E5E5; padding:20px; margin:20px 0px; }
#emails #add input { background:white; font-size:20px; font-weight: bold; padding:10px 13px 6px; height:24px; width:304px; }
#emails #add button { float:right; display:block; overflow:hidden; background: #9FC554; height:40px; width: 130px; font: bold 20px/40px Helvetica, Arial, Verdana, Sans-Serif; color: white; text-align:center; border:none; padding:0px; margin:0px; cursor: pointer; }
#emails #add button:hover { background:#ED5933; }

#codeform { background: #E5E5E5; padding:20px; margin:20px 0px; }
#codeform input { background:white; font-size:17px; font-weight: bold; padding:13px 13px 6px; height:21px; width:304px; }
#codeform button { float:right; display:block; overflow:hidden; background: #9FC554; height:40px; width: 130px; font: bold 20px/40px Helvetica, Arial, Verdana, Sans-Serif; color: white; text-align:center; border:none; padding:0px; margin:0px; cursor: pointer; }
#codeform button:hover { background:#ED5933; }



/* FAQ :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#faq h2,
#faq h3 {
    font-family: Helvetica, Arial, Sans-Serif;
    font-weight: bold;
    color:#46A0CE;
    margin:30px 0px 15px 0px;
}

#faq h2 a, #faq h3 a { text-decoration: none; color:#46A0CE; }

.toc {
    margin:10px 0px 30px 0px;
    padding:0px;
}
.toc li {
    list-style:none;
    font-size: 14px;
    line-height: 20px;
}
.toc li a { text-decoration: none; color: #46A0CE; }
.toc li a:hover { text-decoration: underline; color: #46A0CE; }

.toc li.sub1 { padding-left: 20px; }
.toc li.sub2 { padding-left: 40px; }


/* STEPS :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.step {
    background: #E5E5E5;
    padding:10px; margin-bottom:2px;
}

.step .header { padding:10px 0px; }

.step .header .number { 
    width:50px; height:50px;
    overflow:hidden;
    font: bold 50px/50px Helvetica, Arial, Sans-Serif;
    color:white;
    float:left;
    text-align:center;
    margin-right: 10px;
}

.step .header .title {
    font: 16px/22px Georgia, Serif;
    color: #27231F;
}

.step .header .hint {
    font: 13px/22px Georgia, Serif;
    color: #999999;
}

.step.selected { background: #46A0CE; }
.step.selected .header .number { color:white; }
.step.selected .header .title { color: white; }
.step.selected .header .hint { color: #27231F; }

.step fieldset {
    margin:0px 0px 2px 0px;
    padding:0px;
    border:none; border: 0px;
    background: white;
    padding:20px;
    color: #27231F;
}

.step fieldset h2 {
    margin:0px; padding:0px;
    font: italic 21px/30px Georgia, Serif;
    color: #27231F;
}

.step fieldset .info {
    margin:0px; padding:0px;
    font: italic 13px/18px Georgia, Serif;
    color: #999999;
}



/* PAGING ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.paging { margin: 20px 0px 0px 0px; position: relative; }
.paging a { float:left; border:1px solid; background:#E5E5E5; color: white; padding: 7px 10px 4px 10px; font: bold 18px Helvetica, Arial, Sans-Serif; text-decoration: none; }
.paging a:hover { background: #ED5933; }
.paging a.selected { background: #ED5933; }
.paging a.spacer { background:white; border:none; color:#E5E5E5; }
.paging a.spacer:hover { background:white; }
.paging .prev { position:absolute; right: 77px; }
.paging .prev { width:55px; overflow:hidden; text-align:center;}
.paging .next { float:right; width:55px; overflow:hidden; text-align:center;}


/* ROOST TEMPLATES :::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

body#templates .template { margin:10px 0px; }
body#templates .template .title {
    padding:10px;
    font: 21px/30px Georgia, Serif;
    background: #e5e5e5;
}

body#templates .template .title a {
    font: bold 13px/30px Helvetica, Arial, Sans-Serif;
    float:right;
}

body#templates .template .title a.edit { padding-left: 10px;}

body#templates .template { width:520px; overflow: hidden; }
body#templates .template .variations { margin:10px 0px; width:540px; }
body#templates .template .variations .variation {
    width: 250px;
    margin:0px 20px 10px 0px;
    float: left;
}
body#templates .template .variations .variation .swatch { float:left; padding:10px; margin-right:10px; background: #e5e5e5; }
body#templates .template .variations .variation .name { padding:10px 0px; font-size: 14px; }