/*
STACHS BUSINESS SOLUTIONS
This project is designed and developed by STACHS Pty. Ltd. and Web Elegance.
For all information and inquiries please visit:
STACHS: http://stachs.solutions 
Web Elegance: http://webelegance.com.au

Main stylesheet.

Table of contents:
1. General Style 
	1.1. Typography
	1.2. Buttons
	1.3. Header Styling
	1.4. Footer Styling

2. Common Styling for all pages

3. Specific pages styling

4. Media Queries


---------------------------------------------------------------
--------------------- 1. GENERAL STYLE ------------------
---------------------------------------------------------------
*/
html {height:100%;}
html.ieedge{overflow: hidden;}
body { font-family: helvetica; font-size: 100%; margin: 0; padding: 0; background: #0099ff;
	/* below is the fix for jittery background for IE browser */
	width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto; }
#wrap { margin: 0; width: 100%; height: auto; margin-top: -12px; overflow: auto; 
padding-left:3px; padding-right:3px; /* relevant to header margins */}
#wrap-login-page {margin: 0; width: 100%; height: 100%; background: #000; margin-top: -12px;}


/*
1.1. Typography ----------------------------------------------
*/
p { font-family: 'Roboto', sans-serif; font-size: 13px; }
h6, h5, h4, h3, h2, h1 { font-family: 'Roboto', sans-serif; }
h4 {margin-top: 15px; margin-bottom: 10px; margin-left: 5px;}
.sub-heading-coloured {color: #0077b3;}
.h3-red {color: red;}
label {color: #4d4d4d;}
.page-note {font-size: 13px;margin:0; padding-left:5px; padding-bottom: 0px;}
.page-note {color: #0066ff;}
.page-note-blue {color: #0066ff;}
.page-note-red {color: #cc0000; padding-left:5px;}
.page-note-grey {color: #737373;}
.page-note-black {color: #000;}
.page-note-green {color: green;}
.page-note-yellow { color: #cccc00;}
.centered-text {text-align: center;}
.text-padding-left {padding-left: 5px;}
.indented-text {padding-left: 100px;}
.bold-label { color: #000; font-size: 14px; float:right;}
.bold-label-red {color: red;}
.bold-label-blue {color: #0066ff; }
.small-note {font-style:italic; color: red;}
.large-text { font-size: 22px; }
.medium-text { font-size: 16px; }
.large-text { color: #1a8cff; }
.medium-text-black {font-size: 18px;}
.long-word {word-wrap:break-word;}
.current-data-to-edit { color: #1a1a1a; font-size: 12px; }
.h5-page-text {padding-left: 20px;}
.page-text {padding-left: 50px; padding-right:50px;}
.page-text-ul-list {padding-left: 80px; }
.page-text-ul-list li {padding-right:50px;  font-family: 'Roboto', sans-serif; font-size: 13px;}
.page-text-larger {font-size: 16px;}
.page-text-red {color: red;}
.add-new-data { 
	font-size: 13px; color: #fff; background: #339966; border-bottom: 2px solid #339966; 
	width: 120px; padding: 5px; margin:0; text-align: center; 
}
.add-new-data-blue {
	font-size: 13px; color: #fff; background: #2d8659; border-bottom: 2px solid #2d8659; 
	width: 200px; padding: 5px; margin:0; text-align: center;
}
.add-new-data-blue-longer {
	font-size: 13px; color: #fff; background: #2d8659; border-bottom: 2px solid #2d8659; 
	width: 296px; padding: 5px; margin:0; text-align: center;
}
.header-tip {position: relative; margin-bottom: -37px; color: #2d8659; font-weight: bold;}
.small-indent { padding-left:10px; }


/*
1.3. Header ----------------------------------------------
*/
header {border-bottom: 1px solid #ccc; overflow: auto; margin-top: -5px;}
.logo-image { position:relative; float: left; width: 100px; margin-top: 0px; }
.company-name { font-size: 30px; font-family: 'Roboto', sans-serif; color: #008fb3; text-align: center; }


/*
1.4. Footer ----------------------------------------------
*/
.footer { text-align:center; color: #e6e6e6; margin-bottom: -10px; }
.footer-developer { text-align:center; }
.footer-developer a { color: #e6e6e6; }
.footer-developer a:hover, .footer-developer a:focus { color: #fff; } 


/*
2. Order Page ----------------------------------------------
*/
.centered-block {
	width: 600px; height: auto; padding: 20px; position: relative; left: 50%; margin-left: -320px; margin-bottom: 20px;
	background: #fff; border: 1px solid #ccc; /* box-shadow: 5px 5px 5px #0099ff; */
}
.order-heading { text-align:center; font-size: 26px; font-family: 'Roboto', sans-serif; color: #595959; }

/* --------------- Form Styling ---------------- */
.order-form { width: 320px; position: relative; left: 50%; margin-left: -160px; }
.input-details-text, .input-details-number { 
	width: 170px; padding-right:5px; padding-left:5px; height: 25px; border: 1px solid #999; border-radius: 2px; margin: 2.5px; background: #ffffcc; 
}
.dropdown-select { 
	width: 182px; height: 29px; border: 1px solid #999; border-radius: 2px; margin: 2.5px; background: #ffffcc; 
}  
.input-details-text:focus, .input-details-number:focus, .dropdown-select:focus { background: #fff; }

.save-button-disabled { 
	cursor: pointer; padding: 8px 18px 8px 15px; border: 1px solid #ccc; background: #ccc; border-radius: 2px;
	color: #fff; font-size: 14px; position: relative; float: right; margin-right: 2px;
}
.save-button-disabled:hover, .save-button-disabled:hover { background: #ccc; }

.save-button { 
	cursor: pointer; padding: 8px 18px 8px 15px; border: 1px solid #008fb3; background: #008fb3; border-radius: 2px;
	color: #fff; font-size: 13.5px; position: relative; float: right; margin-right: 2px; transition: all 0.3s;
}
.save-button:focus, .save-button:hover { background: #005266; transition: all 0.3s; }

.form-note { font-style:italic; font-size: 12px; color: #4d4d4d; text-align: right; margin-right: 27px; }
.form-error { font-size: 12px; font-style: italic; color: red; margin-left: 5px; }




/*
---------------------------------------------------------------
------------------- 5. MEDIA QUERIES --------------------
---------------------------------------------------------------
*/
@media only screen and (max-width: 690px) {
	/* Header for Order Form */
	.centered-block { width: 400px; margin-left: -220px; }
}

@media only screen and (max-width: 470px) {
	/* Header for Order Form */
	.company-name { font-size: 26px; }
	.centered-block { width: 380px; margin-left: -210px; }
}

@media only screen and (max-width: 420px) {
	/* Header for Order Form */
	.company-name { font-size: 24px; }
	.centered-block { width: 340px; margin-left: -190px; }
}