/**********************************************************
 * General layout
 **********************************************************/
body { position: relative; }

/* Makes thead/tfoot things appear on every page of a table when printing */
thead { display: table-header-group; }
tfoot { display: table-footer-group; }

#sizer, #content { width: 100%; }


#body { padding: 0px 25px; }

#expander
{
	position: relative;
	min-width: 900px;
}

/* Hack for IE \*/
* html #body, * html #sizer, * html #expander { height: 0px; }
/* */

#body_window { padding: 0px 25px 0px 25px; }

#expander_window
{
	margin: 0px;
	min-width: 0px;
}

#header
{
	position:   relative;
	clear:      both;
	width:      100%;
	height:     50px;
	background: url(../images/top-middle.jpg) repeat-x top left;
}

#headerhome
{
	float:   left;
	width:   315px;
	height:  50px;
	background: url(../images/top-left.jpg) no-repeat top right;
}

#headerhome a
{
	float:  left;
	width:  215px;
	height: 50px;
	background: white url(../images/Logos/top-logo-orange.gif) no-repeat top left;
}

/*
	The double div (headerlinkscontainer and headerlinks) is required
	by Mozilla on Mac OS 9, which doesn 't like absolutely positioned
	elements inside a floated, relatively positioned div.
*/
#headerlinkscontainer
{
	position: relative;
	float:    right;
	width:    130px;
	height:   50px;
	background: url(../images/top-right.jpg) no-repeat top right;
}

#headerlinks
{
	position: relative;
}

/* These bits apply to all three links */
#headerlinks div
{
	position: absolute;
	display:  block;
	top:      9px;
	width:    20px;
	height:   20px;
	overflow: hidden;	
}

#headerlinks div div
{
	top:        0px;
	left:       0px;
	position:   absolute;
	display:    block;
	margin:     0px;
	padding:    0px;
	width:      20px;
	height:     20px;
	overflow:   hidden;
}

#headerlinks div div a
{
	top:        0px;
	left:       0px;
	position:   absolute;
	display:    block;
	margin:     0px;
	padding:    0px;
	width:      20px;
	height:     20px;
	overflow:   hidden;
}

/* we need to mention each div id in here or it won't work */
#headerlinks div#home div.lb:hover, #headerlinks div#home div.over, #headerlinks div#contact div.lb:hover, #headerlinks div#contact div.over, #headerlinks div#help div.lb:hover, #headerlinks div#help div.over
{
	background-image: none;
}

/* Now set the position and background specifically */
#headerlinks div#home
{
	right: 85px;
	background: url(../images/top-home.gif) 0 -20px no-repeat;
}

#headerlinks div#home div
{
	background: url(../images/top-home.gif) top left no-repeat;
}

#headerlinks div#contact
{
	right: 53px;
	background: url(../images/top-contact.gif) 0 -20px no-repeat;
}

#headerlinks div#contact div
{
	background: url(../images/top-contact.gif) top left no-repeat;
}

#headerlinks div#help
{
	right: 25px;
	background: url(../images/top-help.gif) 0 -20px no-repeat;
}

#headerlinks div#help div
{
	background: url(../images/top-help.gif) top left no-repeat;
}

#content
{
	padding-top: 5px;
	float:      left;
	width:      100%;
}

#content div#ordersteps
{
	padding-bottom: 15px;
	clear:         both;
	width:         100%;
}

#mainmenucontainer
{
	float:      left;
	clear:      left;
	width:      190px;
}

#mainmenu
{
	clear: both;
}

#mainsearch
{
	clear: both;
	width: 190px;
	padding-top: 20px;
}

#maincontentcontainer
{
	float:       right;
	clear:       right;
	width:       100%;
	margin-left: -210px;
}

#maincontent
{
	margin-left: 200px;
}

#key
{
	margin-top:  20px;
}

#login, #getpassword
{
	width:  350px;
	margin: 75px auto 200px auto;
}

#getpassword
{
	width: 375px;
}

#footer
{
	width:      100%;
	float:      left;
	clear:      both;
	padding:    50px 0px 30px 0px;
	text-align: center;
	font-size:  9px;
}

div.emptyfooter
{
	width:  100%;
	float:  left;
	clear:  both;
	padding: 0px;
	overflow: hidden;
}

div.messagetable
{
	margin: 10px;
}

#uploadprogress
{
	position:   absolute;
	top:        -1000px;
	left:       -1000px;
	width:      280px;
	padding:    15px 10px 10px 10px;
	border:     solid 1px #0d6ad2;
	z-index:    1000;
	text-align: center;	
	background-color: #cddff5;	
}

#uploadprogress h1
{
	float: none;
}

#uploadprogress img
{
	display: block;
	clear:   both;
	width:   30px;
	height:  30px;
	margin: 15px auto 0px auto;
	background: url(../images/progress.gif) no-repeat top left;
}

/**********************************************************
 * Storyboard Jazz
 **********************************************************/
img.sb
{
	width:  160px;
	height: 120px;
	border-width: 0px;
}

img.w
{
	height: 90px;
}

/*
thumbnails
*/
img.tsb
{
	width:  130px;
	height: 98px;
	text-align:left;
	border-width:0px;
}

img.tw
{
	width: 130px;
	height: 73px;
	text-align:left;
	border-width:0px;
}

	
/**********************************************************
 * Border stuffs
 **********************************************************/
div.box
{
	display: block;
	z-index: 1;
	width:   100%;
	padding: 0px;
	margin:  0px;
	border:  0px;
	background: url(../images/border_left.gif) repeat-y top left;
}

div.boxright
{
	display: block;
	clear:   both;
	width:   100%;
	padding: 0px;
	margin:  0px;
	border:  0px;
	background: url(../images/border_right.gif) repeat-y top right;
}

