/*---------------------------------------
 cp.css - MediaPro Control Panel CSS File
 Copyright 2007 Talldude Networks LLC.
 Additions by Huw Williams | Oinkba.com
 ---------------------------------------*/

body {
font-family:Tahoma,Verdana,Helvetica;
background-color: #111;
font-size:12px;
color:#333;
padding-top:0px;
padding-bottom:30px;
margin:0px;
}

a {
color:#0099FF;
text-decoration:none;
}

a:hover {
color:#990000;
text-decoration:none;
}

img {
border:0px;
vertical-align:middle;
}

table{
border:0px;
}

.inf {
color:#093;
}

.min {
color:#BA4B0D;
}

.maj {
color:#C60;
}

.cri {
color:#F00;
}

.jmFont3 {
color:#BA4B0D;
}

.mono {
font-family:monospace;
line-height:20px;
}

.pager {
font-size:10px;
}

.wrapper {
width: 980px;
margin: 0px auto;
padding: 0px;
background-color: #FFF;
}


/* --- HEADER --------- */

.header {
background-color: #000;
padding: 5px;
margin: 0px;
}

.welcome {
background: #FFF url("../images/menu_bg.png") repeat-x;
height: 30px;
width: 980px;
margin: 0px auto;
}

.main {
vertical-align:top;
width:820px;
}

.menu {
background:#F0F0F0 url("images/panel_header_980.png") no-repeat scroll top right;
font-size:12px;
font-weight:bold;
vertical-align:top;
line-height:60px;
padding:15px 5px 12px 12px;
border-top:1px solid #DEDEDE;
border-left:1px solid #DEDEDE;
border-bottom:1px solid #DEDEDE;
text-transform:capitalize;
width:160px;
}

.category {
font-weight:bold;
margin:0px auto;
vertical-align:top;
padding-left:5px;
text-transform:capitalize;
}

.icon {
display:block;
float:left;
font-size:14px;
text-transform:capitalize;
padding:2px;
width:146px;
text-align:center;
line-height:25px;
border:1px solid #DEDEDE;
margin: 2px;
}

.image_header {
background-color: #EEE;
font-size: 14px;
line-height: 25px;
width: 980px;
margin: 0px auto;
}

.help {
position:absolute;
float:right;
z-index:1;
visibility:hidden;
padding:10px;
width:250px;
background:#F0F0F0;
border:2px solid #DEDEDE;
font-size:12px;
text-align:left;
}

.head_left {
padding:4px;
background:#EEE;
border-top:1px solid #DEDEDE;
border-bottom:1px solid #DEDEDE;
font-size:15px;
font-weight:bold;
color:#999933;
height:20px;
}

.head_right {
padding:2px;
background:#EEE;
border-top:1px solid #DEDEDE;
border-bottom:1px solid #DEDEDE;
text-align:right;
font-size:10px;
color:#333;
}

.left {
background:#DDD;
text-align:right;
vertical-align:middle;
padding:6px;
text-transform:capitalize;
font-size:12px;
color:#333;
border-bottom:1px solid #DEDEDE;
}

.sub_left {
font-weight:normal;
font-size:9px;
}

.center {
height:40px;
text-align:center;
}

.right {
background:#F0F0F0;
padding:3px 5px 3px 5px;
font-size:11px;
color:#333;
vertical-align:middle;
}

.divider{
height:0px;
background-color:#333;
}

.note {
text-align:center;
height:25px;
padding:3px;
font-size:11px;
color:#333;
}

.jr_success {
background:#000;
border:1px solid #DEDEDE;
text-align:center;
height:60px;
text-transform:uppercase;
font-weight:bold;
font-size:24px;
color:#9C0;
}

.jr_warning {
background:#000;
border:1px solid #DEDEDE;
text-align:center;
height:60px;
text-transform:uppercase;
font-weight:bold;
font-size:16px;
color:#F00;
}

.jr_error {
background:#000;
border:1px solid #DEDEDE;
text-align:center;
height:60px;
text-transform:uppercase;
font-weight:bold;
font-size:24px;
color:#F00;
}

.tab {
font-size:11px;
text-align:center;
padding:2px;
border-bottom:1px solid #DEDEDE;
background:#DDD;
}

.tab_active {
font-size:12px;
height:30px;
background:#FFF;
font-weight:bold;
border-bottom:1px solid #DEDEDE;
}

