/* GENERAL */
@font-face 	{ font-family: 'Roboto'; src: url('_fonts/roboto.woff') format('woff'), url('_fonts/regular.ttf') format('truetype'), url('_fonts/regular.woff2') format('woff2'); }
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
body	{ font-family:"Roboto", "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:14px; background:url(../_images/page/body.gif) repeat-x top right; padding:0px; margin:0px; }
div, section, header, footer, form { margin:0px; padding:0px; position:relative; }
div		{ position:relative; padding:0px; margin:0px; }
img		{ border:0px; }
a		{ color:#808; text-decoration:underline; }
a:hover	{ color:#f70; text-decoration:none; }
h1, h2, h3, h4, h5 { padding:5px; margin:0px; font-weight:normal; }

/*AREAS*/
#pageWrapper { width:980px; margin:0px auto; padding:0px; }
.shadow  	 { box-shadow: 5px 5px 10px #999; -webkit-box-shadow: 5px 5px 10px #999; -moz-box-shadow: 5px 5px 10px #999; }

/* HEADER AND NAVIGATION */
header					{ height:110px; color:#fff; }
#systemLogo				{ width:250px; padding:5px 0px 0px 10px; }
header h2				{ position:absolute; top:20px; left:300px; font-size:16px; padding:0px; margin:0px; font-weight:normal; color:#000; }
header em				{ position:relative; top:-1px; left:10px; font-size:12px; color:#000; }
header em span			{ position:relative; left:-5px; color:#333; font-size:13px; }
#nav1, #nav2			{ position:absolute; left:0px; padding:0px; margin:0px; height:25px; list-style:none; width:980px; font-size:16px; font-weight:700; }
#nav1 li, #nav2 li		{ float:left; margin:0px 5px; height:25px; line-height:25px; padding:3px 15px 8px 15px; }
#nav1 li 				{ border:1px solid #828; background:#727; border-bottom:0px; border-radius:5px 5px 0px 0px; }
#nav2 li 				{ border-radius:5px 5px 0px 0px; padding-top:0px; }
#nav1 li img			{ position:relative; top:5px; padding-right:10px; }
#nav1 li a, #nav2 li a	{ color:#fff; display:block; }
#nav1 li a				{ color:#fff; display:block; text-decoration:none; }
#nav1 li a:hover		{ text-decoration:underline; }
#nav2 li a				{ color:#fed; display:block; text-decoration:underline; }
#nav2 li a:hover		{ text-decoration:none; }
#nav1					{ top:34px; }
#nav2					{ top:78px; }
#heading 				{ padding:2px 0px; }
#changePage				{ text-align:right; padding:10px 5px 0px 0px; }
.headingFixed			{ z-index: 100; position:fixed; top:-9px; background:#fff; width:980px; box-shadow: 0px 0px 10px #999; -webkit-box-shadow: 0px 0px 10px #999; -moz-box-shadow: 0px 0px 10px #999; height:65px; }


#pageContentCentre, #pageContentMain { width:980px; height:auto; background:#fff; padding-top:5px; border-radius:5px; }
#pageContentMain		{ padding:0px 10px 10px 10px; }
#pageContentCentre section { float:left; padding:0px 10px; width:660px; min-height:300px; }
#pageContentFooterH1	{ width:960px; display:none; background:#eee; margin-left:10px; padding:10px; border:1px solid #eee; border-radius:10px; }
footer					{ width:970px; background:#f6f6f6; border:1px solid #eee; padding:5px; text-align:center; color:#777; text-shadow:1px 1px #fff; border-radius:10px; margin:10px 0px 10px 10px; }
footer a				{ color:#777; }
#popUpBackground		{ position:absolute; top:0px; left:0px; background:#000; width:100%; display:block; }
#loading				{ position:fixed; top:160px; left:47%; text-align:center; background:#fff; border:2px solid #f70; border-radius:5px; padding:20px; display:none; }

#dashboard				{ padding:0px; margin:15px 0px 0px 0px; width:100%; background:#f6f6f6; }
#dashboard td			{ vertical-align:top; background:#fff; border:1px solid #eee; padding:10px; margin:10px; }
#dashboard h3			{ text-align:center; }
#dashboard ul			{ list-style:none; padding:0px; }
#dashboard ul li		{ position:relative; line-height:20px; }
#dashboard ul li a		{ width:80%; }
#dashboard ul li span	{ position:absolute; right:0px; color:#999; }

/* NAVIGATION */
header section			{ position:absolute; left:735px; top:5px; text-align:right; width:240px; }
header section a		{ color:#666; padding : 0px 10px; text-decoration : none; }
header section a:hover	{ color:#000; text-decoration:underline; }
header section a img	{ position:relative; top:8px; padding-right : 5px; }


/* TEXT */
h1						{ padding : 12px 0px 12px 15px; margin-top:7px; font-size:24px; height:23px; line-height:25px; text-shadow:1px 1px #fff; font-weight:normal; }
#pageContentCentre aside h3, #pageContentCentre section h3		{ background:url(../_images/page/indexTableTh.gif) center; border:1px solid #ddd; font-size:16px; padding:0px; margin : 4px 0px 0px 0px; border-radius:5px; }
#pageContentCentre aside h3 a, #pageContentCentre section h3 a	{ text-decoration:none; color:#333; display: block; }
#pageContentCentre aside { float : left; padding : 0px 10px; width : 280px; }
.selectH3 a				 { padding:10px; color:#333; text-shadow:1px 1px #fff; }
.selectH3 img			 { padding-right:5px; position:relative; top:2px;}


/* BUTTONS */
#pageContent nav			{ position:absolute; top:10px; right:0px; height:38px; text-align:right; }
#pageContent nav span		{ display:inline-block; padding:5px; background:#fff; text-align:center; border:1px solid #fff; border-radius:5px; width:45px; height:45px; margin:0px 2px; color:#f70; position:relative; overflow:hidden; }
#pageContent nav span img   { height:36px; }
#pageContent nav span:hover { border:1px solid #eee; box-shadow: 5px 5px 10px #999; -webkit-box-shadow: 5px 5px 10px #999; -moz-box-shadow: 5px 5px 10px #999; }
#pageContent nav span a		{ display:block; text-decoration:none; font-size:14px; overflow:hidden; color:#000; }
#pageContent nav span a em	{ position:absolute; top:0px; left:0px; background:url(../_images/buttons/em.png); width:100%; height:52px; line-height:52px; font-style:normal; display:none; color:#000; }


/* TABLES */
#indexTable, #indexTableSortable 								{ padding:0px; border-collapse:collapse; width:100%; border:0px; }
#indexTable th, #indexTableSortable th							{ background:#eee; font-weight:normal; color:#222;  text-shadow:1px 1px #fff; padding:10px 2px; text-align:center; }
#indexTable th img, #indexTableSortable th img					{ position:relative; top:5px; left:2px; }
#indexTable th a, #indexTableSortable th a         			    { color:#222; text-shadow:1px 1px #fff; }
#indexTable td, #indexTableSortable td							{ border: 1px solid #eee; text-align : center; vertical-align : middle; padding : 5px; }
#indexTable td img, #indexTableSortable td img					{ padding:0px 3px; }
#indexTable tbody tr:hover, #indexTableSortable tbody tr:hover	{ background:#efe; border:1px solid #eee; box-shadow: 5px 5px 10px #999; -webkit-box-shadow: 5px 5px 10px #999; -moz-box-shadow: 5px 5px 10px #999;  }
#indexTable .evenRow, #indexTableSortable .evenRow				{ background:#f6f6f6; }
.indexTableThumb			{ padding:2px; border:1px dotted #999; background:#fff; }
.indexTableSearch			{ width:70%; }
.checkBoxArrayTable			{ width:100%; }
.checkBoxArrayTable tr:hover { background:#ded; border:1px solid #ccc; border-radius:5px; }

/* HELP */
#help		{ position:absolute; right:10px; top:40px; width:350px; display:none; background:#fff; border:1px solid #f70; border-radius:5px; overflow:hidden; }
#help div	{ clear:left; border-top:1px solid #f70; }
#help img	{ float:left; width:20px; padding:5px; }
#help p     { float:left; width:310px; padding:5px; margin:0px; color:#333; }
#help em	{ display:block; padding:2px 5px 5px 22px; color:#888; font-size:14px; font-style:normal; }

/* POPUP */
.popUpContainer		{ position:fixed; top:60px; background:#fff; border:2px solid #808; border-radius:5px; box-shadow: 1px 1px 20px #fff; -webkit-box-shadow: 1px 1px 20px #fff; -moz-box-shadow: 1px 1px 20px #fff; display:none; padding:10px; }
.popUpContainer h2	{ background:url(../_images/page/indexTableTh.gif) center; color:#333; text-shadow:1px 1px #fff; border-radius:5px; padding:10px; text-align:center; }
.popUpContainer p   { text-align:center; }
#popUpDataResponse  { margin:10px; background:#f6f6f6; padding:10px; border-radius:5px; }

#selectedColour		{ margin : 3px; height:50px; width:240px; border : 5px solid #fff; }
	
/* FORM */
label								{ font-family:"Roboto", "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:18px; color:#666; text-shadow:1px 1px #fff; }
input[type="text"], input[type="password"], select, textarea{ font-family:"Roboto", "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:15px; padding:2px 5px; height:30px; margin:2px; border:1px solid #ddd; border-radius:5px; }
input:focus, select:focus, textarea:focus { box-shadow: 5px 5px 10px #999; -webkit-box-shadow: 5px 5px 10px #999; -moz-box-shadow: 5px 5px 10px #999; }
#pageContentCentre section article label				 { float:left; width:225px; line-height:30px; padding-left : 5px; }
#pageContentCentre section article input[type="text"]    { float:left; width:350px; }
#pageContentCentre section article input[type="password"]{ float:left; width:350px; }
#pageContentCentre section article input[type="checkbox"]{ float:left; width:360px; }
#pageContentCentre section article input[type="file"]	 { float:left; width:365px; height:30px; }
#pageContentCentre section article textarea				 { float:left; width:350px; height:50px; }
#pageContentCentre section article select				 { float:left; width:360px; height:34px; }
#pageContentCentre section article br					 { clear:left; }
#pageContentCentre section article, #pageContentCentre aside article { background:#f6f6f6; border:1px solid #ddd; border-top:0px; padding:5px 0px 10px 0px; margin:0px 5px 30px 5px; border-radius:0px 0px 5px 5px; }

#pageContentCentre aside article 					   { font-size:14px; color:#666; }
#pageContentCentre aside article div				   { padding:3px; }
#pageContentCentre aside article label, .labelRight	   { display:inline-block; width:100px; line-height:20px; padding:0px 3px; font-size:14px; }
#pageContentCentre aside article input[type="text"]    { display:inline-block; width:200px; margin:0px; }
#pageContentCentre aside article input[type="checkbox"]{ width:25px; }
#pageContentCentre aside article textarea			   { width:200px; height:100px; }
.fullWidth	   { min-width:250px; vertical-align:top; }

input[type="button"], input[type="submit"] 			   { font-family:"Roboto", "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:14px; padding:0px 15px 2px 15px; height:34px; line-height:25px; border:1px solid #ccc; border-radius:5px; background:url(../_images/buttons/button.gif) center; color:#333; }
input[type="button"]:hover, input[type="submit"]:hover { cursor:pointer; box-shadow: 5px 5px 10px #999; -webkit-box-shadow: 5px 5px 10px #999; -moz-box-shadow: 5px 5px 10px #999; } 

.hiddenData	{ float:left; width:355px; color:#666; padding:8px 5px; font-size:15px; }

.searchImage  { float:left; width:113px; height:100px; margin:2px; border:1px solid #ccc; overflow:hidden; text-align:center; }
.searchImage a { display:block; text-align:center; height:100px; }
.searchImage a img { height:100% }
.searchImage:hover	{ border:1px solid #333; }


/* PAGER */	
#pager			 	{ padding:15px 0px 5px 0px; }
#pager select		{ border:1px solid #666; font-size:14px; width:130px; padding:2px; height:26px; margin-top:0px;  }
#pager label        { font-size:14px; }
#pager a, .pageLink	{ color:#333; background:#fff; border:1px solid #ccc; border-radius:10px; padding:5px 10px; text-decoration:none; }
.pageLink			{ background:#f70; color:#fff; text-shadow:0px 0px #fff; }
#pager a:hover		{ border:1px solid #999; box-shadow: 5px 5px 10px #999; -webkit-box-shadow: 5px 5px 10px #999; -moz-box-shadow: 5px 5px 10px #999; }

	
/* TOOL TIPS */
.infoLeft				      	{ float:left; position:relative; text-decoration:none; display:block; }
.infoRight	      				{ position:relative; text-decoration:none; display:inline-block; top:5px; }
.infoLeft img, .infoRight img 	{ padding:5px 0px 0px 5px; z-index:2; }
.infoLeft span, .infoRight span { position:absolute; top:-10px; width:300px; height:auto; z-index:10; display:none; }
.infoLeft span                  { left:40px; background:url(../_images/nav/toolTipLeft.png) no-repeat; padding:10px 10px 10px 45px; }
.infoRight span			        { left:-310px; background:url(../_images/nav/toolTipRight.png) no-repeat;  padding:10px 45px 10px 10px; }
.infoLeft span em, .infoRight span em {	margin:0px; width:240px; display:block; padding:5px; color:#fff; font-size:14px; line-height:20px; font-style:normal; }

.productSearchDiv		{ display:none; }
.productSearchPanel		{ position:absolute; top:-3px; left:120px; border:1px solid #ccc; padding:5px; background:#fcfcfc; width:460px; display:none; z-index:100; }
.productSearchResults	{ max-height:200px; overflow-y:scroll; }
.productSearchResults a	{ display:block; padding:3px; }
.productSearchResults a:hover	{ background:#eee; text-decoration:underline; }

.dashboardHeading		{ background:url(../_images/page/indexTableTh.gif) center; padding:10px; margin:0px; border-bottom:1px solid #ccc; font-size:16px; }

#calendar			{ width:355px; background:#fff; }
#calendar th 		{ background:#eee; padding:5px; border:1px solid #ccc; font-weight:normal; }
#calendar td		{ text-align:center; border:1px solid #ccc; padding:5px; font-size:14px; }
#calendar td a		{ display:block; font-size:16px; }
.calWeekend			{ color:#f33; }
.calOtherMonth		{ color:#ddd; background:#f6f6f6; }

#directorySearch	{ height:400px; overflow:hidden; overflow-y:scroll; background:#fff; padding:0px 10px; }
#directorySearch ul	{ list-style:none; padding:0px; margin:0px 0px 0px 20px; background:url(../_images/nav/dir-bg.gif) repeat-y left top; }
#directorySearch ul li { padding:0px; margin:0px; height:24px; }
#directorySearch ul li a { display:inline-block; }
#directorySearch ul li a img { padding:0px; margin:0px; height:24px; position:relative; top:8px; }
.directoryPage		{ width:300px; text-indent:10px; }

/* DASHBOARD */
.letterNone, .letterOn, .letterOff { margin:3px; padding:3px 6.5px; }
.letterOff				{ border:1px solid #fff; border-radius:5px; background:#ddd; color:#666; }
.letterOn				{ border:1px solid #666; border-radius:5px; background:#fff; color:#333; text-decoration:none; }
.hoverTr:hover			{ background:#eee; }

@media only screen and (max-width:768px) { /* IPAD PORTRAIT */

#nav1, #nav2, #pageContentCentre, #pageContentMain, header { width:760px; }
h1 						{ padding:15px; margin-top:7px; font-size:16px; height:18px; line-height:18px; }
#pageContentMain 		{ padding:0px; }
#pageContentMain h1 	{ padding:0px; background:#333; font-size:10px; }
header section 			{ left:500px; }
#pageContentFooterH1	{ width:720px; margin:0px; }
footer					{ width:740px; padding:5px; margin:10px 0px; }
#heading				{ width:740px; }
#indexTable				{ margin:1% 0%; width:99%; }
#pageContentCentre section, #pageContentCentre aside { float:none; width:95%; min-height:inherit; }
#help					{ right:30px; }
.infoLeft span          { left:-310px; background:url(../_images/nav/toolTipRight.png) no-repeat; padding:10px 45px 10px 10px; }
#pageContentCentre aside article label, .labelRight { width:220px; }
#pageContentCentre aside article input[type="text"], #pageContentCentre aside article textarea { width:340px; }
.fullWidth	   			{ min-width:220px; }

}


@media only screen and (max-width:480px) { /* MOBILE LANDSCAPE */

}


@media only screen and (max-width:320px) { /* MOBILE PORTRAIT */

}