@charset "utf-8";
/**
 * Main CSS
 * @copyright  2009 esaura, LLC.
 * @version    $Id: 2009-09-20 0002 $
 */

/* 
--------------------------------------------------
 IMPORT
--------------------------------------------------*/

/* Reset (Yahoo! UI Library)
------------------------------------------------- */
@import "libs.css";

/* Default / Common Style Settings
------------------------------------------------- */
@import "base.css";

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

/* Basic Structure
-------------------------------------------------
 html, body
 |--#header
 |      |--.section
 |--#navtop
 |--#content
 |      |--#main  (|--#side)
 |     (|--#bottom)
 |      |--a#toTop
 |--#footer
------------------------------------------------- */
html {
    background: #f1f0e6 url(http://static.esaura.cc/www020/css/img/bg_body_stripe.png) repeat top left; /* 2x2 */
}

body {
    width: 100%; /* full width */
    padding-top: 18px; /* 6:bg+12 */
    background: url(http://static.esaura.cc/www020/css/img/bg_body_top_colorstrip.png) repeat-x top left; /* 130x6 */
}

#header {
    width: 100%; /* full width */
    min-height: 120px; /* for bg */
    background: url(http://static.esaura.cc/www020/css/img/bg_header.png) no-repeat center top;  /* 1089x120 */
}
    #header div.section {
        width: 870px; /* 950-40x2 */
        margin: 0 auto 20px auto; /* bottom for min-height */
    }

#navtop {
    width: 926px; /* 962-18x2 */
    margin: 0 auto;
    padding: 0 18px 12px 18px; /* bottom for bg */
    background: url(http://static.esaura.cc/www020/css/img/bg_navtop.png) no-repeat -128px 100%; /* 962x12 */
}

#content,
#footer {
    width: 902px; /* 950-(6+18)x2 */
    margin: 0 auto;
    padding-left:  24px; /* 4:bg+6+18 */
    padding-right: 24px; /* 18+6+4:bg */
    border: 6px solid #f1f0e6; /* l-brown */
    border-top: none;
    background-color: white;
}
    #content {
        margin-bottom: 36px;
        padding-top: 6px; /* -12:bg+18 */
    }
    #footer {
        padding-top:    18px;
        padding-bottom: 18px;
    }
    #content #main,
    #content #side {
        margin-bottom: 48px;
    }
    #content #side {
        padding-top: 1.2em;
    }
    #content #bottom {
        clear: both; /* for #side */
        padding-top: 30px; /* 6:bg+24 */
        background: url(http://static.esaura.cc/www020/css/img/bg_body_top_colorstrip.png) repeat-x top left; /* 130x6 */
    }
    #content a#toTop {
        display: block;
        margin-left: -24px;  /* -> 950 width */
        margin-right: -24px; /* -> 950 width */
    }

/* Variation
------------------------------------------------- */
/* .my (2 columns) */
body.my #content #main { float: left;  width: 580px; }
body.my #content #side { float: right; width: 289px; }

/* 
--------------------------------------------------
 #header
--------------------------------------------------*/

/* Structure     
------------------------------------------------- */
/* #top */
#header a#top {
    position: absolute;
    top: -2em;
}

/* h1 */
#header h1 {
    float: left;
    width: 534px;
}
    #header h1 span {
        float: left;
        display: block;
        cursor: pointer;
        /* img replacement */
        height: 0;
        padding-top: 47px; /* for bg */
        overflow: hidden;
    }

    #header span#imgTagline {
        width: 268px;
        margin-right: 76px; /* 950/2-(36+268+190/2) */
        background: url(http://static.esaura.cc/www020/css/img/icons.png) no-repeat -190px 27px; /* 268x47 */
    }
    #header span#imgLogo {
        width: 190px;
        background: url(http://static.esaura.cc/www020/css/img/icons.png) no-repeat 0 0; /* 190x47 */
    }

/* ul#navGlobal */
#header ul#navGlobal {
    float: right;
    margin-top: 22px;
}
    #header ul#navGlobal li {
        display: inline;
        margin-left: 1em;
    }

/* span#username */
#header span#username {
    float: left;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* form#searchAll */
#header form#searchAll {
    float: right;
    width: 269px;
    padding-top: 6px; /* for bg */
    background: url(http://static.esaura.cc/www020/css/img/bg_search.png) no-repeat 0 0; /* top:269x6 */
}
    #header form#searchAll ul,
    #header form#searchAll ul li {
        height: 1.385em; /* 18px */
    }
    /* ul */
    #header form#searchAll ul {
        padding-bottom: 6px; /* for bg */
        background: url(http://static.esaura.cc/www020/css/img/bg_search.png) no-repeat 0 100%; /* bottom:269x6 */ 
    }
    #header form#searchAll ul li {
        background: url(http://static.esaura.cc/www020/css/img/bg_search.png) repeat-y -269px 0; /* body:269x1 */
    }
    /* input */
    #header form#searchAll input {
        border: none;
        background: none;
    }
    #header form#searchAll input.textSearch {
        margin-right:   12px;
        width:         165px;  /* 195-(6+24) */
        padding: 0 6px 0 24px; /* left 16+6+α */
        background: url(http://static.esaura.cc/www020/css/img/icons.png) no-repeat -144px -200px; /* magnify:16x16, x:-150+6 */
    }

    #header form#searchAll input.submit {
        width: 62px;
        padding: 0; /* resest default */
    }

/* 
--------------------------------------------------
 #navtop
--------------------------------------------------*/

/* Typography / Colors
------------------------------------------------- */
#navtop dl#navBrowse dd#tabQuestions a,
#navtop dl#navMy     dd#tabMyPage  a,
#navtop dl#navMenu   dd#tabUpload  a { letter-spacing: 0.08em; /* ++-> 2 lines */ }
#navtop dl.Tab       dt   { font-size: 108%; /* 14px */   }
#navtop dl.Tab       dd a { color: #554738;  /* brown */  }
#navtop dl#navBrowse dt   { color: #f08300;  /* orange */ } 
#navtop dl#navMy     dt   { color: #5779bc;  /* blue */   }
#navtop dl#navMenu   dd a { color: #5779bc;  /* blue */
                            font-size: 116%; /* 15px */   }


/* Structure
------------------------------------------------- */
/* dl (common) */
#navtop dl {
    padding-top: 6px; /* for bg */
}
    #navtop dl dd a {
        display: block;
        margin-top: -6px; /* -> full height */
        padding-top: 12px;
        padding-bottom: 8px;
        text-align: center;
    }
    #navtop dl,
    #navtop dl dt,
    #navtop dl dd {
        float: left;
    }
    #navtop dl.Tab dd {
        width: 132px;
        background-color: #f1f0e6; /* l-brown */
    }
    #navtop dl.Tab dd a {
        line-height: 1.385em; /* 18px */
    }

/* dl#navBrowse */
#navtop dl#navBrowse {
    width: 491px; /* 65+12+132x2+144+3x2 */
    margin-right: 36px;
    background: url(http://static.esaura.cc/www020/css/img/bg_navtop.png) no-repeat -1218px 0; /* top:132x6 */
}
    #navtop dl#navBrowse dt {
        width: 65px;
        margin-right: 12px;
    }
    #navtop dl#navBrowse dd#tabQuestions,
    #navtop dl#navBrowse dd#tabClips {
        margin-right: 3px;
    }
    #navtop dl#navBrowse dd#tabGroups {
        width: 144px; /* overwritten */
    }
    #navtop dl#navBrowse dd#tabQuestions a {
        padding-left: 25px; /* 10+15px */
        background: url(http://static.esaura.cc/www020/css/img/icons.png) no-repeat 14px -86px; /* q:15x13, x 0+10, y:-100+12 */
    }
    #navtop dl#navBrowse dd#tabClips a {
        padding-left: 26px; /* 10+16px */
        background: url(http://static.esaura.cc/www020/css/img/icons.png) no-repeat -136px -89px; /* tv:16x16, x -600+10, y:-100+12 */
    }
    #navtop dl#navBrowse dd#tabGroups a {
        padding-left: 23px; /* 3+20px */
        background: url(http://static.esaura.cc/www020/css/img/icons.png) no-repeat -290px -86px; /* cols:20x16, x -150+6, y:-100+12 */
    }