.table_header {
height:25px;
text-align:center;
font-weight:bold;
font-size:11px;
padding:1px;
color:#BA4B0D;
background:#FFF;
}

.table_row {
height:20px;
background:#F0F0F0;
padding:1px;
font-size:10px;
color:#333;
}

.progress_note {
text-align:center;
font-weight:bold;
font-size:11px;
padding:1px;
color:#BA4B0D;
}

.progress_bar {
background-color:#9C3;
border:1px solid #DEDEDE;
}

form.margin {
margin:0px;
}

input.error, select.error, textarea.error {
background:#FFA;
}

.input, input.file {
background-color:#DDD;
font-size:11px;
border:1px #DEDEDE solid;
padding:3px;
margin-bottom:2px;
width:352px;
}

.select {
background-color:#DDD;
font-size:11px;
border:1px solid #DEDEDE;
padding:2px;
width:360px;
}

.button {
font-size:11px;
border:1px solid #DEDEDE;
color:#0099FF;
cursor: pointer;
background-color:#F0F0F0;
text-transform:capitalize;
vertical-align:top;
height:20px;
padding:1px;
}

.button[disabled] {
color:#333;
}

.button:hover {
background-color:#FFF;
color:#999;
}

.button[disabled]:hover {
background-color:#DDD;
}

.textarea {
font-size:11px;
border:1px solid #DEDEDE;
background-color:#DDD;
padding:2px;
width:354px;
}

.checkbox {
background-color:#DDD;
border:1px solid #DEDEDE;
font-size:11px;
padding:0px;
}

.yesno {
border:0px;
font-size:11px;
}

.hiddencontent {
padding:12px;
background:#333;
display:none;
}

.spacer, .spacer a {
background:transparent url("images/gray_back.png") repeat-x;
height:20px;
padding:5px 5px 0px 5px;
color:#000;
}

.spacer a {
color:#000;
}

#nav a, #nav a:active, #nav a:visited {
font-size:11px;
display:block;
float:left;
padding:4px;
background:#FFF;
border:1px solid #DEDEDE;
margin-right:2px;
}

#nav a.selected, #nav a.selected:active, #nav a.selected:visited {
background:#F90;
text-decoration:none;
border:1px solid #DEDEDE;
outline:none;
color:#9C3;
}

.hintsClass {
font-family: tahoma, verdana, arial;
font-size:12px;
background-color:#000;
color:#333;
border:1px solid #808080;
padding:5px;
}

.hintSource {
color: green;
text-decoration: underline;
cursor: pointer;
}

.row {
background:#FFF;
color:#333;
text-align:center;
padding:5px;
border-left:#D9D9D9 solid 1px;
}

.row_nh {
background:#FFF;
color:#333;
text-align:center;
padding:5px;
border-left:#D9D9D9 solid 1px;
}

.row:hover {
background:#333;
color:#DDD;
}

.inset {
background:#FFF;
color:#333;
}

.spacer-10px {
height:10px;
}

#thumbBox{
position:absolute;
left:0;
top:0;
width:646px;
padding:10px;
padding-bottom:0;
background:#F0F0F0;
visibility:hidden;
z-index:10;
cursor:pointer;
}

#thumbBox .footerbar{
font:bold 16px Tahoma;
letter-spacing:5px;
line-height:1.1em;
color:#333;
padding:5px 0;
text-align:right;
}

#thumbBox #thumbImage{
background:#FFF;
color:#333;
padding:2px;
}

#thumbLoading{
position:absolute;
visibility:hidden;
border:1px solid #DEDEDE;
background:#F0F0F0;
color:#333;
padding:5px;
z-index:5;
}

.calendar {
position: relative;
display: none;
border: 1px solid;
border-color: #fff #000 #000 #fff;
font-size: 11px;
cursor: default;
background: Window;
color: WindowText;
font-family: tahoma,verdana,sans-serif;
}

.calendar table {
border: 1px solid;
border-color: #fff #000 #000 #fff;
font-size: 11px;
cursor: default;
background: Window;
color: WindowText;
font-family: tahoma,verdana,sans-serif;
}

/* Header part -- contains navigation buttons and day names. */

.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
text-align: center;
padding: 1px;
border: 1px solid;
border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
background: ButtonFace;
}

.calendar .nav {
background: ButtonFace url(menuarrow.gif) no-repeat 100% 100%;
}

