/*

    Syrox Framework
    
    Generic Admin Interface Style Sheet

*/

/*
    Colours
    -------
  
  Search and replace to change throughout

  Borders: #666
  
  Current Tab Bg: #FFF3B3
  
  Other Tab Bg: #FFFAE1
  Other Tab Bg Rollover: #FFF7CD
  
  Current Tab Text: #000
  Other Tab Text: #666
  Other Tab Text Rollover: #333
  
  Content Bg: #F8F8F8
  
*/

/* 
    General tag styles 
    ------------------
*/

/* body tag - set page bg colour and padding */

body
{
  background-color: #e3e7ec;
  padding: 0;
  margin: 10px;
  text-align: center;
}

#page
{
	margin: 0 auto;
	width: 750px;
	text-align: left;
}

/* default font and colour */
body, p, ul, td, th, a, input, select, textarea, pre, button 
{
  font-family: tahoma, verdana, arial, helvetica, sans-serif;
  font-size: 11px;
  color: #333;
}

/* headings */

h1, h2 
{
  font-family: trebuchet ms;
  font-weight: bold;
  color: #333;
  font-size: 180%;
}

h2 { font-size: 120%; }

/* all blocks should not have margin above - only below */

h1, h2, h3, p {
  margin: 0;
  margin: 10px 0 0 0;
}



/*
    Misc. Furniture
    ---------------
*/   

/* boxed notes */

.note, .error, .warning
{
  padding: 5px;
    
  background: #EEE;
  border: 1px solid #666;
}

.error
{
	border-color: #F00;
	color: #F00;
}

.warning
{
	border-color: #0C0;
	color: #0C0;
}

/* general purpose box with header */

.box
{
	background: #F8F8F8;
	border: 1px solid #666;
	padding: 0px;
	margin-bottom: 10px;
}

.box .boxheader
{
	padding: 5px;
	background: #DDD;
	width: 100%;
	border-bottom: 1px solid #666;
	font-weight: bold;	
}

.box .boxcontent 
{
	padding: 10px 10px 10px 5px;
}

.box .boxcontent table
{
	margin-bottom: 0px;
}

/* info - floats to right of tabs */

div.info, div.notabinfo
{
  float: right;
  margin-top: 5px;
}

div.notabinfo
{
	margin-top:-20px;
}

div.info a, div.notabinfo a
{
  margin-left: 5px;
}


/* footer */
div.footer
{
	margin:0;
	padding:0;
	text-align: right;
}


div.logos {
	overflow: auto;	
	width: 750px;
}

div.headerbuttons {
	overflow: auto;	
	width: 750px;
	margin-top: 10px;
}

div.clientlogo 
{
	float:right;
	ma2rgin: -20px 0 0 10px;
}

div.ownerlogo
{
	float: left;	
}


div.pageheader 
{
	width: 750px;
	overflow: auto;	
}

.pageheader h1 {
	margin-top: 0;	
}



/* tweak for forms - don't line break */

form { margin: 0; padding: 0;}

/* break for clearing floats - still need to specify clear */

br.clear { line-height: 0; }

/* general purpose floats with margin */

div.left 
{
	position: relative;
	float: left;
	margin: 0 10px 0 0;
}

div.right
{
	position: relative;
	float: right;
	margin: 0 0 0 10px;
}


/* image styles */

img.thumbnail 
{
   float: left;
   /*margin-left: -3px;*/
   padding: 0; 
   background-color:#FFF; 
   border: 1px solid #CCC;  
}

img.thumbnailhighlighted 
{
  float: left; 
  padding: 0;  
  background-color:#FFF; 
  border: 2px solid #B3F3FF;
}


/* 
    Tab strip styles
    ----------------
*/

div.tabstrip 
{
  margin:10px 0 0 0;
}

div.tabstrip ul 
{
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #666;
}

div.tabstrip ul li
{
  display: inline;
  list-style-type: none;
}

div.tabstrip ul li a
{
  margin: 0;
  padding: 5px 15px;
  line-height: 23px;
  
  border: 1px solid #666;
  background-color: #e1edff;
  text-decoration: none;
  color: #666;

}

div.tabstrip ul li a:hover {
  background-color: #b3d2ff;
  color: #333;
}

div.tabstrip ul li.current a, .tabstrip ul li.current a:hover
{
  background-color: #b3d2ff;
  border-bottom-color: #b3d2ff;
  padding-top: 7px;

  color: #000;
}

