/* Layout */

#invite-text.site-up, h2.site-down
{
    padding-top: 1em;   /* instead of margin-top since that breaks edges */
    margin-bottom: 1em;
}

h2.site-down
{
    margin-bottom: 0.5em;
}

.site-down
{
    margin: 0.5em 0em;
}

h2.site-down
{
    /** TEMP HACK sliding text down just because page is fixed height... */
    padding-top: 8em;
}

#url-textbox
{
    float: left;
    width: 562px;
}

div#url-textbox input
{
    /* if using div technique, also need to specify width of input */
    width: 550px;   /* 562px width of textbox minus 6px endpieces */
}

#create-button
{
    float: right;
    margin-left: 6px;
    margin-right: 2px;
}

#form-clear
{
    /** TEMP HACK hardcoded div in html just for clearing. */
    clear: both;
    height: 0px;
    zoom: 1;    /* TEMP HACK this is ie-only, should go in an ie-only stylesheet */
}

#error-text
{
    margin: 1em 0em;
}

#help-intro
{
    margin-top: 5em;
    padding-top: 10px;  /* for divider line background above */
}

ol#help
{
    margin: 1em 0em;
    zoom: 1;    /* TEMP HACK this is ie-only, should go in an ie-only stylesheet */
}

ol#help:after
{
    /** self-clearing since the li's are floated. */
    content: ".";
    clear: both;
    display: block;
    height: 0px;
    visibility: hidden;
}

ol#help li
{
    display: inline-block;
    float: left;
}

#help-outro
{
    clear: both;
    margin-bottom: 2em;
}


/* Text and general colors */

h2.site-down, p.site-up, #error-text
{
    font-size: 123.1%;  /* based on YUI Fonts CSS, translates to 16px... */
}

h2.site-down
{
    font-weight: bold;
}

#help-intro
{
    background: transparent url(../images/site/h-divider_dark.png) repeat-x scroll center top;
}


/* Help 3-step process */

ol#help li
{
    /** these are display inline-block and floated left; see above. */
    width: 217px;       /* the width of the background images */
    margin-left: 13px;  /* spacing between steps */
}

ol#help li:first-child
{
    margin-left: 0px;
}

ol#help li div.before
{
    height: 4px;    /* height of background image */
    background: transparent url(../images/site/stepBox_top.png) no-repeat scroll center bottom;
}

ol#help li div.after
{
    height: 5px;    /* height of background image */
    background: transparent url(../images/site/stepBox_btm.png) no-repeat scroll center top;
}

ol#help li div.during
{
    min-height: 4em;    /* TEMP HACK to make the li's the same height for common case */
    padding: 4px 8px;   /* to match the height of .before and .after */
    background: transparent url(../images/site/stepBox_mid.png) repeat-y scroll center center;
}

ol#help li div.during h2
{
    color: #888;
    font-size: 116%;    /* based on YUI Fonts CSS, translates to 15px... */
    font-style: italic;
    font-weight: bold;
    line-height: 16px;
    padding: 0em 20px 1em 26px;
    background: transparent none no-repeat scroll left top;
}

ol#help li div.during p
{
    color: #666;
    padding: 0em 20px 0em 26px;
}

ol#help li#step-1 div.during h2
{
    background-image: url(../images/site/stepNum_1.png);
}

ol#help li#step-2 div.during h2
{
    background-image: url(../images/site/stepNum_2.png);
}

ol#help li#step-3 div.during h2
{
    background-image: url(../images/site/stepNum_3.png);
}