/* ClassicSim */

header, hgroup, nav, footer, figure, figcaption, aside, section, article { display: block; }
body { background-color: #Ccc;
      background-image: url(images/concrete_seamless.png);
	  font-family: Verdana, Arial, sans-serif;
      
}

header {background-color: #FFF;
	  background-repeat: no-repeat;
	  padding: 94px 0 0 0;
	  margin-bottom: -22px;
	  background-image: url(images/classicsim_banner.jpg);
	  background-position: right;
	  
}

h1 {visibility: hidden;}
h2 {text-align: center;}
h3 { text-transform: uppercase;
	background-color: #E2D2B0;
}
h4{text-align: center;}
nav { font-weight: bold;
      text-align: center; 
	  float: left;
	  width: 160px;
	  }
nav ul { list-style-type: none;  
       padding-left: 0;
       font-size: 1.2em;
}
nav a { text-decoration: none	;
}
nav a:link { color: #000;
}
nav a:visited { color: #000;
}
nav a:hover { color: #ccC;
}

section { padding-left: 20%;
        padding-right: 20%;
		overflow: auto;
}
dt { font-weight: bold; 
}
img { border-style: none; 
	max-width: 100%; 
	height: auto;}

footer { background-color: blue;
       color: #CCC;
	   padding: 20px;
	   font-size: .60em;
	   font-style: italic;
	   text-align: center;
	   font-weight: bold;
}	  
.boxed {	box-shadow: 5px 5px 5px blue;
		position: relative; 
		background-color: #CCC;
		margin-bottom: 5px;
		margin-top: 20px;
		padding: 5px;
		width: 100%;
}
.floatleft  {float: left;
		   position: absolute;
		   top: 0;
		   bottom: 0;
		   margin: auto;
		   padding-left: 20px;
}
.h4alignleft  {margin-left: 280px; 
		 text-align: center;}
.ulalignleft  {margin-left: 250px;
		 list-style-type: none;
		 text-align: center;
}
.floatright  {float: right;
			 padding-left: 69%;
		     position: absolute;
		     top: 0;
		     bottom: 0;
		     margin: auto;
		     padding-right: 5%;
}
.h4alignright  {margin-right: 280px; 
		 text-align: center;}
.ulalignright  {margin-right: 250px;
		 list-style-type: none;
		 text-align: center;
}
.ulalignmiddle  {list-style-type: none;
				text-align: center;
}
.floatrightparker  {float: right;
			 padding-left: 80%;
		     position: absolute;
		     top: 0;
		     bottom: 0;
		     margin: auto;
		     padding-right: 5%;
}



#wrapper { margin-left: auto;
           margin-right: auto;
		   width: 60%;
		   min-width: 960px;
		   background-color: #FFF;
		   box-shadow: 5px 5px 5px #2E0000;
		   margin-top: 25px;
}
#content {padding: 20px;
          background-image: url(images/concrete_seamless.png); 
          margin-left: 175px;
		    
		  
}

#content ul { list-style-image: url(marker.gif);}
			 
#mobile { display: none; }
#desktop { display: inline; }


/* media queries   */
	  
@media only screen and (max-width: 768px) {
	body { margin: 0; }
	header {background-image: url(images/bannersmall.jpg); background-position: center; }
	nav { float: none; width: auto; padding: 0; }
	nav ul { text-align: center; }
	nav li { display: inline; padding: 0 0.75em; }
	section { padding: 0; }
	
	#wrapper { position: static; min-width: 0; width: auto; margin: 0; }
	#content { clear: both; margin-left: 0; }
	#content ul { clear: both; padding-top: 1em; }
	
	.h4alignleft {margin: 0; text-align: center; margin-top: 9px;}
	.ulalignleft { clear: both; padding-top: 1em; margin: 0;}
	.floatleft {position: static; float: none; display: block; margin: auto;}
	.h4alignright {margin: 0; text-align: center; margin-top: 9px;}
	.ulalignright { clear: both; padding-top: 1em; margin: 0; }
	.floatright {position: static; float: none; display: block; margin: auto; padding: 0;}
	.floatrightparker {position: static; float: none; display: block; margin: auto; padding: 0;}
}
@media only screen and (max-width: 480px) {
	body{ margin: 0; }
	header { background-image: url(images/bannersmall.jpg); background-position: center;}	
	nav ul { padding: 0; }
	nav li { display: inline-block; width: 8em; font-size: 100%; text-align: center; 
	       box-shadow: 2px 2px 2px #000; background-color: #ccc;
		   margin: 1%; padding: 2.5%; }
	nav a { display: block; }
    nav a:hover { color: #fff; }
	section { padding: 0; }
	section img { display: none; }
	label {float:none; 
		 text-align: left;}
		 

	#wrapper { width: auto; min-width: 0; margin: 0; }
	#content { padding: 0.1em 1em; margin: 0; font-size: 90%;}
	#mobile { display: inline; }
	#desktop { display: none; }
	#align input {margin-left: 5px; margin-right: 5px;} /* added to align buttons */

	#nobox li{display: inline-block; width: 8em; font-size: 100%; text-align: center; 
	          box-shadow: 2px 2px 2px #000; background-color: #ccc;
			  margin: 1%; padding: 2.5%; }
	.ulalignleft {margin-left: -40px;}
	.ulalignright {margin-left: -40px;}
	.ulalignmiddle {margin-left: -40px;}
}