/* CSS Document */

/*
 =========================================================
 HTML tags redesign
*/

body {
    text-align: center;
    background: white url(general/bg.jpg) repeat-x 0 1px;
    font-size: 12px;
    padding: 0;
    margin: 0;
}

* {
    line-height: 14px;
    font-family: "Arial","Geneva", Sans-serif;
    margin: 0; 
    padding: 0;
}

h1,h2,h3,h4,h5,h6 {
    font-family: "Trebuchet MS", "Helvetica", Sans-serif;
}

h1,h2,h3 {
    color: #3c1869;
    font-weight: bold;
    text-decoration: none;
}

h4,h5,h6 {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

h1 { font-size: 18px; line-height: 24px; }
h4 { font-size: 16px; line-height: 22px; color: #3c1869; } 
h2,h5 { font-size: 14px; line-height: 20px; }
h5 { color: #130126; }
h3,h6 { font-size: 12px; line-height: 18px; } 

h1 img, 
h4 img {
    vertical-align: middle;
    margin-right: 10px;
}

ul { margin: 0; padding: 0; }
ul li,  
ul.white li,
ul.black li { 
    margin: 0; padding: 0; 
    list-style: none; 
    text-indent: 8px;
    background: transparent url(/images/general/li-white.jpg) no-repeat 1px 7px;
    color: inherit;
}

ul.black li { background: transparent url(/images/general/li-black.jpg) no-repeat 1px 7px; }

ul.table li { background: transparent; }

img { border: 0; }

div { display: block; }
br  { clear: both; }

a,
a:visited,
a:active,
a:hover {
    line-height: inherit;
    text-decoration: underline;
    font-size: inherit;
}

a:hover { 
    text-decoration: none; 
    cursor: pointer;
    color: #3c1869;
}

#header a:hover { 
    color: #aaaaaa;
}

ul.index li a { 
    text-decoration: none;
}

ul.index li a:hover { 
    text-decoration: underline;
}

hr {
    height: 1px;
    line-height: 1px;
    font-size: 0;
    width: 95%;
    margin-left: 2.5%;
    background: white;
    border: 0;
    background: url(/images/general/dotted_bar.jpg) repeat-x;
}


table,
table tr, 
table tr td, table tr th { 
    border-collapse: collapse;
    border: 1px solid #130126;
    padding: 5px;
}

table.none,
table.none tr, 
table.none tr td, table.none tr th {
    border: 0;
}

table.row,
table.row tr, 
table.row tr td, table.row tr th {
    border-width: 1px 0px 1px 0px;
}

.flat {
   border: 1px solid #3c1869;
   border: 1px solid #b2b2b2; 
    padding:2px;
}

.short {
    width: 120px;
}

/* Specific Main Left part redesigns */
#mainLeft hr { /*background: #130126;*/ }
#mainLeft a:hover { color: #3c1869; }

/*
 =========================================================
 Basic classes (common, can be used anywhere)
*/

.block { display: block; }
.hidden { display: none; }
.noclear { clear: none;  }

.marged { margin: 4px; }
.Bmarged { margin: 0 10px 0 10px; }
.padded { padding: 4px; }

.left   { text-align: left; }
.center { text-align: center; }
.justify { text-align: justify; }
.right  { text-align: right; }
.middle { vertical-align: middle; }
.top    { vertical-align: top; }
.bottom { vertical-align: bottom; }

.bold { font-weight: bold; }
.italic { font-style: italic; }

.small { font-size: 10px; }
a.small { font-size: 10px; }

.Fleft  { display: block; float: left; }
.Fright { display: block; float: right; }
.Fbottom { position: relative; display: block; bottom: 0px; } 

.Lpush { margin-left: 15px;}

.full { width: 100%; }
.half75 { width: 75%; }
.half66 { width: 66%; }
.half { width: 50%; }
.half45 { width: 45%; }
.half40 { width: 40%; }
.half33 { width: 33%; }
.half30 { width: 30%; }

.white  { color: #fff; }
.Swhite { color: #ccc; }
.black  { color: #000; }
.Dgrey  { color: #130126; }
.grey   { color: #7e7e7e; }
.purple { color: #3c1869; }
.purpleBG    { background: #3c1869; }
.greyBG      { background: #7e7e7e; }
.lightgreyBG { background: #f6f6f6; }
.orangeBG    { background: #ffebcd; }
.green { color: green }
.red   { color: red }




/* Tabbed left menu */
div.tabsHead {
    border-bottom: 1px solid #8a8a8a;
    height: 23px;
    line-height: 23px;
    padding-bottom: 3px;
}

div.tabsBody {
    display: none;
}

div.tabs a,
div.tabs a:visited,
div.tabs a:active,
div.tabs a.selected {
    line-height: 23px;
    text-decoration: none;
    margin: 0px 1px 0px 1px;
    height: 23px;
}

div.grey a {
    color: black;
    background-color: grey;
}

div.grey a:hover,
div.grey a.selected,
div.grey a:hover,
div.grey a.selected {
    background-color: lightGrey;
}

div.orange a {
    color: black;
    background-color: orange;
}

div.orange a:hover,
div.orange a.selected,
div.orange a:hover,
div.orange a.selected {
    background-color: yellow;
}

div.white a {
    color: black;
    background-color: lightGrey;
}

div.white a:hover,
div.white a.selected,
div.white a:hover,
div.white a.selected {
    background-color: white;
}


/*
 =========================================================
 Structure elements
*/

/* Header part*/
#header {
    width: 976px;   /* bigger because image bar is actually 976px with shadow */
    margin-left: auto; 
    margin-right: auto;
    margin-top: 4px;
    text-align: left;
}

#header a {
    margin-left: 17px;
}

#header div.bar {
    width: 976;
    height: 38px;
    text-align: right;
    background: white url(/images/general/bar.jpg) no-repeat 0 0;
    padding-right: 15px;
}

#header div.bar a,
#header div.bar span {
    margin-left: 5px;
    text-align: center;
    line-height: 36px;
}

/* Main */
#main,
#mainEmpty,
#mainSplit {
    width: 980px;
    margin-left: auto; 
    margin-right: auto;
    margin-top: 40px;
    text-align: left;
    background: white url(general/shadow-middle.jpg) repeat-y 0 0;
}

#mainEmpty {
    display: none;
}

#mainFull { 
    display: block;
    margin-left: 10px;
    display: block;
    width: 960px;
    _width: 955px;
    min-height:370px;
}

#mainLeft {
    display: block;
    margin-left: 8px;
    width: 560px;
    _width: 555px;
    float: left;
}

#mainRight {
    display: block;
    margin-right: 5px;
    _margin-right: 3px;
    width: 398px;
    _width: 393px;
    margin-top:-4px;
    float: right;
    background: #8a878C url(/images/general/shadow-split-rbg.jpg) no-repeat 0 0 ;
    min-height:370px;
}

#mainEmpty div.body {
    margin-left: 10px;
    display: block;
    width: 960px;
    _width: 955px;
}

#mainSplit div.top,
#mainSplit div.bottom,
#mainEmpty div.top,
#mainEmpty div.bottom,
#main div.top,
#main div.bottom {
    line-height: 8px;
    width: 100%;
    height: 8px;
    padding: 0; 
    margin: 0;
    background: red;
}

#main div.top { background: white url(general/shadow-top.jpg) no-repeat 0 100%;}
#main div.bottom { background: white url(general/shadow-bottom.jpg) no-repeat 0 0;}

#mainEmpty div.top { background: white url(general/shadow-top.jpg) no-repeat 0 100%;}
#mainEmpty div.bottom { background: white url(general/shadow-bottom.jpg) no-repeat 0 0;}

#mainSplit { background: white url(general/shadowSplit-middle.jpg) repeat-y 0 0; }
#mainSplit div.top { background: white url(general/shadowSplit-top.jpg) no-repeat 0 100%;}
#mainSplit div.bottom { background: white url(general/shadowSplit-bottom.jpg) no-repeat 0 0;}

div.indexTop {
    display: block;
    background: url(index/index_ban.jpg) no-repeat 50% 50%;
    height: 115px;
    width: 970px;
    margin: auto;
}



/* Footer */

.footer {
    width: 950px;
    margin-left: auto;
    margin-right: auto;
}

/* ToolTip */

.multiBoxFrame {
    position: absolute;
    z-index: 1000;
    top: 50%;
    left: 50%;

    display: 'none';

    -moz-border-radius:     10px;
    -webkit-border-radius:  5px;
    -webkit-box-shadow:     0 0 5px rgba(0, 0, 0, 0.5);
}

#avatarUpload {
    position:               fixed;
    z-index:                1000;
    width:                  400px;
    top:                    30%;
    left:                   50%;
    margin-left:            -200px;
    padding:                10px 10px 10px 10px;
    -moz-border-radius:     10px;
    -webkit-border-radius:  5px;
    -webkit-box-shadow:     0 0 5px rgba(0, 0, 0, 0.5);
    background-color:       #FFFFFF;
    border:                 1px solid #000000
}

