/* HOSTBABY Redesign stylesheet
Visual Design - Stacy Bias (www.hostbaby.com)
Coding - Andrew Tay (www.andrewtay.com) February-March 2009

Updated June 2009: now includes additional code for alternate versions of site: Clubs & Studios. A class of
"clubs" or "studios" is applied to the "container" div in the HTML to distinguish between each site.

*/

/* --- GLOBAL PAGE SETTINGS --------------------------------------------------------------------------------- */

html, body, div {margin: 0; padding: 0}
img   {border: none;}

/* (mostly) firefox defaults, for other browsers' benefit */

body   {line-height: 1.5;}
dl  {line-height: 1.33;}

p, blockquote {margin: 1em 0;}
ul, ol   {margin: 1em 0 1em 40px; padding: 0;}
dl  {margin: 1em 0;}
h1  {margin: .67em 0;}
h2  {margin: .83em 0;}
h3  {margin: 1em 0;}

/* --- TEXT & LINK STYLING ---------------------------------------------------------------------------------- */

body {
    color: black;
    font-family: "Trebuchet MS", "Lucida Grande", sans-serif;
    font-size: 12.5px;
}

h1 {
    font: bold 21px "Trebuchet MS", "Lucida Grande", sans-serif;
    text-transform: uppercase;
    text-align: center;
}
h2 {
    font: bold 21px "Trebuchet MS", "Lucida Grande", sans-serif;
    margin-bottom: 0;
}
h3 {
    font: bold 18px "Trebuchet MS", "Lucida Grande", sans-serif;
    text-transform: uppercase;
}
p {
    line-height: 1.2;
}

a   {font-weight: bold; text-decoration: none;}
a:link {color: #0060B6;}
a:visited {color: #0060B6;}
a:hover {color: #fd6509; text-decoration: underline;}
a:active  {color: #0060B6;}

.res_Title {
    font-size: 14px;
    font-weight: bold;
}
.res_Text {
    display: inline-block;
    padding: 5px 0px 5px 5px;
}
.res_Url {
    font-style: italic;
    color: #006666;
}


/* --- PAGE LAYOUT - GENERAL -------------------------------------------------------------------------------- */

body {
    text-align: center;  /* page auto-centering for IE5win */
    background: white url("/images/bluegradient.gif") repeat-x;
}
#accessibility {
    position: absolute;
    left: -9999px;
}
#container {
}

/* HEADER & MAIN NAVIGATION */

#header {
    min-height: 45px;
    background: #00aeef url("/images/colorbars_blue_light.png") 0 100% repeat-x;
    position: relative;
    z-index: 50;  /* this allows the header to overlap the top point of the star logo */
}
/* check hostbaby-ie6.css for IE6 and IE5 hacks */

#headercontainer {
    width: 960px;
    margin: 0 auto;
}

a#trial {
    float: left;
    width: 100px;
    height: 28px;
    margin-top: 3px;
    padding-top: 1px;
    text-indent: 4px;
    color: white;
    line-height: 28px;
    /* background: url("/images/freetrialbutton-sprite.png") 0 0 no-repeat;  */
}
a#trial:link  {color: #222; background-position: top left;}
a#trial:visited  {color: #222; background-position: top left;}
a#trial:hover  {color: black; background-position: bottom left;}
a#trial:active {color: black; background-position: bottom left;}

/* check hostbaby-ie6.css for IE6 and IE5 hacks */

#mainnav {
    color: #e5f1f5;
    font: bold 17px "Trebuchet MS", "Lucida Grande", sans-serif;
    line-height: 36px;
    text-align: left;
    margin-right: -5px;
}
#mainnav ul {
    margin: 0;
}
#mainnav ul li {
    display: inline;
}

#mainnav li a {
    padding: 0 5px;
    text-transform: uppercase;
}
#mainnav li a:link {color: #e5f1f5;}
#mainnav li a:visited {color: #e5f1f5;}
#mainnav li a:hover {color: #e5f1f5; text-decoration: underline;}
#mainnav li a:active  {color: #e5f1f5;}

/* highlight current page */
.home #mnavhome a, .pricing #mnavpricing a, .features #mnavfeatures a,
.members #mnavmembers a, .help #mnavhelp a, .signup #signup a {
    /* color: #bababa !important; */
    /* text-decoration: none !important; */
}

/* CONTENT */

#content {
}
#contentcontainer {
    position: relative;		/* this is needed so that the #logolink and #logo can use position: absolute; */
    width: 960px;
    margin: 0 auto;
    text-align: left;
}

/* In order to place the logo img behind the #header and #contenthead, and yet still have it clickable (to take
 you back to home), it was necessary to make them siblings along with #contenthead (normally, you would make
 the img a child of the link). Basically, this allows z-index to work. */

