/* Main Elements
==================================*/

html,
body,
.wrapper,
.mainNAV,
.Container {
	height: 100%;
}

body {
	background-color: #F3F2E9;
	margin: 0px;
	margin-top: 80px;
	padding: 0px;
	font: normal 15px Verdana, Geneva, sans-serif;
	
}



.header {
	display: block;
	width:100%;
	position: fixed;
	top: 0px; 
	height: 60px;
	background: url("../images/tilebg.jpg") repeat-x;
	border-bottom: 2px solid #999;
	box-shadow:  0px 3px 7px 2px #555;
	
}

.header img {
	float:right;
	margin-right: -50px;
}

.wrapper {

	width: 93%;
	max-width: 1200px;
	height: auto;
	margin: 0px auto;
	border: 1px solid #ccc;
	
	
}

/* Navigation Styles 
=================================== */

.mainNAV {
	
	background: #FFF;
	min-width: 21%;
	border: 1px solid #555;
	border-radius: 10px;
	display: inline-block;
	float: left;
	Margin: 45px 0 45px 4%;
	box-shadow: 3px 3px 7px #555;
}


.nav-header{

	color:white; 
	background: url("../images/tilebg.jpg") repeat-x;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px
	
}

.mainNAV h2 {
	padding: 5px;
	margin: 0px;
}


.Qlinks h2 {  
	color: #fff;
	background-color: #666;
	text-align:Left;	 
	font: bold 16px Verdana, Geneva, sans-serif;
	padding: 5px;
}

.Qlinks a{
	font: 14px Arial, Helvetica, sans-serif;
	text-decoration:none;

}

.Qlinks ul {
	list-style: none; 
	margin: 0px;
	padding: 0px; 
	padding-bottom:20px;
	width: 98%;
}

.Qlinks li {
	margin: 0px;
	padding: 0px;  
	height: 20px; 
}

.Qlinks li a { 
	color: #666;
	display: block;
	text-align:left; 
	font: normal 14px Verdana, Geneva, sans-serif; 
	padding: 3px 0 3px 5px;
	margin-top: 6px; 
	text-decoration: none;
}
.Qlinks li a:hover { 
	color: white;
	box-shadow: 2px 2px 4px #444;
	border: 1px solid #555;
	background: url("../images/tilebg.jpg") repeat-x;
	
}

/* Main Page Content
======================================== */

.Container {
	background-color:#ffffff; 
	width: 70%;
	Margin: 45px 2% 45px 2%;
	border: 1px solid #ccc;
	border-radius: 10px;
	display: inline-block;
	float: left;
	
	
}

.Container h1{
	margin-top: 10px;
	color: #659D32;
	text-align:center;
	}

/*=============================
	Map Styles
=============================*/

ul.login {
	text-align: center;
	padding: 15px 0;
	margin: 0;
	width: 90%;
  	font-weight: bold;
	margin: 0px auto;
	list-style-type: none;
  	font-size: 75%;
}

ul.login li a {
	color: #333;
	height: 15px;
	width: 105px;
	margin: 0 auto;
	}

ul.login li a:hover {
	color: #409F11;
}

#toggleText {
	text-align: center;
}

#toggleText img{
	
	height: 100%;
	padding: 10px;
	margin: 10px auto;
	border: 1px solid #888;
	border-radius: 10px;
	box-shadow: 3px 3px 7px #555;
}

/*=============================
	Clock Styles
=============================*/

.clockdiv {
	width: 90%;
	margin: 10px auto;
	padding-bottom: 10px;
	border-bottom: 1px solid #ddd;
	text-align: center;

}

.clockdiv > div {
	display: inline-block;
	width: 150px;	  
	text-align: center;
}

.clockdiv > div > span{
	font-weight: bold;
}

.clock {
	background: #F3F2E9;
	padding: 0px;
	margin-top: 5px;
	border-radius: 5px;
	border: 1px solid #333;
	box-shadow: inset 1px 1px 3px #555;
	font: normal 20px Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", Monaco, "Courier New", Courier, monospace;
}



/*=============================================== 
	Not currently used 
	Test format for clock 
=================================================
.clock2 {
	background: #F3F2E9;
	padding: 0px;
	margin-top: 5px;
	border-radius: 5px;
	border: 1px solid #333;
	box-shadow: inset 1px 1px 3px #555;
	font: normal 20px Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", Monaco, "Courier New", Courier, monospace;
}

.clock2 span {

	padding: 0;
	margin: -6px;
	display: inline-block;
	width: 35.95px;
	border-radius: 5px;
	border: 1px solid #333;
}

.clock2 Span:nth-child(-n+3) {	
	border-right: 1px solid #333;
}

================================================*/


.clockdiv > div:first-child {
	margin-left: 0px;
}

.clockdiv > div:nth-child(-n+3) {
	margin-right: 1.25%;
}

.Time{ 
	color:Black; 
	Font-weight:bold;
}

span.before9 {
	color: red;
}

span.after9 {
	color:green;
}

/* ============================
	 Main Form Styles
=============================*/


#selectNote select{
	
	border: 0; 
	padding: 2px;  
	font: normal 1.05em Verdana, Geneva, sans-serif;
	color: #888; 
	border: solid 1px #ccc;
	border-radius: 3px; 
	margin: 10px 0 10px 20px; 
	width: 250px;
	box-shadow: inset 1px 1px 3px #555;	
}

