/*****************************************************
 General CSS File for Stores Purchase Management
 CNK 20150817
 
 Pale grey bg #F1F2F2
 Version: 2.0
*****************************************************/
body{
	font-family: Verdana, Arial, Helvetica, sans-serif;	
	font-size: 14px; 
	font-weight: normal; 
	color: #000000; 
	text-decoration: none;
	background-color: #F1F2Ff;
}
body.gas_store{
	background: #d0d0F0 url('./images/gas_cylinders.png') 0px 30px repeat-x;
}
body.solvent_store{
	background: #d0F0d0 url('./images/flasks.png') 0px 30px repeat-x;
}
#page{
	max-width: 1200px;
	min-width: 430px;
	margin: 0 auto;
}

#topNavigation{
	color: #fff;
	background: #333;
	font-size: 80%;
	padding: 3px 0;
}
#topNavigation a{
	color: #99f;
	/*background: #000;*/
	padding: 0 6px;
}
#topNavigation a:hover{
	color: #ccf;
}
#header { 
	background: transparent; 
	padding-top: 20px;
}
#pageTitle {
	display: block;
	width: 79%;
	float: right;
	font-family: 'times new roman', Georgia, serif;	
	font-size: 260%; 
	color: #333; 
	margin: 15px 0; 
	padding: 0;
}
#logo{
	max-width: 19%;
	min-width: 100px;
	height: auto !important;
	/*float: left;*/
	margin-right: 1%;
}

/* =navigation */
a.menutoggle{
	display: none !important;
}
#navigation {
	clear: both;
	display: block;
	float: left;
	width: 19%;
	max-width: 219px;
	min-width: 100px;
	margin-top: 2%;
	font-size: 12px;
}
#navigation ul {
	list-style-type: none;
	margin:0;
	padding:0;
}
#navigation ul li {
	vertical-align: top;
	background-color: #000; 
	border: 0; 
	border-left: 0; 
	border-right: 0;
	margin: 0;
}
#navigation a {
	color: #fff; 
	text-decoration: none; 
	display: block; 
	padding: 8px 8px 8px 10px; 
}
#navigation a:hover {
	background-color: #fff; 
	color: #000; 
	border-color: #00A7F5
}

#navigation a.current{
	font-weight: bold;
	color: #339;
	background-color: #fff; 
}
#navigation ul ul a {
	background: #333;
	padding: 6px 6px 6px 20px;
	font-size: 90%;
}
#navigation ul a.deepblue {
	background: #101050;
}
#navigation ul a.deepblue:hover {
	background: #fff;
	color: #006;
}

#navigation ul a.deepgreen {
	background: #103010;
}
#navigation ul a.deepgreen:hover {
	background: #fff;
	color: #030;
}
#navigation ul ul ul a {
	background: #666;
	padding: 6px 6px 6px 40px;
	font-size: 85%;
}

/* =content */
#content{
	width: 76%;
	padding: 2%;
	margin-top: 2%;
	float: right;
	background: #fff;
	margin-bottom: 20px;
	font-size: 12px;
}

#footer {
	clear: both;
	font-size: 70%;
	clear: both;
	width: 100%;
	color: #000000;
	padding: 40px 0 20px 0px;
}

.overlined {
	display: block;
	padding-top: 10px;
	border-top: 1px solid #ccc;
}

/* =general markup */
a {
	text-decoration: none;
	color: #00f;
}
a:hover{ color: #f90; }

h1,h2,h3,h4,h5,h6 {font-family: Georgia, serif; font-size: 260%; color: #036; font-weight: normal; padding: 0; margin: 0.2ex 0;} 
h1 {  font-size: 155%; }  
h2 { font-size: 150%; } 
h3 { font-size: 135%; } 
h4 { font-size: 120%; } 
h5 { font-size: 110%; } 
h6 { font-size: 100%; }

p{
	padding: 0; margin: 0 0 1ex 0;
	/*text-align: justify;*/
}
ul {
	margin: 0 0 1ex 0;
}
img{
	max-width: 100%;
	height: auto !important;
}

.alignRight, .right{
	clear: right;
	float: right;
	margin-left: 10px;
}
.alignLeft, .left{
	clear: left;
	float: left;
	margin-right: 10px;
}
.alignCenter, .center{
	text-align: center;
	margin: 0 auto;
}
.massive {
	font-size: 500%;
	font-weight: bolder;
}

img.alignCenter, img.center{
	display: block;
	clear: both;
}

img.left, img.right{
	max-width: 450px;
	height: auto !important;
}
img.thumbnail{
	width: 100px;
	max-width: 25%;
	height: auto !important;
}

form, table{
	width: 98%;
	margin: 5px auto;
}
.hazA, .hazB, .hazC, .hazD{ padding: 0 2px;}

.hazA{ color: blue; background: transparent;}
.hazB{ color: green; background: transparent;}
.hazC{ color: black; background: yellow;}
.hazD{ color: black; background: orange;}
.hazE{ color: white; background: red; font-weight: bolder; padding: 0 3px;}

.hazX{ color: black; background: yellow;}

.haz_review{
	margin-top: 20px;
	font-size: smaller;

}
.haz_review p {
	text-align: left;
}
.ref{
	font-size: smaller;
	color: #666;
}

.clearing{
	clear: both;
}

/*=TABLES =========================================== */

table {
	clear: both;
}

td {
	vertical-align: top;
	padding: 3px 0 3px 5px;
}
td#risks {
	padding-top: 20px;
}
td.selected{
	padding-top: 5px;

	background-color: #D9EEFF;
	width: 20px;
}
td.unselected{
	vertical-align: top;
	width: 20px;
}
td.max20{
	width: 20em;
}
table.lined td{
	border-bottom: 1px dotted #ccf;
}
tr.lined td{
	border-bottom: 1px dotted #ccf;
}

tr.row_header {
	font-weight: bolder;
	background: #eeeeee;
}
tr.row_header input{
	font-weight: bolder;
	font-size: larger;
}
.striped tr:nth-child(even){
	background-color: #eef;
}

#active{
	background-color: #eeeeee;
}