a#logolink, img#logo {
    position: absolute;
    width: 162px;
    height: 152px;
    top: -3px;
    left: 5px;
}
#logolink {
    background: url("fakeurl"); /* this forces IE and Opera to create the link correctly */
    z-index: 200;
}
#logo {
    z-index: 0;
}

#contenthead {
    margin: 0 25px 23px 25px;
    min-height: 130px;
    padding-top: 6px;
    border-bottom: 2px solid #00aeef;
    position: relative;  /* this is needed so that it can appear above the star logo */
    z-index: 70;
}
/* check hostbaby-ie6.css for IE6 and IE5 hacks */
#contenthead #headblurb { text-align:center; padding-top:6px; font-size: 20px; font-weight: normal; }

#overview {
    position: relative;  /* this is needed to position rounded corners */
    /*width: 564px;    IE6 needs this to trigger hasLayout for rounded corners. bad ie! */
    width: 734px;
    margin: 0 0 0 166px;
    padding: 14px 10px 0 10px;
    background-color: #c7edf9;
}
#overview h1 {
    margin: 0;
    border-bottom: 2px solid #00aeef;
    padding-bottom: 6px;
    width: 100%;  /* this gives hasLayout to IE, which it needs to render it properly */
}
#overview p {
    margin-bottom: 0.5em;
}

#contentbody {
    padding: 0 25px 20px 25px;
}


/* CLEVER FOOTER POSITIONING CODE */

/* these lines keep the footer at bottom of screen, but automatically return it to the normal flow if the
  necessary for scrolling. Based on http://www.alistapart.com/articles/footers */

html, body {
    height: 100%;
}
#container {
    position: relative;
    min-height: 100%;
}

#content {
    padding-bottom: 80px;  /* approx the height of the footer and secondnav */
}
#footer {
    position: absolute;
    bottom: 25px;   /* the height of the secondnav */
    left: 0;
    width: 100%;
}
#secondnav {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: white;
}

/* FOOTER */

#footer {
    clear: both;
    min-height: 55px;
    min-width: 960px;
    background: #ff6014 url("/images/colorbars_orange_light.png") 0 0 repeat-x;
}
/* check hostbaby-ie6.css for IE6 and IE5 hacks */

#footercontainer {
    position: relative;
    width: 960px;
    margin: 0 auto;
    padding-top: 10px;
    text-align: left;
}

.footerright {
    position: absolute; 		/* was originally float: left, but in IE6, it interfered with the slider floats */
    top: 10px;
    left: 450px;
    width: 500px;
}

.footerleft {
    position: absolute; 		/* was originally float: left, but in IE6, it interfered with the slider floats */
    top: 10px;
    left: 0;
    width: 450px;
}

/* SECOND NAVIGATION */

#secondnav {
    height: 25px;
    color: #00a0c6;
    font: bold 12px "Trebuchet MS", "Lucida Grande", sans-serif;
    line-height: 24px;
}
#secondnav ul {
    margin: 0;
    padding-top: 1px;
    list-style: none;
}

#secondnav ul li {
    display: inline;
    margin: 0;
}
#secondnav ul li#snavcopy {
    color: black;
    padding: 0 10px;
}

#secondnav li a {
    padding: 0 10px;
    text-transform: uppercase;
}
#secondnav li a:link {color: #00a0c6;}
#secondnav li a:visited  {color: #00a0c6;}
#secondnav li a:hover {color: #ff6014; text-decoration: underline;}
#secondnav li a:active  {color: #00a0c6;}

/* highlight current page */
.home #snavhome a,
.pricing #snavpricing a,
.features #snavfeatures a,
.members #snavmembers a,
.help #snavhelp a,
.signup #snavsignup a {
    color: #c13e1b !important;
    text-decoration: none !important;
}



/* --- COMMON GRAPHIC ELEMENTS ------------------------------------------------------------------------------ */

/* BUTTONS */

.buttons {
    display: block;
    font: bold 12px "Trebuchet MS", "Lucida Grande", sans-serif;
    text-align: center;
    text-transform: uppercase;  /* for form buttons, safari ignores this so it must be uppercase in the html */
    text-decoration: none !important;
}

/* ROUNDED CORNERS */

/* A different, float-based technique is used for IE6, which has trouble with this one due to rounding
  errors. The IE6 version is hand-tweaked using negative margins. See hostbaby-ie6.css. */

.corners {
    background-repeat: no-repeat;
    position: absolute;
    font-size: 0px;
}
.nw {top: 0; left: 0;  background-position: top left;}
.ne {top: 0;  right: 0; background-position: top right;}
.sw {bottom: 0; left: 0;  background-position: bottom left;}
.se {bottom: 0; right: 0; background-position: bottom right;}

#overview .corners {
    background-image: url("/images/overviewcorners.gif");
    height: 14px;
    width: 14px;
}