/* dl#navMy */
#navtop dl#navMy {
    width: 172px; /* 28+12+132 */
    background: url(http://static.esaura.cc/www020/css/img/bg_navtop.png) no-repeat -1255px 0; /* top:265x6 */
}
    #navtop dl#navMy dt {
        width: 28px;
        margin-right: 12px;
    }
    #navtop dl#navMy dd#tabMyPage a {
        padding-left: 32px; /* 16:bg+16 */
        padding-right: 12px; /* ++ -> 2 lines*/
        background: url(http://static.esaura.cc/www020/css/img/icons.png) no-repeat -590px -88px; /* home:16x15, x -300+10, y:-100+12 */
    }

/* dl#navMenu */
#navtop dl#navMenu {
    float: right;
    width: 128px;
    background: url(http://static.esaura.cc/www020/css/img/bg_navtop.png) no-repeat 0 0; /* top:128x6 */
}
    #navtop dl#navMenu dd#tabUpload {
        background: url(http://static.esaura.cc/www020/css/img/bg_navtop.png) repeat-y -1090px 0; /* body:128x1 */
    }
    #navtop dl#navMenu dd#tabUpload a {
        width: 89px; /* 128-(33+6)px */
        line-height: 1.19em; /* 18/(13*1.16) */
        padding-left: 33px; /* 18+15 */
        padding-right: 6px; /* ++ -> 2 lines */
        background: url(http://static.esaura.cc/www020/css/img/icons.png) no-repeat -442px -88px; /* upload:15x16, x:-460+18, y:-100+12 */
    }

/* Variation
------------------------------------------------- */
body#categoryQuestions #navtop dl#navBrowse               { background-position: -1218px -6px; /* 132x6 */ }
body#categoryClips   #navtop dl#navBrowse                 { background-position: -1697px 0;    /* 132x6 */ }
body#categoryGroups  #navtop dl#navBrowse                 { background-position: -1697px -6px; /* 132x6 */ }
body.my              #navtop dl#navMy                     { background-position: -1255px -6px; /* 132x6 */ }
body#categoryQuestions #navtop dl#navBrowse dd#tabQuestions,
body#categoryClips   #navtop dl#navBrowse dd#tabClips,
body#categoryGroups  #navtop dl#navBrowse dd#tabGroups,
body.my              #navtop dl#navMy     dd#tabMyPage    { background-color: white; /* white */ }

/* 
--------------------------------------------------
 PAGE CLASS = index
--------------------------------------------------*/

/* Typography / Colors
------------------------------------------------- */
body.index ul.Intro                          { font-size: 108%;   /* 14px */    }
body.index ul.Intro p                        { color: #af2a33;    /* red */     }
body.index h3 a                              { color: #554738;    /* brown */   }
body.index h3 a.next                         { color: #71993d;    /* green */ 
                                               font-size: 81.3%;  /* 13px */    }
body.index dl#navTopics dt                   { color: #f08300;    /* orange */  }
body.index #searchResult span.note           { font-size: 93%;    /* 12px */    }
body.index #searchResult strong,
body.index #searchResult em                  { font-size: 132.6%; /* 20/15px */ }
body.index #searchResult ul li:after         { color: inherit;    /* gray */    }
body.index #secContent h3 a.seeMore          { color: #71993d;    /* green */
                                               font-size: 81.3%;  /* 13px */    }
body.index ul.Entries li h4 a                { color: #554738;    /* brown */   }
body.index ul.Entries li h4 a:hover          { color: #71993d;    /* green */   }
body.index ul.Entries li h4 a em             { color: #5779bc;    /* blue */    }
body.index ul.Entries li h4 span.rankTop3  { color: #af2a33;    /* red*/      }
body.index ul.Entries li h4 span.rankTop3  { font-size: 182%;   /* 22px */    }
body.index ul.Entries li h4 span.rankTop12 { font-size: 138.5%; /* 18px */    }
body.index ul.Entries li h4 span.rankTop24 { font-size: 123.1%; /* 16px */    }
body.index ul.Entries li h4 span.points    { font-weight: 500;
                                               font-size: 85%;    /* 11px */    }
body.index ul.Entries li p                   { color: #816a53;    /* l-brown */
                                               font-size: 93%;    /* 12px */    }
body.index ul.Entries li dl dt,
body.index ul.Entries li dl dd,
body.index ul.Entries li div.Stars           { font-size: 93%;  /* 12px */           }
body.index ul.Entries li div.Stars em        { font-size: 181%; /* 20/(13*0.85)px */ }
body#index div#topTopic h3 { font-size: 100%; /* overwritten, 13px */ }
body#index div#topTopic a:hover      { color:   #71993d; /* green */ }
body#index div#topTopic a#topic      { color:   #554738; /* brown */ }
body#index div#topTopic a#topic span { font-size:  167%; /* 22px  */
                                       font-weight: 500;             }
body#index div#topTopicForm h3       { font-size:  100%;  /* 13px */ }
body#index div#topTopicForm input.submit { color: white; /* white */ }
body#index ul#keywords p,
body#index ul#keywords dl.tags                { font-size: 93%; /* 12px */  }
body#index ul#keywords dl.tags dt a           { color: #554738; /* brown */ }
body#index ul#keywords dl.tags dt a:hover     { color: #71993d; /* green */ }
body#index ul#topClips h4      { font-size: 11px; }
body#index ul#topClips a       { color: #554738; /* brown */ }
body#index ul#topClips a:hover { color: #71993d; /* green */ }
body#index ul.TopPickups span  { font-size: 85%; /* 11px */  }

/* Structure
------------------------------------------------- */
/* h2 */
body.index #main h2 {
    float: left;
    margin-right: 30px;
}
    body#viewQuotes #main h2,
    body.popular #main h2 {
        float: none; /* overwritten */
    }
    body.index dl#navTopics {
        float: left;
        line-height: 1.77em;
    }
    body.popular dl#navTopics {
        float: none; /* overwritten */
    }

/* #searchResult */
body.index #searchResult {
    clear: both;
    text-align: center;
}
    body.index #searchResult ul {
        display: inline;
        margin-left: 12px;
    }
        body.index #searchResult ul.navBcrumb li:last-child:after {
            margin: 0;
            content: '';
        }

/* form#searchCat */
body.index form#searchCat {
    clear: both;
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    padding-top:  18px; /* for bg */
    background: #f1f0e6 url(http://static.esaura.cc/www020/css/img/bg_search.png) no-repeat -538px 0; /* top:600x18 */
}
    body.index form#searchCat dl,
    body.index form#searchCat dl dt,
    body.index form#searchCat dl dd {
        height: 1.385em; /* 18px */
    }
    /* dl */
    body.index form#searchCat dl {
        padding-left: 18px;
        padding-bottom: 18px; /* for bg */
        background: url(http://static.esaura.cc/www020/css/img/bg_search.png) no-repeat -1138px 100%; /* bottom:600x18 */
    }
    body.index form#searchCat dl dt,
    body.index form#searchCat dl dd {
        float: left;
    }
    body.index form#searchCat dl dt {
        width: 156px; /* 174-18 */
        white-space: nowrap;
    }
    body.index form#searchCat dl dd {
        width: 402px;
        background: url(http://static.esaura.cc/www020/css/img/bg_search.png) repeat-y -1738px 0; /* body:402x2 */
    }
    /* input */
    body.index form#searchCat dl dd input.textSearch {
        width:         280px; /* 322-(12+30) */
        margin-right:   18px;
        padding: 0 12px 0 30px;
        border: none;
        background: url(http://static.esaura.cc/www020/css/img/icons.png) no-repeat -144px -200px; /* magnify:16x16, x+6 */
    }
    body.index form#searchCat dl dd input.submit {
        width: 62px;
        padding: 0; /* resest default */
        border: none;
        background: none;
    }