#active td, .active td{
	border: 0;
	/*border-top: 1px solid #dddddd;*/
	border-bottom: 1px solid #dddddd;
	margin-bottom: 5px;
}
#active td p, .active td p{
	/* extra padding to keep cell contents from the edges of the coloured box */
	padding: 0 2%;
}
td h2, td h3{
	padding-top: 0;
	margin-top: -0.1em;
}

.active{
	background-color: #eeeeee;
}

.notice{
	background-color: #f2b6be;
}

.bordered_block{
	display: block;
	width: 90%;
	overflow: hidden;
	border: 1px solid #ccf;
	padding: 2%;
	margin: 10px 0;
}

td.warning{
	vertical-align: top;
	padding-top: 10px;
	background-color: #f30a28;
	width: 20px;
}
/* =forms */
.spaced_row td{
  padding: 5px;
}
textarea{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding: 0;
	font-size: 100%;
}
form.login{
	border: 1px solid #ff0000;
	padding: 10px;
	width: 90%;
	margin: 10px auto;
}
input.logintxt{
	width: 200px;
}
button.loginsub{
	margin: 0 auto;
}

form.focusform{
	position: relative;
}

input.unfocus, textarea.unfocus {
	border: 1px solid transparent;
	height: 1.2em;
	background: transparent;
	/*overflow: hidden;*/
}
button.unfocus{
	display: none;
}

button, a.button{
	display: inline-block;
	margin-top: 2px;
	background: #dfdfdf;
	background: linear-gradient(to bottom, #eeeeee, #fefefe, #dfdfdf, #ccc);
	border-radius: 3px;
	border:1px solid #999;
	padding: 3px 5px;
	color: #000;
}
button:hover, a.button:hover{
	background: #ccc;
	background: linear-gradient(to bottom, #ccc, #dfdfdf, #fefefe, #eeeeee);
	color: #c90;
}

/* use default values for most input scenarios, but 
when they are the first element in a td, make them big */
input.max,
textarea.max,
td input[type=text],
td input[type=url],
td input[type=tel],
td input[type=color],
td input[type=email],
td input[type=password],
td textarea{
	width: 95%;
}
textarea.tall{
	height: 20em;
}
.dateip input[type=number], input.short{
	width: 5em !important;
	max-width: 20%;
}
input.shortdate{
	width: 10em !important;
}


/* ============================= variant styles for devices and screen widths ============================= */
/* Minimum width of 960 pixels. */
@media screen and (max-width: 800px) {
	#pageTitle {	font-size: 200%; color: #333; margin-top: 5px;}
	td.max20{
		width: auto !important;
	}
}
@media screen and (min-width: 601px) {
	/* ensures that menus and menu toggles are properly displayed if the screen is re-sized up */
	a.menutoggle{
		display: none !important;
	}
	#navbar{
		display: block !important;
	}
}
@media screen and (max-width: 600px) {
	#page{ padding: 0; margin: 0;}
	#pageTitle {	
		font-size: 150%; 
		color: #333;
		float: none;
		width: 100%;
	}
	#logo{display: none;}
	#topNavigation{}
	#navigation{
		width: 100%;
		max-width: 100%;
	}
	#navbar{
		display: none;
	}
	a.menutoggle{
		display: block !important;
	}
	a.menutoggle:hover{
		background: transparent;
	}
	#showmenu a, #hidemenu a{
		display: block;
		width: 100%;
		text-align: center;
		padding: 0;
		text-decoration: none;
		color: #006;
		font-size: 36px;
	}
	#hidemenu{
		display: none;
	}
	#content{
		width: 96%;
	}
	#footer{
		padding: 5px 0;	
	}
}


@media print {
	body, #content , #pageTitle {
		background: none !important;
		color: #000;
		font-size: 10pt;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	
	#header { background: transparent; padding: 0; margin: 0;}
	
	#pageTitle {
		font-size: 20pt;
		display: inline;
		margin: 0 0 10pt 0;
		padding: 0;
	}
	#navigation, #logo, #topNavigation, #footer, .noprint { display:none;}
}