.help dl#address .corners {
    background-image: url("/images/helpcorners.gif");
    height: 14px;
    width: 14px;
}

.signup .moreinfo .corners {
    background-image: url("/images/signupcorners.gif");
    height: 12px;
    width: 12px;
}

/* check hostbaby-ie6.css for IE6 and IE5 hacks */


/* FANCY BUBBLE TOOLTIPS */

/* These are driven by tooltip.js, a jquery-based custom script. When js is disabled, they degrade to
  regular tooltips. */

#tooltip {
    position: absolute;
    display: none;
    width: 200px;
    z-index: 500;
}
#tooltip p {
    margin: 0;
    padding: 0 13px;
    color: #333;
    font: bold 11px Arial, Helvetica, sans-serif;
    line-height: 1.5;
    text-align: left;
    background: #f7f1b2;
}
#tooltip .tiptop, #tooltip .tipbottom {
    display: block;
    background: url("/images/tooltip-sprite.gif") top left no-repeat;
    font-size: 1px; /* keeps IE6 from expanding box vertically */
}
#tooltip .tiptop {
    height: 10px;
}
#tooltip .tipbottom {
    height: 25px;
    background-position: bottom left;
}

/* Jerome - added to hold a/b test region */
#coverflow {
    position: relative;
    width: 550px;
    height: 225px;
    padding-top: 25px;
    text-align: center;
}

/* CODA SLIDERS */

/* These are driven by codaslider-hostbaby.js, a jquery-based custom script. When js is disabled, they
  degrade to ordinary divs with scrollbars. */

/* --- basic layout --- */

#testimonials {
    position: relative;
    width: 420px;
    margin-left: 330px;
    padding-top: 15px;
}
#featuredsites {
    position: relative;
    width: 320px;
    height: 225px;
}
#hometestimonials {
    position: relative;
    width: 440px;
    margin-left: 220px;
    padding-top: 15px;
    /* background-color: #FF6014; */
}

/* --- text styling --- */

#testimonials, #hometestimonials {
    font: 12px "Trebuchet MS", "Lucida Grande", sans-serif;
}
#testimonials blockquote, #hometestimonials blockquote {
    font-style: italic;
    text-align: left;
}
#testimonials blockquote, #hometestimonials blockquote {
    margin: 0 18px;
    padding: 3px 0 0 0;
}

#testimonials .caption {
    color: white;
    font-size: 10px;
    text-align: right;
}
#testimonials .caption a {color: white !important;}
#testimonials .caption {
    margin: 0 18px;
    padding: 0;
}
#hometestimonials .caption {
    font-size: 10px;
    text-align: right;
}
#hometestimonials .caption {
    margin: 0 18px;
    padding: 0;
}

.home #featuredsites {
}
.home #featuredsites h3 {
    color: #8c8c8c;
    font-size: 18px;
    margin: 0;
}

/* --- while loading... --- */

.csw {
    width: 100%;
    overflow: auto;  /* NEW!! This was set to scroll before. Very minor improvement when js is off */
}
#testimonials .csw  {height: 95px;}
#hometestimonials .csw  {height: 125px;}
#featuredsites .csw  {height: 200px;}

.csw .loading {
    text-align: center
}

/* --- viewing window --- */

.stripViewer {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    /* clear: both; This isn't necessary, and it limits layout possibilities by interfering w/ floats */
}
#testimonials .stripViewer {
    width: 330px;   /* Also specified in .stripViewer .panelContainer .panel below */
    height: 95px;
    border-left: 1px solid #ffbf00;
    border-right: 1px solid #ffbf00;
}
#featuredsites .stripViewer {
    width: 320px;   /* Also specified in .stripViewer .panelContainer .panel below */
    height: 200px;
    position: absolute;
    bottom: 0;
    left: 0;
}
#hometestimonials .stripViewer {
    width: 350px;   /* Also specified in .stripViewer .panelContainer .panel below */
    height: 125px;
    border-left: 1px solid #ffbf00;
    border-right: 1px solid #ffbf00;
}

/* --- the big long container used to house the div panels --- */

.stripViewer .panelContainer {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;/* width is recalculated and specified by the javascript  */
    list-style-type: none;
}

/* --- panels are arranged side-by-side --- */

.stripViewer .panelContainer .panel {
    position: relative;
    float: left;
    height: 100%;  /* doesn't seem to do anything, but we'll leave it in */
}
#testimonials .stripViewer .panelContainer .panel {
    width: 330px;  /* also specified in .stripViewer above */
    height: 95px; /* optional, but seems like a good idea */
}
#featuredsites .stripViewer .panelContainer .panel {
    width: 320px;   /* also specified in .stripViewer above */
    height: 200px;  /* optional, but seems like a good idea */
}
#hometestimonials .stripViewer .panelContainer .panel {
    width: 360px;  /* also specified in .stripViewer above */
    height: 125px; /* optional, but seems like a good idea */
}