/* div#searchTips */
body.index div#searchTips {
    margin-left: 170px;
}

/* dl#menuNarrow */
body.index dl#menuNarrow {
    clear: both;
    width: 580px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* div.MenuPage */
body.index div.MenuPage {}
    body.index dl.sort {
        width: 38%;
    }
    body.index ul.paging {
        width: 60%;
    }

/* h3 */
body.index #main h3 {}
    body.index #main h3 a.next {
        margin-left: 0.6em;
    }

/*
 ul.Entries
 |--li.[first|second|last] ... body
 |      |--h4              ... top
 |      |--p.Extra
 |      |--dl.tags
 |      |--dl.Author
 |      |--div.Stars       ... bottom
*/
body.index ul.Entries {}
    body.index ul.Entries li {
        float: left;
        width: 289px;
        margin-right: 17px;
        background: url(http://static.esaura.cc/www020/css/img/bg_wrappers1.png) repeat-y -578px 0; /* body:289x1 */
    }
    li.first {
        clear: both;
    }
    body.index ul.Entries li.last {
        margin-right: 0;
    }
    /* h4, div.stars */
    body.index ul.Entries li h4,
    body.index ul.Entries li div.Stars {
        padding-left:  16px; /* 4:bg+12 -> full width */
        padding-right: 16px; /* 4:bg+12 -> full width */
        overflow: hidden;
    }
    /* p, dl */
    body.index ul.Entries li p.Extra,
    body.index ul.Entries li dl {
        margin-left: 16px;  /* 4:bg+12 -> with padding */
        margin-right: 16px; /* 4:bg+12 -> with padding */
        overflow: hidden;
    }
        body.index ul.Entries li h4 {
            padding-top: 16px; /* 4:bg+12 */
            background: url(http://static.esaura.cc/www020/css/img/bg_wrappers1.png) no-repeat 0 0; /* top:289x30 */
        }
        body.index ul.Entries li p.Extra a {
            color: #554738; /* brown */
        }
        body.index ul.Entries li p.Extra:before {
            margin-right: 0.4em;
            color: #f08300; /* orange */
            content: 'Re';
        }
        body.index ul.Entries li dl dt {
            margin-right: 3px;
        }
        body.index ul.Entries li dl.tags {
            line-height: 1.33em;
        }
        body.index ul.Entries li div.Stars {
            clear: both;
            padding-bottom: 18px; /* 6:bg+12 */
            background: url(http://static.esaura.cc/www020/css/img/bg_wrappers1.png) no-repeat -289px 100%; /* bottom:289x18 */
        }
        body.index ul.Entries li div.Stars span { /* star */
            float: left;
        }
        body.index ul.Entries li div.Stars span.starLoading { 
            width:  24px;
            height: 24px;
            background-position: 0 -36px; /* white */
        }
        body.index ul.Entries li div.Stars em {
            margin-left: 12px;
        }
    /* img */
    body.index ul.Entries li div.Thumbnail {
        margin-left: 16px;
    }
    body.index ul.Entries li div.Thumbnail a {
        float: left;
        display: block;
        padding: 6px;
        text-align: center;
    }
    body.index ul.Entries li div.Thumbnail p {
        float: left;
        padding-left:  8px;
    }
        body.index  ul.Entries li div.Thumbnail a { 
            width: 91px;
            height: 68px;
            background-color: #000000; /* black */
            border: 6px solid #f1f0e6; /* l-brown */
        }
        body.index  ul.Entries li div.Thumbnail p { 
            width: 134px;
        }
        body.index ul.Entries li.groups div.Thumbnail a {
            width: 80px;
            height: 80px;
            background-color: #f1f0e6; /* l-brown */
            border-width: 3px;
        }
        body.index ul.Entries li.groups div.Thumbnail p { 
            width: 151px;
        }

/* p */
body.index div#secContent>p {
    margin-left: 18px;
}

/* page#search */
body.index div.SeeMore {}
    body.index div.SeeMore a {
        display: block;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    body.index div.SeeMore a:hover {
        background-color: #f1f0e6; /* l-brown */
    }

/* Intro */
body.index ul.Intro {}
    body.index ul.Intro li {
        line-height: 1.77em;
        border-right:  6px solid #f1f0e6; /* l-brown */
        border-bottom: 6px solid #f1f0e6; /* l-brown */
    }

/* #topTopic */
body#index div#topTopic {
    width:  578px;
    height: 120px;
    background: url(http://static.esaura.cc/www020/css/img/icons.png) no-repeat -600px -380px; /* Q-section: 578x120 */
}
    body#index div#topTopic h3 {
        padding:    2px 0 18px 48px; /* overwritten */
        background: none;            /* overwritten */
        border:     none;            /* overwritten */
	}
    body#index div#topTopic a {
	    padding-left:   24px;
    }

/* #topTopicForm */
body#index div#topTopicForm {}
	body#index div#topTopicForm h3 {
	    width:      210px;
	    margin-left: -6px;
	    border:     none;         /* overwritten */
	    background: url(http://static.esaura.cc/www020/css/img/icons.png) no-repeat -190px -21px; /* overwritten */
	    /* img replacement */
	    height:      0;
	    padding:     18px 0 0 0;  /* overwritten */
	    overflow:    hidden;
	}
	body#index div#topTopicForm p {
		margin: 0 0 3px 12px; /* overwritten */
	}
	body#index div#topTopicForm form {
		padding-left: 12px;
	}
	body#index div#topTopicForm input.text {
		width: 60%;
	}
	body#index div#topTopicForm input.submit {
        background-color: #cc3300; /* orange */
		border: 1px solid #993300; /* d-orange */
	}
    body#index div#topTopicForm input.submit:hover {
        background-color: #993300; /* d-orange */
    }


/* #culipsLogo */
body#index a#culipsLogo {
    float: left;
    margin-top:   6px;
    margin-right: 12px;
    border: solid 3px #2198da; /* blue */
}

/* div.colLeft */
body#index div.colLeft {
    float: left;
    width: 578px;
}
    body#index div.colLeft ul.Entries li {
        margin-right: 0; /* overwritten */
    }

/* div.colRight */
body#index div.colRight {
    float: right;
    width: 302px;
}
    body#index div.colRight dl.tags {
        display: inline;
    }
    body#index div.colRight dl.tags dd {
        margin-left: 0.5em; /* overwritten */
    }

/* ul#topClips */
body#index ul#topClips {}
    body#index ul#topClips li {
    	width: 120px;
        float: left;
        margin-right: 24px;
    }

body#index ul.TopPickups {}
    body#index ul.TopPickups li {
        padding-bottom: 6px;
    	border-bottom: 1px dashed #ccc098; /* ll-brown */
    }


/* #topContributors */
body#index #topContributors h3 {
    background-position: -600px -200px; /* 16x16, crown */
}

/* Vertical Spacing
------------------------------------------------- */
body.index  #main h2 {
    margin-bottom: 24px;   /* overwritten */
}
body.index dl#menuNarrow,  /* 12px =.p see form#searchCat -> 48-36 */
body#search div.SeeMore {  /* 12px =.p see ul.Entries -> 48-36 */
    margin-top: -36px;   
}
body.popular dl#menuNarrow {
    margin-top: 12px;
}
body.index div#searchTips{ /* 24px =.p see form#searchCat -> 48-36 */
    margin-top: -24px;   
}
body.index  ul.Entries h4,
body.index  ul.Entries dl,
body.index  ul.Entries div.Thumbnail,
body.index  ul.Entries p.Extra {
    margin-bottom: 6px;
}
body#index div.colLeft ul.list li {
    margin-bottom: 0.33em; /* overwritten */
}
body#index div.users ul.inline {
    line-height: 1.77em;
}
body#index div#topTopic {
    margin-bottom:  18px;
}
body#index div#topTopic a {
    line-height: 2.2em;
}
body#index div#topTopicForm h3 {
    margin-bottom: 3px;
}
body#index ul#topClips div.Thumbnail {
    margin-bottom: 3px;
}
body#index ul#topClips h4 {
    line-height: 1.33em;
}
body#index ul.TopPickups li {
    margin-bottom: 6px;
}

