body {
	margin:0;
	padding:0;
}

#head{

}
#headerbar {
	background-color:#3b5998;
	color:#ffffff;
	text-align:right;
	font-family:Arial, Helvetica, Sans-serif;
	font-weight:bold;
	font-size:12px;
}
#header {
	height:135px;
	margin:0px;
	padding-top:10px;
	padding:0px;
	background-color:#627aad;
	background-image: url(images/s&sheader.png);
    background-repeat: no-repeat;
    background-position: left top;
}
#header h1 {text-align:right;margin:0;padding:0;font-family:Arial, Helvetica, Sans-serif;}
#header h2 {text-align:right;margin:0;padding:0;font-family:Arial, Helvetica, Sans-serif;}
.search { float: right; }
#searchname { font-size:.8em; }
#advancedsearch { text-color:#00ff00; float:right; }
/* #login_details  div{ float: left; float: right;} */
#left { float: left; text-align: left;}
#right { float: right; }

///////////////////////////////////////////////////////////////////////////////////////////////////
//	LOGOUT
///////////////////////////////////////////////////////////////////////////

a.logout:link {color:#00ff00;}      /* unvisited link */
a.logout:visited {color:#00ff00;}  /* visited link */
a.logout:hover {color:#00ff00}  /* mouse over link */
a.logout:active {color:#00ff00;}  /* selected link */


#panes { background-color:E6E8FA }
/****************************************************************************************************
* Site Navigation
*
****************************************************************************************************/

#sitenavigation {width:100%;height:20px;background-color:#333;color: #333;font-family: Arial, Helvetica, Sans-serif;margin:0px; padding:0px; z-index: 1000;}
#sitenavigation ul {margin:0px; padding:0px;}
#sitenavigation li {float: left; position:relative; padding-left:10px;padding-right:10px; list-style: none; text-align:center; font-weight:bold; z-index: 1000;}
#sitenavigation li a{display:block; color:#CCC; text-decoration: none; width:auto}
#sitenavigation li a:hover{background-color:#03F; color: #FFF; z-index: 1000; }
#sitenavigation ul li ul {visibility:hidden; position:absolute;}
#sitenavigation ul li:hover ul {display: inline;visibility:visible;background-color:#333; color: #FFF; z-index: 1000;}

/* Style Overrides for Fluid-width Dropdowns */
#sitenavigation a, #sitenavigation li, #sitenavigation li ul {
	width: auto;
}
#sitenavigation li {
	position: relative;
}
#sitenavigation li li {
	white-space: nowrap;
}
#sitenavigation li ul {
	min-width: 100%;
}

/* Just testing the tinynav plugin to make the menu more workable on mobile devices */
.tinynav{
 display: none;
}

@media screen and (min-width: 1637px) {
.tinynav { display: none; }
}

/* media queries start */
@media screen and (max-width: 1636px) {
	.tinynav {
	 display: block;
	 width: 80%;
	 padding: 0.5em;
	 font-size: 1.5em;
	 margin: 0 10%;
	}
	#nav {	display:none;}
}

/* media queries end */

/***********************************************************************************
* Form Styles
*
***********************************************************************************/