/* ... Coda Slider Controls (generated at runtime) .......................................................... */

/* --- left and right arrows --- */

#testimonials .stripNavL {
    position: absolute;
    top: 38px;
    left: 0;
    background: url("/images/testbuttonleft.gif") no-repeat center;
}
#testimonials .stripNavR {
    position: absolute;
    top: 38px;
    right: 0;
    background: url("/images/testbuttonright.gif") no-repeat center;
}
#hometestimonials .stripNavL {
    position: absolute;
    top: 55px;
    left: 0;
    background: url("/images/testimonials_button_left.png") no-repeat center;
}
#hometestimonials .stripNavR {
    position: absolute;
    top: 55px;
    right: 0;
    background: url("/images/testimonials_button_right.png") no-repeat center;
}
#testimonials .stripNavL a, #testimonials .stripNavR a, #hometestimonials .stripNavL a, #hometestimonials .stripNavR a {
    display: block;
    width: 40px;
    height: 40px;
}
#featuredsites .stripNavL, #featuredsites .stripNavR {
    display: none;
}

/* --- ul list of links --- */

#testimonials .stripNav {
    display: none;
}

#hometestimonials .stripNav {
    display: none;
}

#featuredsites .stripNav {
    position: absolute;
    display: block;
    bottom: -2px;
    left: 340px;
    margin: 0;
    padding: 0;
}
#featuredsites .stripNav ul {
    margin: 0;
    list-style: none;
}


/* --- social networkin links in the footer --- */

#social {
    width: 500px;
    height: 28px;
    /*margin-top: 10px;*/
    margin-top: 0px;
    margin-bottom: 7px;
    padding-top: 5px;
    line-height: 28px;
}

#followus {
    /* may not exist anymore, so commenting to check
    margin-top: 0px;*/
}

#socialblurb {
    display: inline-block;
    height: 55px;
    vertical-align: middle;     
    color: white;
    font-weight: bold;
}

#forums {
    display: inline-block;
    width: 135px;
    color: white;
    font-size: 10px;
    line-height: 12px;
}

a#forumbutton {
    float: right;
    width: 105px;
    height: 28px;
    margin-top: 5px;
    margin-right: 20px;
    padding-top: 1px;
    text-indent: 4px;
    line-height: 28px;
    background: url("/images/forumsbutton-sprite.png") 0 0 no-repeat;
}
a#forumbutton:link  {color: #222; background-position: top left;}
a#forumbutton:visited  {color: #222; background-position: top left;}
a#forumbutton:hover  {color: black; background-position: bottom left;}
a#forumbutton:active {color: black; background-position: bottom left;}

#blog {
    display: inline-block;
    width: 135px;
    color: white;
    font-size: 10px;
    line-height: 12px;
}

a#blogbutton {
    float: right;
    width: 105px;
    height: 28px;
    margin-right: 20px;
    margin-top: 5px;
    padding-top: 1px;
    text-indent: 4px;
    line-height: 28px;
    background: url("/images/blogbutton-sprite.png") 0 0 no-repeat;
}
a#blogbutton:link  {color: #222; background-position: top left;}
a#blogbutton:visited  {color: #222; background-position: top left;}
a#blogbutton:hover  {color: black; background-position: bottom left;}
a#blogbutton:active {color: black; background-position: bottom left;}

#signin {
    display: inline-block;
    width: 135px;
    color: white;
    font-size: 10px;
    line-height: 28px;
}

a#signinbutton {
    float: right;
    width: 105px;
    height: 28px;
    margin-top: 5px;
    margin-right: 20px;
    padding-top: 1px;
    text-indent: 4px;
    line-height: 28px;
    background: url("/images/signinbutton-sprite.png") 0 0 no-repeat;
}
a#signinbutton:link  {color: #222; background-position: top left;}
a#signinbutton:visited  {color: #222; background-position: top left;}
a#signinbutton:hover  {color: black; background-position: bottom left;}
a#signinbutton:active {color: black; background-position: bottom left;}

/* IMPORTANT: The small Features Sites thumbnail images are specified as CSS background images in the <style> declaration at the top of the actual home.php file. The actual elements used are in the format: #featuredsites .stripNav li.tab[1, 2, 3...] a {...}. This was done so that they would be in the same file as the big preview images, which are inline images using the <img> tag. */

#featuredsites .stripNav li a {
    display: block;
    width: 110px;
    height: 66px;
    border: 2px solid transparent;
    margin-top: 7px;
}
/* check hostbaby-ie6.css for IE6 and IE5 hacks */