.calendar thead .title { /* This holds the current "month, year" */
font-weight: bold;
padding: 1px;
border: 1px solid #000;
background: ActiveCaption;
color: CaptionText;
text-align: center;
}

.calendar thead .headrow { /* Row <TR> containing navigation buttons */
}

.calendar thead .daynames { /* Row <TR> containing the day names */
}

.calendar thead .name { /* Cells <TD> containing the day names */
border-bottom: 1px solid ButtonShadow;
padding: 2px;
text-align: center;
background: ButtonFace;
color: ButtonText;
}

.calendar thead .weekend { /* How a weekend day name shows in header */
color: #f00;
}

.calendar thead .hilite { /* How do the buttons in header appear when hover */
border: 2px solid;
padding: 0px;
border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
}

.calendar thead .active { /* Active (pressed) buttons in header */
border-width: 1px;
padding: 2px 0px 0px 2px;
border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
}

/* The body part -- contains all the days in month. */
.calendar tbody .day { /* Cells <TD> containing month days dates */
width: 2em;
text-align: right;
padding: 2px 4px 2px 2px;
}
.calendar tbody .day.othermonth {
font-size: 80%;
color: #aaa;
}
.calendar tbody .day.othermonth.oweekend {
color: #faa;
}

.calendar table .wn {
padding: 2px 3px 2px 2px;
border-right: 1px solid ButtonShadow;
background: ButtonFace;
color: ButtonText;
}

.calendar tbody .rowhilite td {
background: Highlight;
color: HighlightText;
}

.calendar tbody td.hilite { /* Hovered cells <TD> */
padding: 1px 3px 1px 1px;
border-top: 1px solid #fff;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #fff;
}

.calendar tbody td.active { /* Active (pressed) cells <TD> */
padding: 2px 2px 0px 2px;
border: 1px solid;
border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
}

.calendar tbody td.selected { /* Cell showing selected date */
font-weight: bold;
border: 1px solid;
border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
padding: 2px 2px 0px 2px;
background: ButtonFace;
color: ButtonText;
}

.calendar tbody td.weekend { /* Cells showing weekend days */
color: #f00;
}

.calendar tbody td.today { /* Cell showing today date */
font-weight: bold;
color: #00f;
}

.calendar tbody td.disabled { color: GrayText; }

.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
visibility: hidden;
}

.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
display: none;
}

/* The footer part -- status bar and "Close" button */
.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
}

.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
background: ButtonFace;
padding: 1px;
border: 1px solid;
border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
color: ButtonText;
text-align: center;
}

.calendar tfoot .hilite { /* Hover style for buttons in footer */
border-top: 1px solid #fff;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #fff;
padding: 1px;
background: #e4e0d8;
}

.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
padding: 2px 0px 0px 2px;
border-top: 1px solid #000;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
}

/* Combo boxes (menus that display months/years for direct selection) */

.calendar .combo {
position: absolute;
display: none;
width: 4em;
top: 0px;
left: 0px;
cursor: default;
border: 1px solid;
border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
background: Menu;
color: MenuText;
font-size: 90%;
padding: 1px;
z-index: 100;
}

.calendar .combo .label,
.calendar .combo .label-IEfix {
text-align: center;
padding: 1px;
}

.calendar .combo .label-IEfix {
width: 4em;
}

.calendar .combo .active {
padding: 0px;
border: 1px solid #000;
}

.calendar .combo .hilite {
background: Highlight;
color: HighlightText;
}

.calendar td.time {
border-top: 1px solid ButtonShadow;
padding: 1px 0px;
text-align: center;
background-color: ButtonFace;
}

.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
padding: 0px 3px 0px 4px;
border: 1px solid #889;
font-weight: bold;
background-color: Menu;
}

.calendar td.time .ampm {
text-align: center;
}

.calendar td.time .colon {
padding: 0px 2px 0px 3px;
font-weight: bold;
}

.calendar td.time span.hilite {
border-color: #000;
background-color: Highlight;
color: HighlightText;
}

.calendar td.time span.active {
border-color: #f00;
background-color: #000;
color: #0f0;
}


/* --- FOOTER --------- */

.footer {
background: #000000 url('../images/footer_gradient.png') repeat-x;
font-size: 11px;
color: #666;
padding: 20px;
margin-top: 20px;
}