.formlayout{
	background-color:#CCC;
	border:thick;
	border:#333;
	width: 1000px;	
}
fieldset { font-family: Arial, Helvetica, sans-serif; background-color:#CCC; }
fieldset .cmlayout  { width:400px; }
legend {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 90%;
	letter-spacing: -1px;
	font-weight: bold;
	line-height: 1.1;
	color:#fff;
	background: #666;
	border: 1px solid #333;
	padding: 2px 6px;
}
label
{
	width: 160px;
	float: left;
	text-align: right;
	margin-right: 0.5em;
	display: block
}

.frmerror {
	font-weight:bold;
	color:#F00;	
}

.frmsuccess {
	font-weight:bold;
	color:#33cc33;	
}
#loginform { padding-left: 80px; width:400px; text-align:center; }
/*************** PRIORITIES *****************/

/******************************************************************
*	Table Layouts
*
******************************************************************/
/* DISPLAYLIST */
table.displaylist {
  margin: 1em 1em 1em 2em;
  border-collapse: collapse;
  text-align:center;
  font-family:Verdana, Geneva, sans-serif;
  font-size:14px;
}
table.displaylist th, table.displaylist td {
  border: 1px silver solid;
  padding: 0.2em;
}
table.displaylist th {
  background: #C0C0C0;
  text-align: center;
}
table.displaylist caption {
  margin-left: inherit;
  margin-right: inherit;
}
.displaylist tfoot{background:#C33; font-size:16px; }
.displaylist tr:nth-child(even) {background: #EEE;}
.displaylist tr:nth-child(odd) {background: #FFF;}

a.displaylist:link {color:#ffff66;}      /* unvisited link */
a.displaylist:visited {color:#ffff66;}  /* visited link */
a.displaylist:hover {color:#2E9AFE;}  /* mouse over link */
a.displaylist:active {color:#0000ff;}  /* selected link */
displaylist tr:hover { background-color:#2E9AFE; }

td.requested { background-color:#FC3; }
td.changed { background-color:#3F3; }
td.none { background-color: #E42217; }

.displaylist .name { text-align:left; }
.displaylist .heading { text-align:left; font-size:1.4em; }
.displaylist .totals { font-size: 1.1em; font-weight:bold; }
.email { text-align:left; }


/* stuff for the kitchen display lists */
td.kitchenheader {background: #C0C0C0; color: #000000;font-size: 1.3em; text-align:left;}


/**************************************
*	Trades weekly sheet
**************************************/
table.tradesweekly {
  margin: 1em 1em 1em 2em;
  border-collapse: collapse;
  text-align:center;
  font-family:Verdana, Geneva, sans-serif;
  font-size:14px;
}
table.tradesweekly th, table.tradesweekly td {
  border: 1px silver solid;
  padding: 0.2em;
}
.tradesweekly th { background-color:#FFFF99; width:140px; }
table.tradejob { background-color:#3F9; border:0em; }
table.tradejobpending { background-color:#F93; border:0em; }
/*********************************************************************************
*
*  Calendar
********************************************************************************/
/* calendar */ 
table.calendar    { border-left:1px solid #999; }
tr.calendar-row  { height:140px;  }
td.calendar-day  { min-height:160px; font-size:11px; position:relative; } * html div.calendar-day { height:160px; }
td.calendar-day:hover  { background:#eceff5; }
td.calendar-day-np  { background:#eee; min-height:160px; } * html div.calendar-day-np { height:160px; }
td.calendar-day-head { background:#ccc; font-weight:bold; text-align:center; width:200px; padding:5px; border-bottom:1px solid #999; border-top:1px solid #999; border-right:1px solid #999; }
div.day-number    { background:#999; padding:5px; color:#fff; font-weight:bold; float:right; margin:-5px -5px 0 0; width:20px; text-align:center; }
/* shared */ 
td.calendar-day, td.calendar-day-np { width:120px; padding:5px; border-bottom:1px solid #999; border-right:1px solid #999; }

/****************************************************************************************
*    Logout Warning
****************************************************************************************/
#idletimeout { background:#CC5100; border:3px solid #FF6500; color:#fff; font-family:arial, sans-serif; text-align:center; font-size:12px; padding:10px; position:relative; top:0px; left:0; right:0; z-index:100000; display:none; }
#idletimeout a { color:#fff; font-weight:bold }
#idletimeout span { font-weight:bold }


/*****************************************************************************************
*	Folder
*****************************************************************************************/
/* creates the main folder */
#folder { background-color:#ffffcc; border:#F00 solid 2px; font-family:verdana; font-size:.9em; width:1500px; margin:0px 0px 0px 10px; } /*box-shadow: 10px 10px 5px #888888; */
/* creates the top section of the folder with the clients details */
#folderHeader { border-bottom:#F00 solid 1px; height:35px; font-size:1.2em;}
#folderHeader ul { display: inline-block; float:left; overflow: auto; list-style-type: none; padding: 0px; margin: 10px 10px 0px 0px; }
#folderHeader li { float:left; padding-left: 10px; padding-right: 10px; list-style: none; text-align: center;  }
.contacts { float:right; font-size:14px; margin: 0 5px 2px 2px;  }
.sms { float:right; font-weight:bold; font-size:12px; clear:right; margin: 0 15px 2px 2px;}

/* creates the second section of the folder with most of the job details */
#folderDetails { border-bottom:#F00 solid 1px; height:140px; margin:0px; }
/* creates the delivery details div */
#deliveryDetails { border-right:#F00 solid 1px; height:140px; width:115px; margin:0px; float:left; }
#deliveryDetails ul { list-style-type: none; margin:0px; padding:3px;  }
#deliveryDetails li { height:22px; }
/* creates the door details div */
#doorDetails { border:#F00 solid 2px; height:132px; width:250px; margin:3px; float:left; }
#doorDetails ul { list-style-type: none; margin:0px; padding:0px;  }

/* creates the bench details div */
#benchDetails { border:#F00 solid 2px; height:132px; width:250px; margin:3px; float:left; }
#benchDetails ul { list-style-type: none; margin:0px; padding:0px;  }

/* creates the cabinet details div */
#cabDetails { border-left:#F00 solid 1px; height:140px; width:75px; margin:0px; float:left; text-align:center; }
#cabDetails ul { list-style-type: none; margin:0px; padding:3px; }
#cabDetails li { height:22px; }

/* creates the structural details div */
#structuralDetails { border-left:#F00 solid 1px; height:140px; width:200px; margin:0px; float:left; text-align:center; }
#structuralDetails ul { list-style-type: none; margin:0px; padding:3px; }

/* creates the trades details div */
#tradesDetails { border-left:#F00 solid 1px; height:140px; width:420px; margin:0px; float:left; }
#tradesDetails ul { display: inline-block; float:left; list-style-type: none; margin:0px; padding:3px;  }
#tradesDetails li {display: inline-block; width:28px;}

/* creates the contract details div */
#contractDetails { border-left:#F00 solid 1px; height:140px; width:160px; margin:0px; float:left; text-align:center; }
#contractDetails ul { list-style-type: none; margin:0px; padding:3px; }


li.headings {font-family:verdana; font-size:10px; font-weight:bold; height:11px;}
li.details {font-family:verdana; font-size:12px; height:13px;}



.tradesbox { border:#F00 solid 1px; height:68px; width:58px; margin:0px; float:left;}
.tradesheading { background-color:#ffffcc; border-bottom:#F00 solid 1px; font-family:verdana; font-size:9px; font-weight:bold; height:11px; text-align:center; }
.tradesyes { background-color:#33cc33;height:55px; }
.tradescost { font-size:11px; font-weight:bold; text-align:center; vertical-align:middle; }
.tradesno { background-color:#ffffcc; }
.dates {font-size:9px; font-weight:bold; text-align:center; }


#notesVariations { overflow: hidden; width:1500px; }
#notes { float:left; width:50%; }
#variations { float: right; width:50%; }
#nonotes { font-weight:bold; text-align:center; }


.folderHeaderTitle { font-size:1.8em; font-weight:bold;}
.jobnamedetails { font-size:1.8em; }
.jobotherdetails { font-size:1.5em; }
.jobDetails {
	height:107px;
    border-width: 0 0 1px 1px;
    border-spacing: 0;
    border-collapse: collapse;
	border:#F00 solid 1px;
}
.jobDetails thead, tfoot { 
	font-size:1em;
	font-weight:bold;
	height:18px;
}
#folder table
{
    border-width: 0 0 1px 1px;
    border-spacing: 0;
    border-collapse: collapse;
	border:#F00 solid 1px;
}

/**********************************************************************************************
*	Main content stuff
*
**********************************************************************************************/

#maincontent {position:relative; width:100%; height:900px;  border:1px;}  
#leftcontent {position:relative; float:left; width:350px; margin:3; padding:0;background:#E8E8E8 ; height:100%;}
#centercontent {position:relative; float:left; margin:0; padding:0; margin-left:350px; margin-right:250px; height:100%;} 
#rightcontent {position:relative; float:right; width:250px; margin:0; padding:0;background:#E8E8E8 ; height:100%;}


#maincontainer th  {background:#d1d1d1;}
#maincontainer  {background:#efefef;}

/**********************************************
*	Door Tabs
**********************************************/
#benchtoptabs #doortabs #paneltabs ui-tabs-panel ui-widget-content ui-corner-bottom{ font-size:.9em; }
#benchtoptabs #doortabs #paneltabs label ui-tabs-panel ui-widget-content ui-corner-bottom{ padding:0px; margin:0px; }








/**********************************************************************************************
*	Widgets
*
**********************************************************************************************/
#widget {background:#e8edff; width:100%; border-style:none; border-width:0px;font-family:Arial, Helvetica, sans-serif;}
#widget table {}
#widget th {background:#b9c9fe; font-style:capitalize;}

#widget tr:nth-child(even) {background: #E8Edff;}
#widget tr:nth-child(odd) {background: #cfd9ff;}
#widget tr td {text-align:justify;}
#widget th {font-size:1.3em;}

.weatherFeed {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 90%;
}
.weatherFeed a { color: #888; }
.weatherFeed a:hover {
	color: #000;
	text-decoration: none;
}
.weatherItem {
	padding: 0.3em;
	text-align: right;
}
.weatherCity { text-transform: uppercase; }
.weatherTemp {
	font-size: 2.8em;
	font-weight: bold;
}
.weatherDesc, .weatherCity, .weatherForecastDay  { font-weight: bold; }
.weatherDesc { margin-bottom: 0.4em; }
.weatherRange, .weatherWind, .weatherLink, .weatherForecastItem { font-size: 0.95em; }
.weatherLink, .weatherForecastItem {
	margin-top: 0.5em;
	text-align: left;
}
.weatherForecastItem {
	padding: 0.5em 0.5em 0.5em 80px;
	background-color: #cfd9ff;
	background-position: left center;
}
.weatherForecastDay { font-size: 1.1em; }
.weatherForecastRange {font-weight:bold;}

.odd { background-color: #e8e8fc; }
.even { background-color: #d4d4e8; }



/**********************************************************************************
*	Contract detailsArial, Helvetica, Sans-serif;
**********************************************************************************/

.contractdetails { width: 900px; background-color: #dfdfdf; font-family: Tahoma; text-align:justify;  }
.contractdetails h3 { text-align:center; font-family: Arial, Helvetica, Sans-serif; font-size:1.3em; font-style:none; color:red;}
.contractdetails th, td {text-align:left;}


#tradesdetails th, td{text-align:left;}

/******************************
*	new contract 29/5/14
******************************/

#contract { width: 900px; background-color: #dfdfdf; font-family: Tahoma; text-align:justify;  border:1px solid; padding:5px; margin:10px; }
#contract label {font-weight:bold; font-size:.8em;text-align:left; width:90px;}
#masthead { overflow: auto;}
#mastleft { float:left; width:50%;}
#mastright { float:right; width:50%; }
#contracttitle { font-size: 1.5em; font-weight:bold; }
#companydetails { font-size:.7em;  }
#bankdetails { border:1px dotted; font-size: 0.8em; padding:3px; margin:9px; width:300px; }
#logo { float:right; vertical-align:top; overflow: hidden; }



#details { width:100%; display: inline-block; }
#cabinetdetails { width:100%; }
#cabinetdetails label { text-align:left; width:90px;}
#cabinetdetails tr td { border-bottom: 1px dotted; }
#myob {width:100%; text-align:center;}
#myob table { border-bottom: 1px solid; width:100%; }

#signaturecosting { overflow: auto; border-bottom: 1px solid;}
#signature { width:48%;  float:left; margin:2px; }
#costing { width:48%; float:right; margin:4px; }
#tradesdetails { width:100%; }


.dottedline { width:100%; border-bottom:1px dotted; margin-top:40px;}



.costingheading { font-size:1.1em; font-style:bold; }
.fineprint {font-size:.6em;}




/****************************************************************************************
*
*    Spreadsheet
*
****************************************************************************************

.spreadsheet table, td, th
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:.9em;
    border-color: #dddddd;
    border-style: solid;
}

.spreadsheet table
{
    border-width: 0 0 1px 1px;
    border-spacing: 0;
    border-collapse: collapse;
}

.spreadsheet td, th
{
    margin: 0;
    padding: 2px;
    border-width: 1px 1px 0 0;
	height: 16px;
}
.spreadsheet tbody
{
    overflow: scroll;
}
th.week1  { background-color:#dddddd; font-weight:200;}
th.week2  { background-color:#cccccc; font-weight:200;}
.spreadsheet td { font-size:.7em; min-height:16px; max-height:16px;  max-width:95px; min-width:95px;  }
.spreadsheet h2 { padding:30px; float:left; }
.today { border-right:10px; background-color:#4be4ca; border-right-style:solid; }
.wednesday { border-bottom: 10px solid #f00; } /* background-color:#F00
.nextweek { background-color:#b5b5ff; }

.ribbon table {
	border-color:#ggg;
	border-width:3px;
	border-style:solid;
	text-align:center;
	font-size:.8em;    
}
.ribbon td { 
	max-width:95px; 
	min-width:95px;    
	margin: 0;
    padding: 0px;
    border-width: 1px 1px 0 0;
	height: 16px; 
}


.ordering {background-color: #ff6600; }
.cut { background-color: #fcf305; }
.lam { background-color: #99ccff; }
.polishing { color:#ffffff; background-color: #f20884; }
.router { background-color: #ffcc99; }
.detailed { color:#993366; background-color: #00ccff;  }
.edge { background-color: #ff9900; }
.bore {  color: #fcf305; background-color: #008080; }
.delivery { color:#ffffff; background-color: #1fb714; }
.qualfit { background-color: #ccffff; }
.finish { background-color: #ccffcc; }
.specials { color:#dd0866; background-color: #c0c0c0; }
.capmould { background-color: #cc99ff; }
.pformed { background-color: #0000d4; }


/****************************************
*	Employee Information Pages
****************************************/
#employeeinfo { background-color: #cccccc; width:1200px; border:thin; margin-left:80px; padding:5px; text-align:justify; font-size:1.1em; line-height:1.4em; }
#employeeinfo h1, h2, h3, h4 { font-family:Tahoma, Geneva, sans-serif; text-align:left; }
#employeeinfo h1 { font-size:2em; padding-bottom:20px; padding-left:0px; text-decoration:underline; text-transform:capitalize; }
#employeeinfo h2 { font-size:1.7em; padding-bottom:15px; padding-left:5px; text-decoration:underline; }
#employeeinfo h3 { font-size:1.5em; padding-bottom:10px; padding-left:10px; }
#employeeinfo h4 { font-size:1.2em; padding-bottom:5px; padding-left:15px; }

/****************************************************************************************
*
*    tooltips
*
****************************************************************************************/
.tooltip {
	border-bottom: 1px solid;  outline: none;
	cursor: help; text-decoration: none;
	position: relative;
}
.tooltip span {
	margin-left: -999em;
	position: absolute;
}
.tooltip:hover span {
	border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
	/*font-family: Calibri, Tahoma, Geneva, sans-serif;*/
	position: absolute; left: 1em; top: 2em; z-index: 99;
	margin-left: 0; /*height:400px; width:350px;*/
}

.tooltip:hover em {
	/*font-family: Candara, Tahoma, Geneva, sans-serif;*/ font-size: 1.2em; font-weight: bold;
	display: block; padding: 0.2em 0 0.6em 0;
}
#thumb { margin-left: 300px; padding-left:300px; }
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334;	}
.help { background: #9FDAEE; border: 1px solid #2BB0D7;	}
.info { background: #9FDAEE; border: 1px solid #2BB0D7;	}
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }


/***************************
MESSAGING
***************************/
.mailform li { list-style: none; }
.mailform label { font-weight:bold; }
.mailform tr.Urgent { background-color:red; }
tr.Unread { font-weight:bolder; }
td.High { background-color:#F90; }
td.Low { background-color:#0CF; }
td.Urgent { bgcolor:#F00; }
.message_details { display:block; list-style:none; font:Verdana, Geneva, sans-serif; font-size:1.3em; width:800px;}
.message_details ul { display:inline; list-style:none; }
.message_details li { display:inline; background-color:#eee; font-size:0.7em;}
#msg_subject { font-size:1.9em; font-weight:bold; font:Verdana, Geneva, sans-serif; }
#message { width:800px; }
.strong {font-weight:bold; }

/*******************************************
*	Costings
*******************************************/
#costings ul { display:inline; list-style:none; line-height:1.9em; }
#costings li { padding-left:1.8em; list-style:none; }

/**********************
contract table
**********************/
contract.table {
	width:300px;	
}
th.details { width:140px; }
th.prices { width:80px; }

/***************
*	Manual
****************/
.manual { font-family:Verdana, Geneva, sans-serif; background-color: #cccccc; text-align:justify; line-height:150%; margin-left:20px; padding:15px; width:1100px;}
.manual h2 { font-size:1.2em;}
.manual h3 { font-size:1.1em;}


/**************************
*	Wrapper
**************************/
.wrapper {	
	font-family:Verdana, Geneva, sans-serif;
	font-size:13px;
}

/***************************************
tracker
****************************************/
#tracker{ background-color: #cccccc; }


/****************************************************************************************
*
*    Footer layout
*
****************************************************************************************/
.rmname { text-align:left; }

#footer {
  clear: both;
	height:60px;
	margin-top:40px;
	padding-top:10px;
	padding-left:20px;
	background-color:#2a4480;
	font-size:11px;
	font-weight:bold;
	color:#999;
}