#featuredsites .stripNav li a.current {
    border: 2px solid orange;
}
#featuredsites .stripNav li a:hover {
    border: 2px solid #f85023;
}


/* NOSCRIPT */

/* NEW!! Before, there wasn't a #safenoscript div and these styles were applied to the actual noscript tag.
 Worked fine in all browsers incl. Opera 9, but it triggered a bug (actually a design flaw in Opera 9.5+. This
 workaround solves it. */

#safenoscript {  /* can't use borders or padding because in some browsers, they'll always appear */
                 display: block;
                 position: relative;
                 width: 100%;
                 color: #333;
                 background-color: #ffffe1;
                 z-index: 400;  /* needed to position higher than sidebar background */
}
noscript {
}
noscript p {
    margin: 0;
    padding: 4px 10px;
    font: normal 11px Arial, Helvetica, sans-serif !important;
    text-align: left !important;
}



/* --- PAGE LAYOUT - PAGE SPECIFIC -------------------------------------------------------------------------- */

/* HOME */

.home a#logolink, .home img#logo {
    position: absolute;
    width: 260px;
    height: 238px;
    left: -5px;
    top: -9px;
}

.home #contenthead {
    min-height: 215px;
    padding-bottom: 10px;
    margin-bottom: 4px;
}
/* check hostbaby-ie6.css for IE6 and IE5 hacks */

.home #overview {
    width: 505px; /* IE6 & IE7 need this to trigger hasLayout. otherwise, we'd leave it out */
    margin: 0 -10px 0 255px;
    padding: 11px 0 0 0;
    font-size: 13px;
    background: none;
}

/* Special fancy code makes sure the floats are cleared. See
  http://www.positioniseverything.net/easyclearing.html */
.home #overview:after,.home #overviewtour:after,.home #social:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.home #overview h1 {
    margin: 0;
    border: none;
    padding-bottom: 6px;
    text-align: left;
}

.home #overviewtour {
    position: absolute; 		/* was originally float: left, but in IE6, it interfered with the slider floats */
    top: 55px;
    left: 0;
    width: 215px;
}

.home a#wizardtour {
    position: absolute;
    top: 5em;
    left: 8px;
    width: 184px;
    height: 31px;
    padding-top: 10px;
    margin: 0 auto;
    font-size: 20px;
    text-indent: -27px;
    line-height: 1.3;
    letter-spacing: -0.5px;
    background: url("/images/wizardtourbutton-sprite.png") 0 0 no-repeat;
}
.home a#wizardtour:link {color: #909426; background-position: top left;}
.home a#wizardtour:visited  {color: #909426; background-position: top left;}
.home a#wizardtour:hover {color: #6f721d; background-position: center left;}
.home a#wizardtour:active  {color: white; background-position: bottom left;}

/* check hostbaby-ie6.css for IE6 and IE5 hacks */


.home #overviewmembers {
    position: relative;  /* provides a reference for the button */
    float: right;
    width: 265px;
    height: 140px;
    padding-left: 18px;
    padding-top: 10px;
    border-left: 2px solid #00aeef;
}
.home input#login {
    position: absolute;
    top: 5em;
    left: 27px;
    width: 184px;
    height: 41px;
    padding: 3px 24px 0 0; /* these help centering. strangely, uses wrong box model in all browsers. */
    border: none;
    background: url("/images/loginbutton-sprite.png") 0 0 no-repeat;
    color: #aa3617;
    font-size: 20px;
}
.home input#login:hover {color: #8d2e14; background-position: center left;}

/* check hostbaby-ie6.css for IE6 and IE5 hacks */

.home h1 {
    font-size: 35px;
}
.home h2#headline {
    margin: 0;
    font-size: 48px;
    letter-spacing: -1px;
    text-transform: uppercase;
    text-align: center;
}

.home dl#homefeatureslist {
    float: right;
    width: 325px;
    padding-left: 18px;
    border-left: 2px solid #8c8c8c;
    font-weight: bold;
}
.home #homefeatureslist dt {
    font-size: 19px;
}
.home #homefeatureslist dd {
    font-size: 11px;
    margin-left: 0;
    margin-bottom: 1em;
}

.home dl#featureslist {
    float: right;
    width: 255px;
    padding-left: 18px;
    border-left: 2px solid #8c8c8c;
    font-weight: bold;
}
.home #featureslist dt {
    font-size: 19px;
}
.home #featureslist dd {
    font-size: 11px;
    margin-left: 0;
    margin-bottom: 1em;
}

/* PRICING */

.pricing #contentbody {
    margin-top: -15px;  /* shifts #contentbody up */
    padding-top: 15px;
    min-height: 300px;
    /*background: url("/images/pricingstars-opaque.gif") 50% 0 no-repeat;*/
}
/* check hostbaby-ie6.css for IE6 and IE5 hacks */