/* 
--------------------------------------------------
 PAGE CLASS = view
--------------------------------------------------*/

/* Typography / Colors
------------------------------------------------- */

body.view h2                               { font-size: 167%;   /* 22px */   }
body.view h2 a                             { color: #554738;    /* brown */  }
body.view #secEntry dl.tags                { font-size:  93%;   /* 12px */   }
body.view #navGroup                        { font-size: 138.5%; /* 18px */   }
body.view ul#replies li.Reply dl.Author dt { color: #6ba9ff;    /* v-blue */ } /* No.XX */
body.view ul#replies li.Reply dl.Author em { font-size: 182%;   /* 24px */   } /* X stars */
body.view ul#replies li.Comment span.note  { font-weight: normal; }
body.view #secEntry       h2:before        { color: #f08300; /* orange */ font-size: 108%; }
body#viewClips  #secEntry h2:before        { color: #e6ba46; /* gold   */ font-size: 108%; }
body#viewGroups #secEntry h2:before,
body#viewQuotes #secEntry h2:before        { color: #af2a33; /* red   */  font-size: 108%; }
body#viewQuestions #secReplies h3:before,
body#viewClips   #secReplies h3:before     { color: #6ba9ff; /* v-blue */ font-size: 116%; }
body#viewGroups  #secReplies h3:before     { color: #8891ff; /* violet */ font-size: 116%; }
body.view #secReplies    h3 a              { color: #5779bc; /* blue */   font-size: 85%;  }
body#viewClips span.seekTo                 { color: #f08300; /* green */  font-size: 116%; /* 16px */ }
body#viewClips span.isActive               { color: #af2a33; /* red */ }
body#viewQuotes #secQuote select#quotes-category    { font-size: 138.5%; /* 18px */ }
body#viewQuotes #secQuote input#quotes-delete       { color: #999999;    /* gray */  }
body#viewQuotes #secQuote input#quotes-delete:hover { color: #af2a33;    /* red */  }


/* Structure
-------------------------------------------------
 #secContent
 |--#secEntry          |--#secAuthor
 |--#secReplies
 |      |--h3
 |      |--div           |--#secSide
 |      |--ul#replies    |
 |      |--div           |
------------------------------------------------- */
/* #secEntry */
body.view #secEntry {
    float: left;
    width: 590px;
    min-height: 127px;  /* for bg */
    margin-top: -18px;  /* for #content padding */
    margin-left: -24px; /* for #content padding */
    padding-top: 18px;
    padding-left: 24px;
}
    body.view #secEntry ul.navBcrumb  { float: left;  }
    body.view #secEntry span#editMenu { float: right; }
    body.view #secEntry h2 {
        clear: both;
        padding-bottom: 0.15em;
        border-bottom: 1px dashed #ccc098; /* ll-brown */
    }
    body.view #secEntry dl,
    body.view #secEntry p {
        margin-right: 12px;
        margin-left:  12px;
    }
    body.view #secEntry p#message {
        margin: 0; /* overwitten */
    }
    /* #searchResult */
    body#viewQuotes #secQuoteBox {
        padding: 12px 12px 12px 24px;
        background-color: #f1f0e6;
    }
    body.view #secEntry p#message,
    body#viewQuotes #secEntry #searchResult {
        text-align: center;
    }
        body#viewQuotes #secQuote input,
        body#viewQuotes #secQuote select {
            vertical-align: middle;
        }
        body#viewQuotes #secQuote select#quotes-category { width: 8em; height: 1.55em; }
        body#viewQuotes #secQuote input#quotes-id        { width: 5em; }
        body#viewQuotes #secQuote input#quotes-add.loading {   /* overwritten */
            display: inline;
            float: none;
            width:  36px;
            height: 36px;
            background-position: -72px 0; /* beige */
        }
        body#viewQuotes #secQuote input#quotes-delete {        /* overwritten */
            background-color: white;
            border: none;
        }
        body#viewQuotes #secQuote input#quotes-delete.loading { /* overwritten */
            display: none;
        }

/* #yPlayer */
body#viewClips #yPlayer {
    width:  425px;
    height: 344px;
    margin: 0 auto;
    padding: 6px;
    background-color: #000000; /* black */
    border: 6px solid #f1f0e6; /* l-brown */
}

/* #jPlayer */
body#viewClips #jPlayer {}
body#viewClips #jPlayer #player_container {
    position: relative;
    width:  560px;
    height:  90px;
    margin-left: 10px;
    border: 1px solid #e6ba46; /* gold */
    background-color: #eeeeee; /* gray */
}
    body#viewClips #jPlayer #player_container ul#player_controls {
        list-style-type:none;
        padding:0;
        margin: 0;
    }
    body#viewClips #jPlayer #player_container ul#player_controls li {
        overflow:hidden;
        text-indent:-9999px;
    }
    body#viewClips #jPlayer #player_play,
    body#viewClips #jPlayer #player_pause {
        display: block;
        position: absolute;
        left: 12px;
        top:  12px;
        width:  40px;
        height: 40px;
        cursor: pointer;
    }
    body#viewClips #jPlayer #player_play {
        background: url(http://static.esaura.cc/www020/css/img/jplayer_spirites.jpg) 0 0 no-repeat;
    }
        body#viewClips #jPlayer #player_play.jplayer_hover {
            background: url(http://static.esaura.cc/www020/css/img/jplayer_spirites.jpg) -41px 0 no-repeat;
        }
    body#viewClips #jPlayer #player_pause {
        background: url(http://static.esaura.cc/www020/css/img/jplayer_spirites.jpg) 0 -42px no-repeat;
    }
        body#viewClips #jPlayer #player_pause.jplayer_hover {
            background: url(http://static.esaura.cc/www020/css/img/jplayer_spirites.jpg) -41px -42px no-repeat;
        }
    body#viewClips #jPlayer #player_stop {
        position: absolute;
        left: 62px;
        top:  18px;
        background: url(http://static.esaura.cc/www020/css/img/jplayer_spirites.jpg) 0 -83px no-repeat;
        width:28px;
        height:28px;
        cursor: pointer;
    }
        body#viewClips #jPlayer #player_stop.jplayer_hover {
            background: url(http://static.esaura.cc/www020/css/img/jplayer_spirites.jpg) -29px -83px no-repeat;
        }
    body#viewClips #jPlayer #player_progress {
        position: absolute;
        left: 102px;
        top:  24px;
        background-color: #eeeeee; /* gray */
        width: 320px;
        height: 15px;
    }
    body#viewClips #jPlayer #player_progress_load_bar {
        background: url(http://static.esaura.cc/www020/css/img/jplayer_bar_load.gif)  top left repeat-x;
        width:0px;
        height:15px;
        cursor: pointer;
    }
        body#viewClips #jPlayer #player_progress_load_bar.jplayer_buffer {
            background: url(http://static.esaura.cc/www020/css/img/jplayer_bar_buffer.gif)  top left repeat-x;
        }
    body#viewClips #jPlayer #player_progress_play_bar {
        background: url(http://static.esaura.cc/www020/css/img/jplayer_bar_play.gif) top left repeat-x ;
        width:0px;
        height:15px;
    }
    body#viewClips #jPlayer #player_volume_min {
        position: absolute;
        left: 440px;
        top:  24px;
        background: url(http://static.esaura.cc/www020/css/img/jplayer_spirites.jpg) 0 -170px no-repeat;
        width:  18px;
        height: 15px;
        cursor: pointer;
    }
    body#viewClips #jPlayer #player_volume_max {
        position: absolute;
        left: 516px;
        top:   24px;
        background: url(http://static.esaura.cc/www020/css/img/jplayer_spirites.jpg) 0 -186px no-repeat;
        width:18px;
        height:15px;
        cursor: pointer;
    }
        body#viewClips #jPlayer #player_volume_min.jplayer_hover {
            background: url(http://static.esaura.cc/www020/css/img/jplayer_spirites.jpg) -19px -170px no-repeat;
        }
        body#viewClips #jPlayer #player_volume_max.jplayer_hover {
            background: url(http://static.esaura.cc/www020/css/img/jplayer_spirites.jpg) -19px -186px no-repeat;
        }
    body#viewClips #jPlayer #player_volume_bar {
        position: absolute;
        left: 460px;
        top:   29px;
        background: url(http://static.esaura.cc/www020/css/img/jplayer_volume_bar.gif) repeat-x top left;
        width: 46px;
        height: 5px;
        cursor: pointer;
    }
    body#viewClips #jPlayer #player_volume_bar_value {
        background: url(http://static.esaura.cc/www020/css/img/jplayer_volume_bar_value.gif) repeat-x top left;
        width:  0px;
        height: 5px;
    }
    body#viewClips #jPlayer #player_playlist_message {
        position: absolute;
        left:    0;
        bottom:  0;
        width:   524px;
        padding: 6px 24px 12px 12px;
        line-height:1.4em;
        height: 1em;
        background-color: #cccccc; /* gray */
    }
    body#viewClips #jPlayer #song_title {
        float:   left;
        margin:  0 5px 0 0;
        padding: 0;
        font-weight: bold;
    }
    body#viewClips #jPlayer #play_time,
    body#viewClips #jPlayer #total_time {
        padding-top: .3em;
        font-weight: normal;
        font-style:  oblique;
        font-size:   .7em;
    }
        body#viewClips #jPlayer #play_time {
            float: right;
            margin-right:  6px;
        }
        body#viewClips #jPlayer #play_time:after {
            margin-left:  12px;
            content: '/';
        }
        body#viewClips #jPlayer #total_time {
            float: right;
            margin-left:  6px;
        }