/* 
    Tab content 
    -----------

    follows a tab strip 
*/

div.tabcontent, div.notabcontent
{
  background-color: #b3d2ff;
  margin-bottom: 10px;
  border: 1px solid #666;
  border-top: none;
  padding: 10px;
}

div.notabcontent
{
	border: 1px solid #666;
	margin-top: 10px;
}

/*
    Content
    -------
    
    General content div on a page
*/

div.content, body.content
{
  padding: 0px 10px 10px 10px;
  background-color: #F8F8F8;
  border: 1px solid #666;  
}


/* 
    Page actions
    ------------

    A list of button links in a boxed div 
*/

div.pageactions
{
  border: 1px solid #666;
  padding: 2px 2px;
  margin: 10px 0 10px 0;
  background: #EEE;
}

div.pageactions ul
{
  text-align: right;
  margin: 0;
  padding: 0;
}
	
div.pageactions ul li
{
  display: inline;
  list-style-type: none;
}

div.pageactions ul li a
{
  text-decoration: none;
  margin-left: 2px;
  padding: 4px;
  color: #333;
  border: 1px solid #666;
}

div.pageactions ul li a:hover
{
  padding: 4px;
  border: 1px solid #666;
  background-color: #b3d2ff;
}

div.pageactions ul li a.highlighted
{
  font-weight: bold;
}

/* 
    Action links
    ------------

    are just <a href='' class='action></a>
    inline with text, can be placed in a form table etc
*/

a.action, a.actiondisabled, span.action, .RadGrid tbody a, button.action, a.revealicon, input.action
{
  display: -moz-inline-box;
  display: inline-block;
  z-index: 10;
  margin: 0;
  padding: 4px;
  text-decoration: none;
  vertical-align: middle;
  border: 1px solid #666;
}

input.action {
  pad2ding: 4px !important;
  padding: 0px !important;
  width: auto !important;
  color: #333;
  border: 1px solid #666 !important;
  background-color: transparent;
  vertical-align: middle !important;
  text-align: center !important;
  line-height: normal;
}

a.action:hover, .RadGrid tbody a:hover, .RadGridPager td a:hover div.Next, .RadGridPager td a:hover div.Prev, button.action:hover, a.revealicon:hover, input.action:hover
{
  padding: 4px;
  border: 1px solid #666;
  background-color: #b3d2ff;
}

a.actiondisabled, button.actiondisabled
{
	color: #999;
	border-color: #999;
}

a.revealicon, a.revealicon:hover
{
	padding:1px;
	margin-left: 3px;
}

.revealtext
{
	display: none;	
}


/*
    Tables
    ------

    styles for several table layouts
    note that for IE, tables must have and cellspacing='0'
*/


/* simple list with alternating even and odd rows */

table.list
{
  border: 1px solid #666;
  padding: 0;
  border-spacing: 0;
  margin-top: 10px;
}

table.list tr td
{
  padding: 5px;
}

table.list tr.header td
{
  font-weight: normal;
  text-align: left;
  background-color: #DDD;
  border-bottom: 1px solid #666;
  padding: 8px 5px;
}