#selectNote select:hover {
	border: solid 1px #409F11;
}

#selectNote select:focus {
	border: solid 1px #409F11;
}


/*=============================
	Tag lines
=============================*/

.notes-container{	
 
	margin: 20px 20px 10px;
 	overflow: auto;
	
	
}

.notes{	
	font:  normal 15px Verdana, Geneva, sans-serif;
	color: #666;
	border: 1px solid #999;
	border-radius: 10px;
	background: #ffffcf;
	max-height: 500px;
	padding: 20px 10px; 
	margin-bottom: 10px;
	text-align: initial;
	
	
}

.notes legend h3 {

	background: #659D32 ;	 
	margin: 0px;
	padding: 1px 5px 1px 5px;
	color: #FFF;	
	border: solid 1px #444;
	border-radius: 5px;
	box-shadow: 2px 2px 4px gray;
}

label {
	display: block;
	padding 5px;
	margin: 10px 20px 0px 20px;	
	
	
}

label span {
	font-size: 90%;
	width: 100px;
	float:left;
	padding-right: 5px;
	text-align: right;	
	
	
}

label.refNumber {
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid #ddd;
}

.notes p{
	padding: 2px 0px;
	margin: 0px;
	font: normal 15px Verdana, Geneva, sans-serif;
	color: #666;
	
}


/*============================ 
	Tagline Call Tips
=========================== */

.call-tips {

	display: block;
	background: #fff;
	border: solid 1px black;
	border-radius: 10px;	
	box-shadow: 3px 3px 7px #555; 
	width: 25%;
	margin: 0 20px 20px;
	height: 300px;
	float: right;
}

.call-tips h3 {

	color: #659D32;
	text-align: center;
	border-bottom: solid 1px #ccc;
	width: 80%;	 
	margin: 0px auto;
	padding: 2px 5px;		
}

/*============================ 
	Tagline Form Styles
=========================== */


input[type=text], textarea{  
	font: normal 13px Verdana, Geneva, sans-serif; 
	color: #888;
	border: solid 1px #aaa;
	border-radius: 3px; 
	margin: 0px 0px; 
	width: 200px; 
}

textarea {
	height: 100px;
	overflow: auto;
	
}

input:hover, textarea:hover {
	border: 1px solid #409F11;
}

input:focus, textarea:focus {
	border: 1px solid #409F11;
}

.radio label {  
    	display: inline; 
	width: 29px; 
    	cursor: pointer;  
   	position: relative;  
   	padding-left: 20px;  
    	margin-right: 10px;  ; 
	font: normal 15px Verdana, Geneva, sans-serif; 
	color: #888; 
}

.radio label:before {  
    	content: "";  
   	display: inline;  
   	width: 16px;  
   	height: 16px;
	margin-top: 2px;    
   	margin-right: 11px;  
    	position: absolute;  
    	left: 0px;  
    	bottombottom: 1px;  
    	background-color: #aaa;  
    	box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  
}

.radio label:before {  
    	border-radius: 8px;  
}

input[type=radio]:checked + label:before {  
    	content: "\2022";  
    	color: #f2f2f2;
	width: 16px;  
	font-size: 22px;  	
	text-align: center;  
	line-height: 13px;
	padding-right: 0px;
	padding-left: 0px;

}

input[type=radio] {  
    	display: none;  
}

.form-section {
	padding: 5px 5px 5px 15px;
	margin: 15px;
}

.reqspan {
	display: inline-block;
	position: relative;
	top: -3px;
	font-size: 12px;
	height: 15px;
	color: red;
	
}

.tipSpan {
	color: red;
	font-size: 75%;
	
}

.hidden {
	display: none;
}


/*=============================
      Copy & paste notes
==============================*/

.display-notes{	

	font:  normal 15px Verdana, Geneva, sans-serif;
	color: #666;
	border: 1px solid #999;
	border-radius: 10px;
	background: #ffffcf;
	max-height: 500px;
	padding: 20px 10px 20px 10px; 
	margin-top: 10px;
	text-align: initial;
}

/* Clearfix:
===========================================*/

.group::after {
	content: " ";
	display: table;
	clear: both;
}


/* Adaptive Resuliotion
=========================================== */



@media only screen and (max-width: 1120px) {

	body {
		background: purple;
	}


	.wrapper {

		min-width: 425px;
	}
	.mainNAV {
		float: none;
		display: block;
		width: 500px;
		margin: 10px auto;
	}

	.Qlinks ul {
 		display: none; 
	}

	.Qlinks div:hover ul{
		display: block;
	}

	.Container {
		float: none;
		display: block;
		width: 95%;
		Min-width: 
		margin: 0px auto;
		
		
	}
	.clockdiv {
		width: 75%;

	}
	.clockdiv > div {
		display: block;
		border: 1px solid;
	}

	#toggleText img {
		width: 75%;

	}

	.notes{	
		min-width: 300px;
		min-width: 80%;
		margin: 10px auto;
	}
	
}
/*
@media only screen and (max-width: 480px) {

	body {
		background: purple;
	}

	.wrapper {

		min-width: 450px;
	}
	.mainNAV {
	
		float: none;
		width: 75%;
		margin: 10px;
	}

	.Container {
		float: none;
		width: 75%;
		margin: 10px;
		text-align: center;
		
	}
}
*/