div.boxtop
{
	height:  10px;
	clear:   both;
	background: url(../images/border_top.gif) repeat-x bottom left;
}

div.boxtopleft
{
	display: inline; 
	float:   left;
	width:   10px;
	height:  100%;
	background: url(../images/border_tl_corner.gif) no-repeat bottom left;
}

div.boxtopright
{
	display: inline;
	float:   right;
	width:   10px;
	height:  100%;
	background: white url(../images/border_tr_corner.gif) no-repeat bottom right;
}

/* Hide Windows IE hack from Macs - Get rid of space \*/
*html div.boxtopleft, *html div.boxtopright
{
	margin-top: -3px;
}
/* End hack attack */

div.boxcontent
{
	clear:   both;
	margin:  0px 10px 0px 10px;
}

/* Apply some special rules for stupid Win IE \*/
* html div.boxcontent
{
	display: inline-block;
	width:   100%;
	width/* */:/**/auto;	/* IE5 Hack */
}
/* End hacky sacky */ 

div.boxmiddle
{
	height: 40px;
	clear:  both;
	background: url(../images/border-middle.gif) repeat-x top left;
}

div.boxmiddle
{
	height: 40px;
	clear:  both;
	background: url(../images/border-middle.gif) repeat-x top left;
}

div.boxmiddleleft
{
	display: inline;
	float:   left;
	width:   50px;
	height:  40px;
	background: url(../images/border-middle-left.gif) no-repeat top left;	
}

div.boxmiddlespace
{
	display: inline;
	float:   left;
	width:   20%;
	height:  40px;
	background: white url(../images/rounded_corner_right.gif) no-repeat top right;
}

div.boxmiddleright
{
	display: inline;
	float:   right;
	width:   10px;
	height:  40px;
	background: url(../images/border-middle-right.gif) no-repeat top left;
}

div.boxbottom
{
	height: 10px;
	clear:  both;
	background: url(../images/border_bottom.gif) repeat-x top left;
}

div.boxbottomleft
{
	display: inline;
	float:   left;
	width:   10px;
	height:  100%;
	background: url(../images/border_bl_corner.gif) no-repeat top left;
}

div.boxbottomright
{
	display: inline;
	float:   right;
	width:   10px;
	height:  100%;
	background: url(../images/border_br_corner.gif) no-repeat top right;
}

/* Hide Windows IE hack from Macs - Get rid of space \*/
*html div.boxbottomleft, *html div.boxbottomright
{
	margin-bottom: -3px;
}
/* End hack attack */


/*
	Blue filter type thing
*/
div.filter { margin: 5px 0px 5px 0px; }
div.filter div.box { background-image: url(../images/filter-border-left.gif); }
div.filter div.boxright { background-image: url(../images/filter-border-right.gif); }
div.filter div.boxtop { background-image: url(../images/filter-border-top.gif); margin-bottom:-5px; }
div.filter div.boxtopleft { background-image: url(../images/filter-border-top-left.gif); margin-bottom:-5px; }
div.filter div.boxtopright { background-image: url(../images/filter-border-top-right.gif); margin-bottom:-5px; }
div.filter div.boxcontent { background-color: #99c1eb; margin-bottom:-5px; }
div.filter div.boxbottom { background-image: url(../images/filter-border-bottom.gif); }
div.filter div.boxbottomleft { background-image: url(../images/filter-border-bottom-left.gif); }
div.filter div.boxbottomright { background-image: url(../images/filter-border-bottom-right.gif); }
div.filter label { color: White; }
div.filter input, div.filter select { margin: 2px 3px 2px 0px; }

/*
	Scrollable table - works properly in Firefux, in IE the div scrolls instead - doesn't work in Safari, damnit!
*/
div.scroll  /* max-height is the only thing I could think of to get this to work in Safari - could stuff up in other browsers if the heade ris > 50px */
{
    overflow:auto;
    height:300px; max-height: 350px;
    width: auto;
}	

div[class=scroll] { height: auto; }
/* Following class setting's 'height' option seemed to be ignored by Firefox/IE6, but not by IE7
div[class=scroll] tbody { overflow: auto; overflow-x: hidden; height: 300px; }
*/
div[class=scroll] tbody { overflow: auto; overflow-x: hidden; }
div[class=scroll] tr th:last-child, div[class=scroll] tr td:last-child { padding-right: 16px; }

/*
	A table for showing results
*/
table.results { width: 100%; empty-cells: show; }
table.results td { padding: 2px 1px; }
table.results tr, table.results td { background-color: #e6f0fa; }
table.results tr.alt td, table.results td.alt { background-color: #fff; }

table.results tr.alt2 td, table.results td.alt2 { background-color: #f8f8ff; }
table.results tr.normal2 td, table.results td.normal2 { background-color: #fffafa; }

table.results thead th { padding: 5px 1px 5px 1px; background-color: #fff; }
/*
	A list of options with a checkbox/radio button next to a heading and brief description.
*/
div.optionslist { width: 500px; }
dl.optionslist { clear: both; padding-left:20px; margin-top: 5px; }
dl.optionslist dt { float:left; clear:left; width:30px; margin:0px; padding:5px 0px 5px 0px; }
dl.optionslist dd { float:left; width:450px; margin:0px; padding:7px 0px 5px 0px; }
dl.optionslist dd label { color:dimgray; text-transform:none; font-weight:normal; line-height: normal; }

/*
	Status bar thingies
*/
table.statustable
{
	width:  100%;
	border-collapse: collapse;
}

table.statustable img.ok
{
	background-color: #00CD2A;
}

table.statustable img.warning
{
	background-color: #F30000;
}

table.statustable img.unused
{
	background-color: #DADADA;
}