/* #culips */
body#viewClips #culips {
    margin-left:  12px;
}
body#viewClips #culips table tr {
    border: none;
}
body#viewClips #culips td.top {
    line-height: 1.77em;
}
body#viewClips #culips table.dialog,
body#viewClips #culips td.dialog {
    width: 550px;
    background: #e6fdb7;
    border-collapse:collapse;
    border:0px;
    padding:0px;
}
    body#viewClips #culips td.dialog div.margin-left15  {
        margin-left:  15px;
        padding-right: 15px;
        line-height: 1.77em;
    }
    body#viewClips #culips td.dialog strong {
        font-weight: bold;
    }

body#viewClips #toCulips {
    padding: 12px;
    border-top:    1px dashed #ccc098; /* ll-brown */
}
    body#viewClips #toCulips a#culipsLogo {
        display: block;
        float: left;
        width: 119px;
        border: solid 3px #2198da; /* blue */
    }
    body#viewClips #toCulips p {
        float: right;
        width: 410px;
    }

/* #secReplies */
body.view #secReplies {
    clear: both;
    float: left;
    min-height: 119px;  /* for bg */
    width: 580px;
    margin-left: -24px; /* full width */
    padding-left: 24px;
    padding-top:  46px; /* for bg  */
}

/* #secQuotes */
body#viewQuotes #secQuotes {
    clear: both;
    width: 100%;
}

/* #secSide */
body.view #secSide {
    float: right;
    width: 289px;
    padding-top:  46px; /* for bg  */
}

/*
 ul#replies li.[Reply|Form]   ... body
 |    |--div.Reply|Form       ... bottom (form)
 |           |--dl.Author|h4  ... top
*/
body.view ul#replies li {}
    body.view ul#replies li.Reply                         { background-position: -1160px 0     /* body:580x1 */    }
    body.view ul#replies li.Reply div.Reply               { background-position:  -580px 100%; /* bottom:580x18 */ }
    body.view ul#replies li.Reply dl.Author               { background-position:     0   0;    /* top:580x12 */    }
    body.view ul#replies li.Reply.isParentOwner           { background-position: -6380px 0     /* body:580x1 */    }
    body.view ul#replies li.Reply.isParentOwner div.Reply { background-position: -5800px 100%; /* bottom:580x18 */ }
    body.view ul#replies li.Reply.isParentOwner dl.Author { background-position: -5220px 0;    /* top:580x12 */    }
    body.view ul#replies li.Form                          { background-position: -2900px 0;    /* body:580x1 */    }
    body.view ul#replies li.Form  form                    { background-position: -2320px 100%; /* bottom:580x18 */ }
    body.view ul#replies li.Form  h4                      { background-position: -1740px 0;    /* top:580x12 */    }
    body#viewGroups ul#replies li.Comment                 { background-position: -8120px 0     /* body:580x1 */    }
    body#viewGroups ul#replies li.Comment div.Comment     { background-position: -7540px 100%; /* bottom:580x18 */ }
    body#viewGroups ul#replies li.Comment div.Title       { background-position: -6960px 0;    /* top:580x12 */    }
    body.view ul#replies li dl.Author,
    body.view ul#replies li div.Title,
    body.view ul#replies li p.Extra,
    body.view ul#replies li p.Deleted,
    body.view ul#replies li div.Edit,
    body.view ul#replies li.Form  h4,
    body.view ul#replies li.Form  p {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* li.Reply */
    body.view ul#replies li.Reply dl.Author {
        line-height: 1.85em; /* 24/13 */
    }
    body.view ul#replies li.Reply dl.Author dt,
    body.view ul#replies li.Reply dl.Author dd           { float: left;  }
    body.view ul#replies li.Reply dl.Author dd.star      { float: right; }
    body.view ul#replies li.Reply dl.Author dd.star      {
        margin-right: 0;
        margin-left: 1em;
    }
    body.view ul#replies li.Reply dl.Author dd.star span.starLoading {
        width:  24px;
        height: 24px;
        background-position: -108px -36px; /* blue */
    }
        body.view ul#replies li.Reply.isParentOwner dl.Author dd.star span.starLoading {
            background-position: -72px -36px; /* beige */
        }
    body.view ul#replies li.Reply div.Title {
        padding-top: 15px; /* for bg */
        background: url(http://static.esaura.cc/www020/css/img/icons.png) no-repeat 75px -450px; /* callout:25x15, x -460+95 */
    }
        body.view ul#replies li.Reply.isParentOwner div.Title {
            background-position: 75px -465px; /* callout:25x15, x -460+95 */
        }

    body.view ul#replies li.Reply div.Title p {
        padding: 6px 1em;
        background-color: white;
    }
    body.view ul#replies div.Edit {
        text-align: right;
    }
    body.view ul#replies div.Edit dl.heart {
        float: left;
    }
    body.view ul#replies div.Edit a.edit {
        float: right;
    }
    body.view ul#replies div.Edit img.loading {
        background-position: -108px -60px; /* blue */
    }
        body.view ul#replies li.isParentOwner div.Edit img.loading {
            background-position: -72px -60px; /* beige */
    }
    body#viewGroups ul#replies div.Edit img.loading {
        background-position: 0 -60px; /* white */
    }

    /* li.Form */
    body.view ul#replies li.Form div.ColForms,
    body.view ul#replies li.Form div.Submit   { width: 532px; /* 580-24*2 */          }
    body.view ul#replies li.Form div.ColNotes { width: 274px; /* 950-24*2-580-24*2 */ }
    body.view ul#replies li.Form div.Submit img.loading {
        margin-top: 8px;
        background-position:  -36px -60px; /* green */
    }
    body.view ul#replies li.Form div.Submit input.loading {
        background-position: -36px 0; /* green */
    }
    /* span.seekTo */
    body#viewClips span.seekTo {
        margin-right: 6px;
        padding-left: 19px; /* 16:bg+3 */
        background: url(http://static.esaura.cc/www020/css/img/icons.png) no-repeat -600px -48px; /* contoller play:16x16,  */
        cursor: pointer;
        text-decoration: underline;
    }
    /* li.Comment */
    body#viewGroups ul#replies li.Comment div.Title p {
        padding-left: 12px;
        padding-right: 12px;
        background-color: #ffffff;
    }
    body#viewGroups ul#replies li.Comment p.Extra,
    body#viewGroups ul#replies li.Comment div.Edit {
        margin-left: 24px;
        margin-right: 24px;
        padding-left: 12px;
        padding-right: 12px;
        background-color: #ffffff;
    }
    body#viewGroups ul#replies li.Comment div.Title p {
        border-top: 3px solid #e9edf9;
        font-weight: bold;
    }