.pricing .perks {
    float: left;
    width: 250px;
    padding-right: 93px;
    margin-bottom: 40px;
}
.pricing .perkslast {
    width: 220px;
    padding-right: 0;
}
/* check hostbaby-ie6.css for IE6 and IE5 hacks */

.pricing .perks h3 {
    letter-spacing: -1px;
    margin: 0 0 0.5em 0;
}
.pricing .perks ul {
    margin: 0;
    padding-left: 0;
    font: normal 12px "arial black", impact, sans-serif;
    background: url("/images/perks-30percent.png");
}
/* check hostbaby-ie6.css for IE6 and IE5 hacks */

.pricing .perks ul li {
    display: block;
    padding: 3px 0 3px 25px;
    line-height: 21px;
    list-style: none;
    background: url("/images/littlestar.gif") 0 3px no-repeat;
}
.pricing .perks a {
    font-weight: normal !important;
}
.pricing .perks a:link  {color: #0060B6;}
.pricing .perks a:visited  {color: #0060B6;}
.pricing .perks a:hover {color: #ef5e45; text-decoration: underline;}
.pricing .perks a:active  {color: #0060B6;}

.pricing .perks a strong {
    font-weight: normal !important;
}
.pricing .perks a:link strong {color: #c13e1b;}
.pricing .perks a:visited strong  {color: #c13e1b;}
.pricing .perks a:hover strong {color: #ef5e45; text-decoration: underline;}
.pricing .perks a:active strong  {color: #c13e1b;}

.pricing a#startfreetrial {
    clear: both;
    width: 244px;
    height: 36px;
    padding-top: 14px;
    margin: 0 auto;
    font: normal 21px "Trebuchet MS", "Lucida Grande", sans-serif;
    text-indent: -25px;
    line-height: 1.3; /* forces consistency in Safari, though other browsers don't need it */
    letter-spacing: -1px;
    background: url("/images/startfreetrialbutton-sprite.png") 0 0 no-repeat;
}
.pricing a#startfreetrial:link {color: #c13e1b; background-position: top left;}
.pricing a#startfreetrial:visited {color: #c13e1b; background-position: top left;}
.pricing a#startfreetrial:hover {color: #aa3617; background-position: center left;}
.pricing a#startfreetrial:active  {color: #c13e1b; background-position: bottom left;}

/* check hostbaby-ie6.css for IE6 and IE5 hacks */

.pricing #contentbody p#takethetour {
    margin: 0.5em 0 0 0;
    padding-bottom: 8px;
    font: normal 12px "arial black", impact, sans-serif;
    text-align: center;
}
.pricing #contentbody p a {
    font-weight: normal !important;
}
.pricing #contentbody p a:link {color: #0060b6;}
.pricing #contentbody p a:visited {color: #0060b6;}
.pricing #contentbody p a:hover {color: #ef5e45; text-decoration: underline;}
.pricing #contentbody p a:active  {color: #0060b6;}

/* FEATURES & MEMBERS */

#submenu {
    float: left;
    width: 208px;
    margin-left: 25px;
    font: normal 14px "arial black", impact, sans-serif;
    display: inline; /* prevents IE5/6 doubled margin float bug */
}
#submenu ul {
    margin: 0;
}
#submenu ul li {
    padding-left: 25px;
    list-style: none;
    background: url("/images/littlestar.gif") 0 2px no-repeat;
}
#submenu li a {
    display: block;
    width: 100%;
    padding: 2px 0 2px 5px;
    line-height: 21px;
    border-bottom: 1px solid #b5dce5;
    font-weight: normal !important;
    text-decoration: none;
}
#submenu li a:link {color: #0060b6;}
#submenu li a:visited {color: #0060b6;}
#submenu li a:hover {color: #ef5e45;}  /* you can use !important to override current link color */
#submenu li a:active  {color: #0060b6;}

#subsubmenu li { font-size: 0.9em; }

#subsubtoc li { font-size: 0.85em; }
#subsubtoc li a { color: black; }
#xsubsubtoc li a .active { color: #c0561c; }

/* IMPORTANT: These highlight the current page in the submenu. Full instructions are in
 commonfeaturessubmenu.php and commonmemberssubmenu.php */

/* Highlight Current Page */
#fwizard #subwizard a,
#ftemplates #subtemplates a,
#flistbaby #sublistbaby a,
#femail #subemail a,
#fstreamaudio #substreamaudio a,
#fsellmerch #subsellmerch a,
#feventcal #subeventcal a,
#fnewsblog #subnewsblog a,
#fadvanced #subadvanced a,
#fservers #subservers a,
#fsupport #subsupport a {
    color: #c13e1b;
}

/* Highlight Current Page */
#mmain #submain a,
#mmanual #submanual a,
#medit #subedit a,
#mbilling #subbilling a,
#mpay #subpay a,
#mtools #subtools a,
#mlogout #sublogout a {
    color: #c13e1b;
}

