/* (C) RoREN v2 Stylesheet */
span.contentWrapper {
	display: block; 
	clear: both;
	font-size: 0px;
	margin: 0px;		
}
/* floated column layout */
div.leftCol {
    float: left;
}
div.rightCol {
    float: right;
}
/* Forms Containers */
div.formSectionTitle {
	margin: 20px 0px 10px;
	padding: 4px 10px 5px;
	width: 710px;		
	background: #ccc;
	font: normal bold 12px Tahoma, Verdana, Arial, sans-serif;
	text-transform: capitalize;
}
/* three columns tables */
table.threeColumnsFormTable {
	border-collapse: collapse;		
	width: 730px; height: auto;
}
table.threeColumnsFormTable td {
	border: 0px solid #000;
}
table.threeColumnsFormTable td.fieldLabel {
	padding: 3px 3px 3px 0px;
	width: 14%;
	text-align: right;
	vertical-align: top;
	text-transform: capitalize;
}
table.threeColumnsFormTable td.fieldContainer {
	padding: 3px 0px 3px 3px;
	width: 19%;
	vertical-align: top;
}
table.threeColumnsFormTable td.checkboxOption {
	padding: 3px 0px 3px 3px;
	width: auto;
	vertical-align: top;
}
table.threeColumnsFormTable td.formDivizor {
	padding: 0px 3px 0px 3px;
	text-transform: capitalize;			
}