table.list tr.even td, .RadGrid table tr.Row td { background-color: #FFF; }
table.list tr.odd td, .RadGrid table tr.AltRow td { background-color: #EEE; }
table.list tr.highlighted td { background-color: #D9E8FF; } 

table.list tr.rule td {
	border-top: 1px solid #CCC;	
}

table.list span.arrows {
	padding-left: 10px;
	font-family: Webdings;
	font-size: 10px;
}

table.list span.arrows a {
	font-family: Webdings;
	font-size: 10px;
	text-decoration: none;
}

table.list span.arrows a.current {
	color: #b3d2ff;
}	


table.Pager
{
	margin: 0;
	padding: 0;
	border: none;
}

table.Pager tr td
{
	padding: 0 5px 0 0;
	border: none ! important;
}



/* form table with labels and input fields */

table.form 
{
  border: 1px solid #666; 
  padding: 0;
  border-spacing: 0;
  margin-top: 10px;
}

table.form tr td 
{
  background-color: #EEE;
  text-align: left;
  padding: 5px;
}

table.form tr td.right
{
  text-align: right;
}

table.form tr td.center, table.form tr td.centre
{
  text-align: center;
}

table.form tr.header td
{
  background-color: #DDD;
  border-bottom: 1px solid #666;
  padding: 8px 5px;
}

table.form tr td.label, table.form tr td.labelinput, table.form tr td.labelselect
{
  white-space: nowrap;
  text-align: left;
  vertical-align: top;
  background-color: #FFF;
  border-right: 1px solid #666;
  width: 75px;
}

table.form tr td.label 
{
	padding-top: 10px; 
}
table.form tr td.labelinput 
{
  padding-top: 11px;
}
table.form tr td.labelselect
{
  padding-top: 8px;
}

table.form tr td.labeltop 
{
	background-color: #FFF;
	border-bottom: 1px solid #666;
}

table.form tr td input, table.form tr td textarea, table.form tr td .readonly
{
  width: 400px; 
  border: 1px solid #CCC;
  padding: 3px; 
  text-align: left;
  height: 23px;
}

table.form tr td select.select
{
  width: 410px;
  height: 24px;
  border: 1px solid #CCC;
  padding: 4px; 
}

table.form tr td input.smalltextbox 
{
  width: 100px; 
}
table.form tr td input.rightaligned
{
  width: 100px;
  text-align: right;
}

table.form tr td input.checkbox, table.form .checkbox input, table.form input.radio, table.form .radio input, input.action
{
   width: auto; border: none;
} 
table.form tr td textarea { height: 60px; }

/* general purpose layout table, with rhs padding */

table.layout tr td
{
	padding: 0 10px 0 0;
}

table.layout tr.spacerrow td
{
	height: 10px;
}



.debug
{
	background: #FDD;
	border: 1px solid #F00;
}

/* anti-hack measure - add a username field to the login form, but hide it. If a bot fills it in, we know it's a bot. */
input.username { display: none; }



.progressWrapper {
	width: 400px;
	overflow: hidden;
	margin: 5px 0 0 0;
}

.progressContainer {
	padding: 5px;
    border: 1px solid #CCC;
	background-color: #FFF;
	overflow: hidden;
}
/* Message */
.message {
	margin: 1em 0;
	padding: 10px 20px;
	border: 1px solid #CCC;
	background-color: #FFF;
	overflow: hidden;
}
/* Error */
.red {
	border: solid 1px #CCC;
	/*background-color: #FFEBEB;*/
	background-color: #FFF;
}

/* Current */
.green {
	border: solid 1px #CCC;
	/*background-color: #EBFFEB;*/
	background-color: #FFF;
}

/* Complete */
.blue {
	border: solid 1px #CCC;
	/*background-color: #F0F5FF;*/
	background-color: #FFF;
}

.progressName {
	/*font-size: 8pt;
	font-weight: 700;
	color: #555;*/
	/*
	width: 400px;
	height: 14px;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	*/
	display: none;
}

.progressBarInProgress,
.progressBarComplete,
.progressBarError {
	font-size: 0;
	width: 0%;
	height: 10px;
	background-color: #b3d2ff;
	margin-top: 5px;
}

.progressBarComplete {
	width: 100%;
	background-color: green;
	visibility: hidden;
}

.progressBarError {
	width: 100%;
	background-color: red;
	visibility: hidden;
}

.progressBarStatus {
	margin-top: 4px;
	width: 350px;
	/*
	font-size: 7pt;
	font-family: Arial;
	*/
	text-align: left;
	white-space: nowrap;
}

a.progressCancel {
	/*
	font-size: 0;
	display: block;
	height: 14px;
	width: 14px;
	background-image: url(../images/cancelbutton.gif);
	background-repeat: no-repeat;
	background-position: -14px 0px;
	float: right;
	*/
	display: none;
}

a.progressCancel:hover {
	background-position: 0px 0px;
}


/* -- SWFUpload Object Styles ------------------------------- */
.swfupload {
	vertical-align: top;
}










/* debugging borders - uncomment these to show borders around objects */

/*
div { border: 1px solid #F00; }
div div { border: 1px solid #0F0; }
div div div { border: 1px solid #00F; }
div div div div { border: 1px solid #F0F; }
div div div div div { border: 1px solid #0FF; }
div div div div div div { border: 1px solid #FF0; }
ul { border: 1px dotted #F00; }
li { border: 1px dotted #0F0; }
a { border: 1px dotted #00F; }
*/