/* Vertical Spacing
------------------------------------------------- */
body.view #secAuthor,
body.view #secEntry           { margin-bottom: 24px; }
body.view #secEntry dl        { margin-bottom: 12px; }

body#viewGroups ul#replies li.Comment p {
    margin-bottom: 0; /* overwritten */
}
body#viewGroups ul#replies li.Comment div.Title p,
body#viewGroups ul#replies li.Comment p.deleted {
    padding-top: 6px;
}
body#viewGroups ul#replies li.Comment div.Title p,
body#viewGroups ul#replies li.Comment p.Extra,
body#viewGroups ul#replies li.Comment div.Edit {
    padding-bottom: 6px;
}
body#viewGroups ul#replies div.wrapperTop2 {
    padding-top: 17px; /* overwritten, 20-3 */
}
body#viewGroups ul#replies div.wrapperBottom2 {
    padding-bottom: 24px; /* overwritten */
}
body#viewGroups #navGroup,
body#viewQuotes #navGroup     { margin-bottom: 12px; }
body#viewQuotes #secQuoteBox  { margin-bottom:  6px; }
body#viewQuotes #searchResult { margin-top:    12px; }

/* Variation
------------------------------------------------- */
body#viewQuestions #secEntry,
body#viewClips   #secEntry             { background: url(http://static.esaura.cc/www020/css/img/icons.png) no-repeat  0      -500px; /* Q:94x127  */ }
body#viewGroups  #secEntry,
body#viewQuotes  #secEntry             { background: url(http://static.esaura.cc/www020/css/img/icons.png) no-repeat -1232px -496px; /* G:94x127  */ }
body#viewQuestions #secReplies,
body#viewClips   #secReplies           { background: url(http://static.esaura.cc/www020/css/img/icons.png) no-repeat -620px  -500px; /* A:104x119 */ }
body#viewGroups  #secReplies           { background: url(http://static.esaura.cc/www020/css/img/icons.png) no-repeat -1850px -500px; /* C:104x119 */ }
body#viewQuestions #secEntry h2,
body#viewClips   #secEntry   h2,
body#viewGroups  #secEntry   h2,
body#viewQuotes  #secEntry   h2,
body#viewQuestions #secReplies h3.title,
body#viewClips   #secReplies h3.title,
body#viewGroups  #secReplies h3.title  { background: none;   /* delete default */ }
body.view        #secEntry   h2        { line-height: 1.77em; /* overwritten for multiple lines */ }
body#viewQuestions #secEntry h2:before { margin-left: -24px; /* for default padding */ margin-right: 9px; content: 'Q'; }
body#viewClips   #secEntry   h2:before { margin-left: -24px; /* for default padding */ margin-right: 9px; content: 'Clip'; }
body#viewGroups  #secEntry   h2:before,
body#viewQuotes  #secEntry   h2:before { margin-left: -24px; /* for default padding */ margin-right: 9px; content: 'Group'; }
body#viewQuestions #secReplies h3:before,
body#viewClips   #secReplies h3:before { margin-left: -24px; /* for default padding */ margin-right: 6px; content: 'A'; }
body#viewGroups  #secReplies h3:before { margin-left: -24px; /* for default padding */ margin-right: 6px; content: 'Chat'; }
body#viewUsers   #secEntry   h2        { background-position: -750px -68px; /* 22x22, y:-75+3 */ }
body#viewUsers   #secEntry   h3        { clear: both; }
body#viewClips   ul#replies,
body#viewClips   ul#replies.single     { overflow: visible; width: auto; height: auto;}
body#viewClips   ul#replies.inFrame    { overflow: auto; width: 580px; height: 368px; }

/* 
--------------------------------------------------
 PAGE CLASS = edit
--------------------------------------------------*/

/* Typography / Colors
------------------------------------------------- */
body.edit h2                 { font-size: 167%; /* 22px */  }
body.edit #select h3 a       { color: #71993d;  /* green */ }
body.edit #select dl.list dt { font-weight: bold;           }
body.edit #form p.example    { font-size: 93%;  /* 12px */  }

/* Structure
------------------------------------------------- */
/*
 #form                        ... body
 |    |--form                 ... bottom
 |           |--#secRequired  ... top
*/
body.edit #form                        { background-position: -5305px 0;    /* body:548x1  */   }
    body.edit #form form               { background-position: -4355px 100%; /* bottom:548x18 */ }
    body.edit #form form #secRequired  { background-position: -3405px 0;    /* top:548x12 */    }
    body.edit #form                    { clear: both;      }
    body.edit #form form.wrapperBottom { padding-right: 0; } /* overwritten */
    body.edit #form form div#showOptions,
    body.edit #form form div.ColForms,
    body.edit #form form div.Submit    { width: 500px; /* 548-24*2 */            }
    body.edit #form form div.ColNotes  { width: 318px; /* 950-24*2-548-6x2-24 */ }
    body.edit #form form div.Submit img.loading {
        margin-top: 8px;
        background-position: -144px -60px; /* cream */
    }
    body.edit #form form div.Submit input.loading {
        background-position: -144px 0; /* cream */
    }
    body.edit #select div.box1-2,
    body.edit #select div.box2-2,
    body.edit #select div.box1-1 {
        padding: 12px;
        border: 6px solid #f1f0e6; /* l-brown */
    }
        body.edit #select div.box1-2 {
            width: 45%; /* overwritten */
        }
        body.edit #select div.box2-2 {
            width: 45%; /* overwritten */
            padding-bottom: 68px;
            background: url(http://static.esaura.cc/www020/css/img/bg_new.png) no-repeat -416px 90%; /* 550x45 */
        }
        body.edit #select div.box1-1 {
            clear: both;
            width: 45%; /* overwritten */
            padding-bottom: 54px;
            background: url(http://static.esaura.cc/www020/css/img/bg_new.png) no-repeat 16px 90%; /* 550x45 */
        }

    body.edit #form p.example {
        line-height: 1.5em;
    }

/* .contact */
body.contact #main p,
body.contact #main ul.list {
    margin-left: 12px;
}
body.contact div.Submit a.edit {
    background-position: -300px -44px;
}

/* Vertical Spacing
------------------------------------------------- */
body.edit #secEntry.form {
    margin-bottom: 0; /* overwritten */
}
body.edit #form h6.example {
    margin-top: 6px;
}

/* 
--------------------------------------------------
 PAGE CLASS = auth
--------------------------------------------------*/

/* Typography / Colors
------------------------------------------------- */
body.auth #main h2 span             { font-size: 63.6%;  /* 14/22 */ }
body.auth #main h2 span a           { color: #71993d;    /* green */ }
body.auth #form form label          { font-size: 108%;   /* 14px*/   }
body.auth #form form input.text,
body.auth #form form input.password { font-size: 167%;   /* 22px */  }
body.auth #form form input.submit   { font-size: 123.1%; /* 16px */  }
body.auth #form form em             { font-size: 108%;   /* 14px */  }

/* Structure
------------------------------------------------- */
/* h2 */
body.auth #main h2 {}
    body.auth #main h2 span {
        margin-left: 24px;
    }

/* p */
body.auth #main p.description {
    margin-left: 1em;
}