table.threeColumnsFormTable td.rightButtonsContainer {
	padding: 10px 5px;
	text-align: right;
}
/* two columns table */
table.twoColumnsFormTable {
	border-collapse: collapse;
	width: 730px;		
}
table.twoColumnsFormTable td {
	border: 1px solid #000;
}
table.twoColumnsFormTable td.fieldLabel {		
	padding: 2px 4px;
	width: 20%;
	text-align: right;
	vertical-align: top;
}
table.twoColumnsFormTable td.fieldContainer {
	padding: 2px 4px;
	width: 30%;
	vertical-align: top;
}
table.twoColumnsFormTable td.formSplitter {
	padding: 2px 5px;
}
table.twoColumnsFormTable td.rightButtonsContainer {
	padding: 5px;
	text-align: right;
}
/* DRAWER DEFINITIONS */
div#body div.drawerHeader {
    padding:                4px 31px 3px 31px;
    height:                 16px;
    background-image:       url("../slices/roren_gray_logo.gif");
    background-position:    8px 4px;
    background-repeat:      no-repeat;
    background-color:       #788085;
    color:                  #FFF;
    font:                   normal bold 12px Arial, sans-serif;
}
div#body div.drawer {
    margin:                 0px 0px 7px 0px;
    border-top:             1px solid #BABCBE;
    border-right:           1px solid #BABCBE;
    border-bottom:          1px solid #BABCBE;
    border-left:            1px solid #BABCBE;
    padding:                4px 0px;
}
div#body div.lightGrayDrawer {
    background:             #F3F6F8;
}
div#body div.darkGrayDrawer {
    background:             #ECEEF0;
}
/* FILTERS DEFINITIONS */
div#body div#filtersBar {
    font: normal normal bold 12px Arial, sans-serif;
}
div#body span.filterTitle {
    display:                block;
    margin:                 0px 30px 1px 30px;
    font:                   normal normal bold 12px Arial, sans-serif;        
    color:                  #677074;
}
div#body li.filterOption {
    list-style-image:       none;
    list-style-position:    outside;
    display:                block;
    margin:                 0px 15px 0px 15px;
    padding:                0px 0px 0px 15px;
    font:                   normal normal normal 12px Arial, sans-serif;
}
div#body li.regularFilterOption {
    list-style-position:    outside;
    list-style-type:        none;
    background-image:       url("../slices/roren_filter_red_arrow.gif");
    background-repeat:      no-repeat;
    background-position:    left center;
    color:                  #000000;
}
div#body li.regularFilterOption a span {
    color:                  #677074;
    text-decoration:        none;
    font-weight:            normal;
}
div#body li.regularFilterOption a:hover span {
    color:                  #D20003;
    text-decoration:        none;        
}
div#body li.selectedFilterOption {
    list-style-position:    outside;
    list-style-type:        none;
    background-image:       url("../slices/roren_filter_black_gray_arrow.gif");
    background-repeat:      no-repeat;
    background-position:    left center;
    color:                  #788085;
}
div#body li.selectedFilterOption a span {
    color:                  #788085;
    text-decoration:        none;
}
div#body li.regularFilterOption span.teaser {
    color:                  #E1001B;
}
div#body li.selectedFilterOption span.teaser {
    color:                  #788085;
}
/* PAGER DEFINITIONS */
div#body div.regularPager span, div#body div.regularPager a span {
    font:                   bold 11px Tahoma, sans-serif;
    color:                  #788085;
    text-decoration:        none;
    text-align:             center;
}
div#body div.regularPager a:hover span {
    color:                  Black;
}
div#body div.regularPager span.selectedPage {
    margin:                 0px 1px;
    padding:                1px 3px 2px;
    color:                  #FFFFFF;
    background:             #f76a04;
}
div#body div.regularPager a.firstPage {
    margin:                 0px 13px;
    padding:                0px 0px 0px 14px;
    background-image:       url("../slices/roren_first_avatar.gif");
    background-repeat:      no-repeat;
    background-position:    left bottom;
}
div#body div.regularPager a.prevPage {
    margin:                 0px 10px;
    padding:                0px 0px 0px 10px;
    background-image:       url("../slices/roren_prev_avatar.gif");
    background-repeat:      no-repeat;
    background-position:    left center;
}
div#body div.regularPager a.pageIndex span {
    margin:                 0px 1px;
    padding:                1px 3px 2px;
    font-size:              12px;
}
div#body div.regularPager a.pageIndex:hover span {
    color:                  #FFFFFF;
    background:             #E1001B;
}
div#body div.regularPager a.nextPage {
    margin:                 0px 10px;
    padding:                0px 10px 0px 0px;
    background-image:       url("../slices/roren_next_avatar.gif");
    background-repeat:      no-repeat;
    background-position:    right center;
}
div#body div.regularPager a.lastPage {
    margin:                 0px 13px;
    padding:                0px 14px 0px 0px;
    background-image:       url("../slices/roren_last_avatar.gif");
    background-repeat:      no-repeat;
    background-position:    right bottom;
}    
/* div-based three column layout */
.band {
    width: 100%;
}
.ibc /* inline-block container */ {
    word-spacing: -1em;
}
.ibc p, .ibc h1, .ibc h2, .ibc h3 {
    word-spacing: normal;
}
.ib {
    display: inline-block;
    vertical-align: top;
}
div.threecol-singlecol {
    width: 34%;
    height: 100%;
}
div.threecol-doublecol {
    width: 66%;
    height: 100%;
}
/* div-based two column layout */
div.twocol-singlecol {
    width: 49%;
    height: 100%;
    vertical-align: top;
}
div.twocol-doublecol {
    width: 100%;
    height: 100%;
    vertical-align: top;
}
/* cool BALOON */
div.baloon {
    word-spacing: -1em;
    width: 100px;
}
div.baloon #left {
    background-image: url("../slices/baloon-left.png");
    width: 12px;
    height: 80px;
    padding: 10px 0px 0px 0px;
}
div.baloon #right {
    background-image: url("../slices/baloon-right.png");
    width: 12px;
    height: 80px;
    padding: 10px 0px 0px 0px;
}
div.baloon #middle {
    word-spacing: normal;
    background-image: url("../slices/baloon-middle.png");
    background-repeat: repeat-x;
    width: 76px;
    height: 80px;
    padding: 10px 0px 0px 0px;
    color: #7C8489;
}
div.baloon #toprow {
    font: normal normal bold 20px Arial,sans-serif;
}
div.baloon #middlerow {
    font: normal normal normal 12px Arial,sans-serif;
}
div.baloon #bottomrow {
    font: normal normal normal 14px Arial,sans-serif;
    margin-top: 8px;
}
/* scoring baloon */
div.score .slide {
    font: normal normal normal 11px Arial,sans-serif;
    display: none;
}
div.score #slider {
    font: normal normal normal 11px Arial,sans-serif;
    width: 126px;
}
/* MEMBER BOX */
div#memberBox {
    border: solid 1px #BABCBE;
    background-color: #ECEEF0;
}
div#memberBox .photoframe {
    margin: 5px 0px 5px 15px;
}
div#memberBox #memberInfo {
    margin: 5px 0px 5px 15px;
}    
/* MEMBER MENU */
div#memberMenu {
    margin: 10px 0px 10px 0px;
    width: 100%;
}
div#memberMenu li.menuOption {
    font: normal normal bold 11px Verdana,sans-serif;
    list-style-type: none;
    background: url("../slices/roren_filter_red_arrow.gif");
    background-position: left center;
    background-repeat: no-repeat;
    padding: 1px 2px 1px 15px;
    width: 100%;
}
div#memberMenu li.menuOption:hover {
    
}
div#memberMenu li.menuOption a {
    color: #000000;
    text-decoration: none;
}
div#memberMenu li.menuOption a:hover {
    color: #FFFFFF;
    background-color: #E1001B;
    text-decoration: none;
}
/* BUTTON with ROUNDED CORNERS */
a.hip-button{
    background: transparent url("../slices/hip-button-left.gif") no-repeat top left;
    display: block;
    float: left;
    font: normal normal normal 16px Tahoma,sans-serif;
    color: #000000;
    line-height: 30px; /* line-height + (top and bottom span padding) must equal height of button background*/
    height: 39px; /* Height of button background height */
    padding-left: 20px; /* Width of left menu image */
    text-decoration: none;
}
a:link.hip-button, a:visited.hip-button, a:active.hip-button {
}
a.hip-button span {
    background: transparent url("../slices/hip-button-right.gif") no-repeat top right;
    display: block;
    padding: 5px 40px 4px 2px; /*Match right padding to value of 'padding-left' above*/
}
a.hip-button:hover { 
    background-position: bottom left;
    text-decoration: none;
}
a.hip-button:hover span { 
    background-position: bottom right;
}    
a.hip-button:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/* BUTTON with ROUNDED CORNERS */
a.roundedbutton{
    background: transparent url("../slices/button-left.gif") no-repeat top left;
    display: block;
    float: left;
    font: normal normal bold 11px Verdana,sans-serif;
    line-height: 16px; /* line-height + (top and bottom span padding) must equal height of button background*/
    height: 24px; /* Height of button background height */
    padding-left: 5px; /* Width of left menu image */
    text-decoration: none;
}
a:link.roundedbutton, a:visited.roundedbutton, a:active.roundedbutton {
    color: #FFFFFF;
}
a.roundedbutton span {
    background: transparent url("../slices/button-right.gif") no-repeat top right;
    display: block;
    padding: 4px 7px 4px 2px; /*Match right padding to value of 'padding-left' above*/
    color: #FFFFFF;
}
a.roundedbutton:hover { 
    background-position: bottom left;
    text-decoration: none;
}
a.roundedbutton:hover span { 
    background-position: bottom right;
    text-decoration: none;
    color: #FFFFFF;
}    
a.roundedbutton:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
a.ovalbutton{
    background: transparent url("../slices/oval-gray-left.gif") no-repeat top left;
    display: block;
    float: left;
    font: normal 12px Verdana;
    line-height: 16px; /* line-height + (top and bottom span padding) must equal height of button background*/
    height: 24px; /* Height of button background height */
    padding-left: 11px; /* Width of left menu image */
    text-decoration: none;
}
a:link.ovalbutton, a:visited.ovalbutton, a:active.ovalbutton{
    color: #494949; /*button text color*/
}
a.ovalbutton span{
    background: transparent url("../slices/oval-gray-right.gif") no-repeat top right;
    display: block;
    padding: 4px 11px 4px 0; /*Match right padding to value of 'padding-left' above*/
}
a.ovalbutton:hover{ 
    background-position: bottom left;
}
a.ovalbutton:hover span { 
    background-position: bottom right;
    color: black;
}    
/* HIP TAB */
div.hip-tab {
    background-image: url("../slices/hip-tab-bg.png");
    width: 100%;
}
ul.hip-tab {   
    height: 50px;
    width: 100%;
    list-style: none;
    margin: 0px;
    padding: 0px;
}
ul.hip-tab a {
    background: #F9F8F7 url("../slices/hip-tab.png");
    display: block;
    float: left;
    height: 39px;
    padding-left: 10px;
    text-decoration: none;
    color: white;
    font: 14px Tahoma,sans-serif;
}
ul.hip-tab a:hover {
    background-color: #F9F8F7;
    background-position: 0 -120px;
    color: white;
}
ul.hip-tab a:hover span {
    background-position: 100% -120px;
    background-color: #F9F8F7;
    color: white;
}
ul.hip-tab li {
    float: left;
    margin: 10px 2px 0px 0px;
    color: white;
}
ul.hip-tab li.current a {
    background-color: #F9F8F7;
    background-position: 0 -60px;
     color: white;
}
ul.hip-tab li.current span {
    background-position: 100% -60px;
    background-color: #F9F8F7;
    color: white;
}
ul.hip-tab span {
    background: url("../slices/hip-tab.png") 100% 0;
    display:block;
    line-height: 39px;
    padding-right: 10px;
    background-color: #F9F8F7;
}
/* INPUT ELEMENTS */
input.read-only {
    border-width: 0px;
}
input.sub {
    font-size: 9px;
    color: Gray;
}
/* LOADING PANEL */
.loadingPanel {
    background-color: White;
    position: relative;
}
.loadingPanel img {
    position: absolute;
    top: 48%;
    left: 48%;
}
.articlelp {
    background-color: White;
    position: relative;
}
.articlelp img {
    position: absolute;
    bottom: 120px;
    left: 48%;
}