#mtconcertcalendar #subsubconcertcalendar a,
#mtemailform #subsubemailform a,
#mtguestbook #subsubguestbook a,
#mtnews #subsubnews a,
#mtlistbaby #subsublistbaby a {
    color: #c0561c;
}

#mmain h4 { margin: 0; }
#mmain #autopayopts { padding: 8px; margin: 5px; width:385px; background-color: #9fdddd; }
#mpay #domaininfo td,th { padding: 0 10px 0 10px; }

.features #contentbody, .members #contentbody {
    margin: 0 0 25px 255px;
    border-left: 2px solid #b5dce5;
    padding: 0 0 0 18px;
    width: 650px;  /* needed for layout, and IE6 needs it to cure 3px text jog by giving hasLayout */
}
/* check hostbaby-ie6.css for IE6 and IE5 hacks */

.features #contentbody h2, .members #contentbody h2 {
    margin-top: 0; /* IE6 and IE7 need this because the won't collapse margin-top like they should */
}


/* HELP */

.help .questions {
    float: left;
    width: 250px;
    margin-bottom: 20px;
}
.help .questions h3 {
    letter-spacing: -1px;
    margin: 0 0 0.5em 0;
}
.help .questions ul {
    margin: 0;
    padding-left: 22px;
    border-left: 1px solid #c9eefa;
}
.help .questions ul li {
    display: block;
    padding: 1px 0 1px 18px;
    line-height: 16px;
    list-style: none;
    background: url("/images/ministar.gif") 0 2px no-repeat;
}
.help .questions a:link {color: #0060b6;}
.help .questions a:visited  {color: #0060b6;}
.help .questions a:hover {color: #ef5e45; text-decoration: underline;}
.help .questions a:active  {color: #0060b6;}

.help .questions p {
    text-align: right;
    margin-top: 0.5em;
    padding-right: 40px;
}

.help #contact {
    clear: both;
    width: 720px; /* this gives hasLayout. without it, IE won't force this div to expand around floats */
    margin: 0 0 10px 0;
    padding: 10px 15px;
    background-color: #c9eefa;
}
/* check hostbaby-ie6.css for IE6 and IE5 hacks */

/* Special fancy code makes sure the floats are cleared. See
  http://www.positioniseverything.net/easyclearing.html */
.help #contact:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.help #hours {
    clear: both;
}

.help #staff {
    float: left;
}
.help #staff h4, .help #hours h4 {
    margin: 0;
    font: normal 14px "arial black", impact, sans-serif;
}
.help #staff dl {
    float: left;
    width: 220px;
    margin: 0.5em -20px 0.5em 25px;  /* negative margin-right reduces the gap between the two columns */
    display: inline;   /* this prevents the IE6 doubled float margin bug */
}
.help #staff dt {
    float: left;   /* this allows dt and dd to be on the same line */
    min-height: 14px;
    margin-top: -1px;  /* this corrects a 1px offset between the dt and the dd */
    margin-bottom: -5px;   /* this prevents the floats from "stair-stepping" in IE6 */
    font: normal 11px "arial black", impact, sans-serif;
    padding-right: 0.5em;
}
.help #staff dd {
    min-height: 14px;
    margin-left: 30px;   /* this acts like a hanging indent if it spills onto a 2nd line */
    font: normal 11px arial, helvetica, sans-serif;
}
/* check hostbaby-ie6.css for IE6 and IE5 hacks */

.help dl#address {
    position: relative;  /* this is needed to position rounded corners */
    float: right;
    width: 220px;
    margin: 0;
    padding: 10px 10px 5px 10px;
    background-color: white;
    line-height: 1.1;
}
/* check hostbaby-ie6.css for IE6 and IE5 hacks */

.help dl#address dd {
    margin: 0;
    color: #c13e1b;
    font: normal 16px "arial black", impact, sans-serif;
}
.help dl#address dd#email {
    margin-bottom: 0.4em;
}
.help dl#address dd#phone {
    font-size: 21px;
}
.help dl#address a {
    font-weight: normal !important;
}
.help dl#address a:link {color: #c13e1b;}
.help dl#address a:visited  {color: #c13e1b;}
.help dl#address a:hover {color: #ff6014; text-decoration: underline;}
.help dl#address a:active  {color: #c13e1b;}


/* SIGNUP */

.signup #sidebarbackground {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* necessary for large fixed height on child div */
}
.signup #sidebarbackground div {
    margin: 0 auto;
/*    width: 800px;*/
    width: 960px;
    height: 9999px; /* height: 100% makes more sense, but Safari can't handle it for some reason */
    background: url("/images/sidebarbg-tall.gif") 2px 300px no-repeat;
}

