body { background: url(background.png); font-family: "Open Sans", sans-serif; margin: 0; padding: 0; }
img { max-width: 100%; }
.clr { clear: both; }
#page { max-width: 1600px; margin: auto; }

#nav-container { background-color: rgba(0,0,0,.4); border: 1px solid #ccc; margin: auto; padding: 8px; }

#nav {
	position: relative;
	margin: auto;
	display: inline-block;
}

#nav > a {
	display: none;
}

#nav li {
	position: relative;
}
#nav li a {
	color: #99aabb;
	display: block;
	text-decoration: none;
}
#nav li a:active {
	background-color: rgba(192,192,192,0.8) !important;
}

/* first level */

#nav > ul {
	list-style:none;
	margin: 0;
	padding: 0;
	text-align: right;

}
#nav > ul > li {
	display: inline-block;
	text-align: right;
	border: none; 
	margin: 0 5px;
	background-color: transparent;
}

#nav > ul > li > ul { background: #333; }

#nav > ul > li > a {
	font-size: 1.1em;
	text-align: right;
	padding: 5px;
	color: #ccc;
	border: none;
	margin: 4px;
	
}
#nav > ul > li:not( :last-child ) > a {			}
#nav > ul > li:hover > a, #nav > ul:not( :hover ) > li.active > a {
	color: #fff;
}

#title h1 { font-size: 4em; text-align: center; margin: 8px; color: #fff; font-weight: normal; }

#inpage { max-width: 1280px; margin: 16px auto; background-color: #ffffaa; padding: 16px; color: #6b6b6b; font-family: "Lucidia Sans", sans-serif; }

#svc { float: left; font-size: 1.2em; }
#logo { float: right; }
#content { margin: 16px auto; min-height: 60vh; } 
#spmess { text-align: center; border: 1px #333 solid; background-color: #fff; border-radius: 9px; box-shadow: 2px 2px #000; max-width: 640px; margin: 12px auto; }
#hours { line-height: 1.5em; font-size: 1.1em; }
#foot { background-color: rgba(0,0,0,.4); border-top: 1px solid #ccc; width: 100%; color: #ccc; text-align: center; }

#listhead { text-align: center; background: linear-gradient(0deg, transparent, #ff9999); display: inline-block; padding: 6px 20px; color: #000; }

#prlist {
	max-width: 50%;
	margin: auto;
}

#prlist ul
{
    list-style: none;
    padding: 0;
    overflow-x: hidden;
}

#prlist li { padding: 2px 0; clear: right; }

#prlist li:after {
    float: left;
	vertical-align: bottom;
    width: 0;
    white-space: nowrap;
    content:". . . . . . . . . . . . . . . . . . . . . . "" . . . . . . . . . . . . . . . . . "" . . . . . . . . . . . . . . . . . . . . . . . . . ";
}

#prlist .head:after {
   content:"";
}

#prlist div { display: inline; }

#prlist li div:first-child {
    padding-right: 0.33em;
    background: #ffffaa;
}
#prlist span {
    float: right;
    padding-left: 0.33em;
    background: #ffffaa;
}
#itl { position: absolute; top: 0; left: 0;  }
#itr { position: absolute; top: 0; right: 0;  }
#ibr { position: absolute; bottom: 0; right: 0; }
#ibl { position: absolute; bottom: 0; left: 0; }

#layouts { margin: auto; width: 50%; }
#layouts th { background-color: #000099; color: #fff; padding: 6px; }
#layouts td { text-align: center; }

#cadhead { width: 50%; margin: auto; }
#layth { max-width: 200px; float: left; padding: 0 6px; }

@media only screen and ( max-width: 1024px ) {
	#title h1 { font-size: 3em; }

	#prlist {
		max-width: 99%;
		margin: auto;
	}
	#pimgcont{ text-align: center; }

	#itl { position: static; }
	#itr { position: static; }
	#ibr { position: static; }
	#ibl { position: static; }

	#layouts { width: 80%; }
	#cadhead { width: 80%; }

}


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

	#title h1 { padding: 0 0 0 40px; margin: 2px; }

	#nav-container { background-color: transparent; border: 0; margin: 0; padding: 0; }

	#layouts { width: 99%; }
	#cadhead { width: 99%; }

	#nav
	{
		position: absolute;
		top: 0;
		left: 0;
		width:100%;
		z-index: 10;
	}
		#nav > a
		{
			width: 40px;
			height: 40px;
			text-align: left;
			background-color: #000;
			position: relative;
			background-color: transparent;
		}

		#nav:not( :target ) > a:first-of-type,
		#nav:target > a:last-of-type
		{
			display: block;
		}


	/* first level */

	#nav > ul
	{
		height: auto;
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		float: none;
		background-color: #000;
		width: 100%;
		margin: 0; padding: 0;

	}
		#nav:target > ul
		{
			display: block;
			background-color: #000;
		}
		#nav > ul > li
		{
			float: none;
			opacity: .9;
			margin-top: 0;
			display: block;

		}
			#nav > ul > li > a
			{
				text-align: left;
				font-size: 1.25em;
				padding: 6px;
				opacity: 1;

			}
				#nav > ul > li:not( :last-child ) > a
				{
					border-right: none;
					border-bottom: 1px solid #999;
				}
}


@media only screen and ( max-width: 640px ) {
	#title h1 { font-size: 2em; }
}
@media only screen and ( max-width: 460px ) {
	#title h1 { font-size: 1.25em; padding: 6px 0 0 40px; }
	#layth { max-width: none; float: none; padding: 2px; margin: auto; text-align: center; display: block; }

}