/*
 #form                        ... body
 |    |--form                 ... bottom
 |           |--#secRequired  ... top
*/
body.auth #form                        { background-position: -2766px 0;    /* body:508x1  */   }
    body.auth #form form               { background-position: -2258px 100%; /* bottom:508x18 */ }
    body.auth #form form #secRequired  { background-position: -1750px 0;    /* top:508x12 */    }
    body.auth #form {
        width: 508px;
    }
    body.auth #form form div.ColForms,
    body.auth #form form div.Submit {
        width: 460px; /* 508-24*2 */
    }
    body.auth #form form input.text,
    body.auth #form form input.password {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    body.auth #form form input.submit {
        width: 131px;
        height: 38px;
        padding-left: 24px;
        border: none;
        background: url(http://static.esaura.cc/www020/css/img/bg_wrappers1.png) no-repeat -3274px 0; /* button:131x38 */
    }
    body.auth div.Submit a {
        line-height: 3.17em; /* 38/13 */
    }

/* #signup */
body#signup #form,
body#login  #form        { float: left;  width: 508px; }
body#signup #colBenefits,
body#login  #colBenefits { float: right; width: 370px; } /* 950-24*2-508-24 */

/* #freeze/sent */
body#freeze #main ul.list,
body#freeze #main p,
body#sent   #main ul.list,
body#sent   #main p {
    margin-left: 12px;
}

/* 
--------------------------------------------------
 PAGE CLASS = my
--------------------------------------------------*/

/* Typography / Colors
------------------------------------------------- */
body.my h2 a {
    color: #554738;    /* brown */
}
body.my #announcements dl dt span.date {
    font-weight: normal;
}
body.my #announcements dl dt span.date,
body.my table.Entries {
    font-size: 93%; /* 12px */
}
body.my table.Entries td {
    font-size: 93%;   /* 12px */
}
    body.my table.Entries td.ratings {
        text-align: right;
    }

/* Structure
------------------------------------------------- */
/*
 #announcements
 |    |--dl         ... body
 |           |--dt  ... top
 |           |--dd  ... bottom
*/
body.my #announcements dl        { background-position: -4640px 0;    /* body:580x1 */    }
    body.my #announcements dl dd { background-position: -4060px 100%; /* bottom:580x18 */ }
    body.my #announcements dl dt { background-position: -3480px 0;    /* top:580x12 */    }
    body.my #announcements dl p  {
        margin-left: 24px;
        margin-right: 24px;
    }
    body.my #announcements dl dt p span.date {
        margin-left: 12px;
    }
    body.my #announcements dl dd p  {
        padding-left:  12px;
        padding-right: 12px; /* overwritten */
    }

/* table.Entries */
body.my table.Entries {}
    body.my table.Entries th       { width: 75%; }
    body.my table.Entries td.by    { width: 5%;  }
    body.my table.Entries td.date  { width: 15%; }

/* p */
body.my div#secContent>p,
body.my div#secContent>ul,
body.my div#secContent>dl {
    margin-left: 6px;
}

/* 
--------------------------------------------------
 PAGE CLASS = dashboard
--------------------------------------------------*/

/* Typography / Colors
------------------------------------------------- */

/* Structure
------------------------------------------------- */
/* #searchResult */
body#dashboard #searchResult {
    margin-left: 0; /* overwritten */
    text-align: center;
}

/* dl#menuNarrow */
body#dashboard #menuNarrow dl {
    line-height: 1.77em; /* multiple lines */
}

/* table.Entries */
body#dashboard table.Entries {}
    body#dashboard table.Entries th         { width: 60%; }
    body#dashboard table.Entries td.by      { width:  5%; }
    body#dashboard table.Entries td.ratings { width: 10%; }
    body#dashboard table.Entries td.date    { width: 15%; }
    body#dashboard table.Entries td.star    { width: 3%; text-align: right; }
    body#dashboard table.Entries tr      span.starLoading { width:  24px; height: 24px; }
    body#dashboard table.Entries tr.odd  span.starLoading { background-position: -72px -36px; /* beige */ }
    body#dashboard table.Entries tr.even span.starLoading { background-position:     0 -36px; /* white */ }

/* div.MenuPage */
body#dashboard ul.paging {
    width: 100%;
}

/* 
--------------------------------------------------
 PAGE CLASS = temporary
--------------------------------------------------*/
body.temporary h2 {
    margin-top: 18px;
}

/* 
--------------------------------------------------
 #side
--------------------------------------------------*/

/* Typography / Colors
------------------------------------------------- */
body      #colAuthor dl#author,
body      #colAuthor dl#btStar       { font-size:  93%;   /* 12px */   }
body.view #colAuthor #counter em,
body.view #colAuthor #counter strong { font-size: 197%;   /* 26px */   }
body.my   #colAuthor #counter em,
body.my   #colAuthor #counter strong { font-size: 138.5%; /* 18px */   }
          #colMembers ul li          { font-size: 93%;    /* 12px */   }
body.view #colQuote strong           { color: #af2a33;    /* red  */   }


/* Structure
-------------------------------------------------
/* #navAccount */
#side ul#navAccount {
    text-align: right;
}

/*
 #colAuthor              ... body
 |--dl#author            ... top    (-left margin for <)
 |--dl#btStar|#counter   ... bottom
*/
#secAuthor,
#colAuthor,
#colBookmark,
#colQuote,
#colMembers {
    width: 287px;
}

#secAuthor {
    float: right;
}
#colAuthor {
    background: url(http://static.esaura.cc/www020/css/img/bg_wrappers1.png) repeat-y -1463px 0; /* body:287x1 */
}
    #colAuthor dl dt,
    #colAuthor dl dd {
        float: left;
    }
    #colAuthor dl dd {
        line-height: 1.5em;
        width: 207px; /* 287-16x2-36-12 */
        margin-left: 12px;
    }
    #colAuthor dl#author {
        width: 257px; /* 309-(16+36) */
        margin-left: -22px; /* 309-287 for bg */
        padding: 14px 16px 0 36px; /* top 2:bg+12, right 4:bg+12 left 24:bg+12 */
        background: url(http://static.esaura.cc/www020/css/img/bg_wrappers1.png) no-repeat -867px 0; /* top:309x42 */
    }
    #colAuthor dl#btStar span.starLoading {
        width:  36px;
        height: 36px;
        background-position: -72px 0; /* beige */
    }




#colMembers {}
    #colMembers ul{
        margin-left: 12px;
    }
    #colMembers ul li {
        float: left;
        margin-right: 18px;
        margin-bottom: 12px;
    }

#colQuote {}
    #colQuote select#quotes-id {
        width: 57%;
    }
    #colQuote input.loading { /* overwritten */
        display: inline;
        float: none;
        width:  16px;
        height: 16px;
        background-position: 0 -60px; /* white */
    }

/* Vertical Spacing
------------------------------------------------- */
#colBookmark {
    margin-top: 6px;
}
body      #colAuthor dl#author,
body.view #colAuthor #counter {
    margin-bottom: 12px;
}
body#viewUsers #colAuthor {
    margin-bottom: 36px;
}

#colQuote {
    margin-bottom: 36px;
}

/* Variation
------------------------------------------------- */
body.view #colAuthor {
    margin-top: 2.8em;
}
    body.view #colAuthor #counter.emBox,
    body.my   #colAuthor #counter div.emBox {
        margin-left: 14px;  /* left 2+12 */
        margin-right: 16px; /* right 4+12 */
        text-align: center;
    }
    body#viewGroups dl#author dd,
    body#viewQuotes dl#author dd {
        width: 163px; /* 287-16x2-80-12 */
        line-height: 1.77em;
    }
    body#viewGroups dl#author dd strong,
    body#viewQuotes dl#author dd strong {
        font-weight: bold;
    }
    body.view #colAuthor dl#btStar,
    body.my   #colAuthor #counter {
        padding-bottom: 18px; /* 6:bg+12 */
        background: url(http://static.esaura.cc/www020/css/img/bg_wrappers1.png) no-repeat -1176px 100%; /* bottom:287x18 */
    }
    body.view #colAuthor dl#btStar {
        width: 257px; /* 287-(16+14) */
        padding-left: 14px; /* left 2:bg+12 */
        padding-right: 16px; /* right 4:bg+12 */
    }