.roar-body {
    position:               absolute;
    font:                   12px/14px "Lucida Grande", Arial, Helvetica, Verdana, sans-serif;
    color:                  #fff;
    text-align:             left;
    z-index:                999;
}

.roar {
    position:               absolute;
    width:                  400px;
    cursor:                 pointer;
}

.roar-bg {
    position:               absolute;
    z-index:                1000;
    width:                  100%;
    height:                 100%;
    left:                   0;
    top:                    0;
    background-color:       #000;
    -moz-border-radius:     10px;
    -webkit-border-radius:  5px;
    -webkit-box-shadow:     0 0 5px rgba(0, 0, 0, 0.5);
}

.roar-body-ugly .roar {
    background-color:       #333;
}

.roar-body-ugly .roar-bg {
    display:                none;
}

.roar h3 {
    position:               relative;
    padding:                15px 10px 0;
    margin:                 0;
    border:                 0;
    font-size:              13px;
    color:                  #fff;
    z-index:                1002;
}

.roar p {
    position:               relative;
    padding:                10px 10px 15px;
    margin:                 0;
    font-size:              12px;
    color:                  #fff;
    z-index:                1002;
}

/* Dotted elements */

.dotted
{
    padding-bottom:4px;
    background: url(/images/general/dotted_bar.jpg) 100% 100% repeat-x;
}