.signup #contentcontainer {
    background: url("/images/sidebarbg-tall.gif") 2px 160px no-repeat; /* this is the blue sidebar bg */
}
/* Special fancy code makes sure the floated sidebar is cleared. See
  http://www.positioniseverything.net/easyclearing.html */
.signup #contentcontainer:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.signup #contenthead {
    margin-bottom: -85px;  /* pulls #content up close to h1, while still allowing overlap */
    border: none;
}
.signup #overview {
    padding-top: 7px;
    height: 105px;  /* though there's no <p>, we need the height for the background image */
}
.signup #overview h1 {
    font-size: 33px;
    text-transform: none;
    line-height: 1;
    height: 34px;
}

.signup #contentbody {
    position: relative;
    z-index: 90; /* forces this to overlap #contenthead */
    padding-left: 210px;
    padding-top: 1px;  /* prevents margin collapsing, forcing consistency between ie6 and other browsers */
}
/* check hostbaby-ie6.css for IE6 and IE5 hacks */

.signup #sidebar {
    position: relative;
    z-index: 100;   /* position this above #contentbody, in case there are links in sidebar */
    float: left;
    width: 170px;
    margin-left: 2px;
    padding: 135px 11px 0 11px;
    display: inline;  /* prevents IE6 doubled margin float bug */
}
/* check hostbaby-ie6.css for IE6 and IE5 hacks */

.signup .moreinfo {
    position: relative;   /* this is needed for positioning rounded courners */
    width: 146px;  /* gives hasLayout for IE6--even number width avoids IE6 rounding error */
    padding: 10px 12px;
    margin-bottom: 30px;
    font: normal 14px "arial black", impact, sans-serif;
    background: #e4f7fd;
}
/* check hostbaby-ie6.css for IE6 and IE5 hacks */

.signup .moreinfo strong {
    color: #c13e1b;
    font-weight: normal !important;
}
.signup .moreinfo dl {
    margin: 0;
}
.signup .moreinfo dd {
    color: #0060b6;
    margin-left: 12px;
}
.signup .moreinfo h4 {
    margin: 0;
    font-size: 12px;
    font-weight: normal;
}
.signup .moreinfo p {
    margin: 0;
    color: #0060b6;
    text-align: center;
}

.signup .highlight { color: #c13e1b; padding-bottom: 10px; }
.signup .cdbaby { background-color: #b7ddd9; }

/*Search Page*/
#cse-search-results {
    min-height: 100px;
}



#next, #previous { font-size: 1.5em; font-weight: bold; margin-bottom: 40px; }

/* CLUBS and STUDIOS SITES */
.studios #header {background-color: #047391;}
.clubs #footer, .studios #footer {background-color: #c13e1b;}
.home .clubs a#logolink, .home .clubs img#logo,.home .studios a#logolink, .home .studios img#logo {width: 251px;height: 215px;top: -27px;}
.home .clubs a#logolink, .home .clubs img#logo  {left: 60px;}
.home .studios a#logolink, .home .studios img#logo  {left: 10px;}
.home .clubs #overview,.home .studios #overview {background: pink !important;width: 750px;margin: 0;}
.home .clubs #overview h1,.home .studios #overview h1 {background-color: yellow !important;padding-top: 160px;height: 0;overflow: hidden;width: auto;}
.home .clubs #overview h1 {margin-left: 290px;background: url("/images/graphicheader-clubs.gif") left no-repeat;}
.home .studios #overview h1 {margin-left: 245px;background: url("/images/graphicheader-studios.gif") left no-repeat;}
.home .clubs #overviewtour,.home .studios #overviewtour {background: green !important;position: relative;float: none;width: 100%;margin: 10px 0 0.5em 0;}
.home .clubs #overviewtour p,
.home .studios #overviewtour p {background: red !important;margin: 0 215px 0 10px;  /* you can reduce margins to 0 180px 0 0 widen */}
.home .clubs a#wizardtour,
.home .studios a#wizardtour {left: auto; top: 0.1em;right: 10px; font-size: 18px;line-height: 1.4}
.home .clubs a#wizardtour {background-image: url("/images/clubstourbutton-sprite.png");}
.home .clubs a#wizardtour:link {color: #c13e1b;}
.home .clubs a#wizardtour:visited {color: #c13e1b;}
.home .clubs a#wizardtour:hover {color: #901513;}
.home .clubs a#wizardtour:active  {color: #4a0b0a;}
.home .studios a#wizardtour {background-image: url("/images/studiostourbutton-sprite.png");}
.home .studios a#wizardtour:link {color: #e5f1f5;}
.home .studios a#wizardtour:visited  {color: #e5f1f5;}
.home .studios a#wizardtour:hover {color: #f0fbff;}
.home .studios a#wizardtour:active  {color: white;}