/* 
--------------------------------------------------
 #bottom
--------------------------------------------------*/

/* Typography / Colors
------------------------------------------------- */
#bottom div.pickups ul li,
#bottom div.pickups a.arrow { font-size: 93%; /* 12px */ }

/* Structure
------------------------------------------------- */
/* div.pickups */
#bottom div.pickups {
    float: left;
    width: 286px;
    margin-right: 12px;
}

/* div.users */
#bottom div.users {
    clear: both;
}
    #bottom div.users ul {
        text-align: center;
    }
    #bottom div.users ul li {
        margin-right: 7px;
    }

/* 
--------------------------------------------------
 #toTop
--------------------------------------------------*/

/* Typography / Colors
------------------------------------------------- */
#content a#toTop {
    color: #554738; /* brown */
    font-size: 93%; /* 12px */
}

/* Structure
------------------------------------------------- */
#content a#toTop {
    padding: 12px 42px 12px 0; /* right 18+12+12px */
    background: url(http://static.esaura.cc/www020/css/img/icons.png) no-repeat 914px -188px; /* 12x12, x 950-(24+12), y 200-12 */
    text-align: right;
}
    #content a#toTop:hover {
        background-color: #f1f0e6; /* l-brown */
    }

/* 
--------------------------------------------------
 #footer
--------------------------------------------------*/

/* Structure
------------------------------------------------- */
/* ul */
#footer ul {
    float: left;
}

/* address */
#footer address {
    float: right;
    padding-left: 22px; /* 16:bg+6px */
    background: url(http://static.esaura.cc/www020/css/img/icon_esaura16.png) no-repeat top left; /* 16x16 */
}

/* 
--------------------------------------------------
 PRINT (not implemented yet)
--------------------------------------------------*/
@media print {

}

/* 
--------------------------------------------------
 SETTINGS FOR IE (Common)
--------------------------------------------------*/
/* #navtop */
* html #navtop p#jsOff {
    padding-bottom: 12px;
    margin-bottom: 0;
}
*:first-child+html #navtop p#jsOff {
    padding-bottom: 12px;
    margin-bottom: 0;
}

/* divider '|' */
* html ul.navigation li, * html dl.navigation dd {
    padding-left:  14px; /* 2:bg+12px */
    padding-right: 6px;
    border-left: 1px solid #ccc098; /* ll-brown */
}
*:first-child+html ul.navigation li, *:first-child+html dl.navigation dd {
    padding-left:  14px; /* 2:bg+12px */
    padding-right: 6px;
    border-left: 1px solid #ccc098; /* ll-brown */
}
    *:first-child+html ul.navigation li:first-child {
        padding-left: 0;
        border: none;
    }

/* content property -> none */
* html             body#viewQuestions #main h2,
* html             body#viewClips   #main h2,
* html             body#viewGroups  #main h2,
* html             body#viewQuotes  #main h2,
* html             body.view #main h3.title { padding-left: 0; /* reset default */ }
*:first-child+html body#viewQuestions #main h2,
*:first-child+html body#viewClips   #main h2,
*:first-child+html body#viewGroups  #main h2,
*:first-child+html body#viewQuotes  #main h2,
*:first-child+html body.view #main h3.title { padding-left: 0; /* reset default */ }

/* floated object */
* html             body.edit #form div.section { margin-bottom: 24px; /* =.par */ }
*:first-child+html body.edit #form div.section { margin-bottom: 24px; /* =.par */ }

/* clearfix IE5.5-IE7 */
* html             .wrapperTop,
* html             .wrapperBody,
* html             .wrapperBottom,
* html             .wrapperTop2,
* html             .wrapperBody2,
* html             .wrapperBottom2 { zoom: 1; }
*:first-child+html .wrapperTop,
*:first-child+html .wrapperBody,
*:first-child+html .wrapperBottom,
*:first-child+html .wrapperTop2,
*:first-child+html .wrapperBody2,
*:first-child+html .wrapperBottom2 { zoom: 1; }
#navtop,
#content,
#content #main,
#content #bottom,
#footer,
.section {
    zoom: 1;
}

/* 
--------------------------------------------------
 SETTINGS FOR IE6
--------------------------------------------------*/
/* margin: auto; */
* html body {
    text-align: center;
}
* html #header div.section,
* html #navtop,
* html #content,
* html #footer {
    text-align: left;
}
* html body.index form#searchCat {
    margin-left: 150px;
}

/* header */
* html #header a#top {
    float:       left;
    position:    relative;
    margin-left: -9999px;
}
* html #header h1 span {
    height: 47px;
}

/* width */
* html #header div.section {
    width: 950px;
}
* html #navtop,
* html #content,
* html #footer {
    width: 962px;
}
* html #header form#searchAll input.textSearch {
    width: 195px;
}
* html #navtop dl#navMenu dd#tabUpload a {
    width: 128px;
}
* html body.index form#searchCat dl dd input.textSearch {
    width: 322px;
}
* html body.view #secReplies {
    width: 604px;
}
* html #colAuthor dl#author {
    width: 309px;
}
* html body.view #colAuthor dl#btStar {
    width: 287px;
}

/* fixed width */
* html #navtop dl.Tab dt,
* html body.index form#searchCat dl dt {
    font-size: 14px;
}

/* Top page layout */
* html body#index div#main div.section {
    width: 100%;
}

/* Bottom layout */
* html #bottom div.pickups {
    width: 268px;
}

/* negative margin */
* html #colAuthor dl#author,
* html body.view #secEntry,
* html body.view #secReplies {
    position: relative; 
}
* html body.view #secReplies {
    margin-left: -12px; /* overwritten */
}

/* instead of overflow hidden */
* html body.index ul.Entries li h4,
* html body.index ul.Entries li p,
* html body.index ul.Entries li dl,
* html #bottom div.pickups ul li {
    word-break: break-all;
}
* html body#viewClips ul#replies {
    width: auto;
    height: auto;
    overflow: visible;
}

/* list of entries -> simple list */
* html div.pickups ul li {
    padding-left: 20px; /* 14+6px for bg */
    background: url(http://static.esaura.cc/www020/css/img/icons.png) no-repeat -600px -295px; /* bullet:14x14, y+5px */
}
    *:first-child+html div.pickups ul li {
        padding-left: 20px; /* 14+6px for bg */
        background: url(http://static.esaura.cc/www020/css/img/icons.png) no-repeat -600px -295px; /* bullet:14x14, y+5px */
    }
* html #secSide div.pickups ul li {
    background-position: -600px -293px; /* y+5px */
}
    *:first-child+html #secSide div.pickups ul li {
        background-position: -600px -293px; /* y+5px */
    }

/* 
--------------------------------------------------
 SETTINGS FOR IE7
--------------------------------------------------*/
/* form#searchAll/searchCat */
*:first-child+html #header form#searchAll input.textSearch,
*:first-child+html body.index form#searchCat dl dd input.textSearch {
    height: 1.385em; /* 18px */
}

/* frame */
*:first-child+html body#viewClips ul#replies,
*:first-child+html body#viewClips ul#replies.noFrame {
    width: 581px; /* overwritten */
}

/* divider '>' */
*:first-child+html ul.navBcrumb li {
    padding-left: 1.67em; /* (8:bg+12)/12 */
    background: url(http://static.esaura.cc/www020/css/img/icons.png) no-repeat -600px -71px; /* '>':8x8 */ 
}
    *:first-child+html ul.navBcrumb li:first-child {
        padding-left: 0;
        background: none;
    }
    *:first-child+html body.index #searchResult ul.navBcrumb {
        margin-left: 12px;
    }
    *:first-child+html body.index #searchResult ul.navBcrumb li {
        background-position: -460px 0.17em;
    }