/* Buttons */

a.button,
a.yesButton,
a.noButton
{
    height:18px;
    display:block;
    text-align:center;
    text-decoration:none;
    border:0px;
    padding:0;
    padding-top:4px;
    padding-left:10px;
    padding-right:7px;
    *padding-right: 0px;
    color:white;
    font-weight:bold;
    background: url(/images/general/button.gif) no-repeat;
}

a.yesButton,
a.noButton
{
    background: url(/images/general/yes_button.gif) no-repeat;
    padding-left:35px;
    text-align:left;
}

a.noButton
{
    background: url(/images/general/no_button.gif) no-repeat;
}

a.button:hover,
#mainLeft a.button:hover,
a.yesButton:hover,
a.noButton:hover {
    background-position: 0% 100%;
    color:white;
}


a.button div.buttonRight,
a.yesButton div.buttonRight,
a.noButton div.buttonRight
{
    height:22px;
    display:block;
    float:right;
    width:3px;
    margin-top:-4px;
    margin-right:-10px;
    *margin-right:-40px;
    background: url(/images/general/button.gif) no-repeat 100% 0%;
}

a.button:hover div.buttonRight {
    background-position:100% 100%
}

a.smallButton
{
    margin-left:5px;
    height:16px;
    font-size:10px;
    display:block;
    text-align:center;
    text-decoration:none;
    border:0px;
    padding:0;
    padding-left:13px;
    *padding-left:3px;
    padding-right:10px;
    *padding-right:0px;
    padding-top:1px;
    color:white;
    font-weight:bold;
    background: url(/images/general/small_button.gif) no-repeat;
}

a.smallButton div.smallButtonRight
{
    background: url(/images/general/small_button.gif) no-repeat 100% 0%;
    height:17px;
    display:block;
    float:right;
    width:3px;
    margin-right:-13px;
    *margin-right:-40px;
    margin-top:-1px;
}

a.smallButton:hover,
#mainRight a.smallButton:hover {
    background-position: 0% 100%;
    color:white;
}

a.smallButton:hover div.smallButtonRight,
#mainRight a.smallButton:hover div.smallButtonRight {
    background-position: 100% 100%;
}

table.dynamic,
table.dynamic tr,
table.dynamic td,
table.dynamic th
{
    border-color: #e8e8e8;
}


table.dynamic tr.bg1
{
    background:white;
}

table.dynamic tr.bg2
{
    background:#e8e8e8;
}

table.dynamic tr.bg1:hover,
table.dynamic tr.bg2:hover
{
    background:#89878C;
    color:white;
}

table.third,
table.third tr,
table.third tr th, 
table.third tr td {
    border-collapse: collapse;
}

table.third tr td.thirdCenter {
    border-width: 0px 1px 0px 1px;
    border-style: dotted;
    border-color: black;
}

/* Save profile pref */
.savePref {
    margin:auto;
    width:980px;
    height:30px;
    background:url(/images/general/empty_bar.jpg) no-repeat;
    padding-top:8px;
}


/*
 =========================================================
 End
*/