.red-bg {
	background: #DB3C3B;
}
.ltblue-bg {
	background: #3587BE;
}
.dkblue-bg {
	background: #246CA9;
}
@font-face {
	font-family: Verdana;
	src: URL('verdana.ttf') format ('ttf');
}
@font-face {
	font-family: 'High Tower Text';
	src: URL('tower.ttf') format ('ttf');
}
.html {
	margin: 0;
	height:100%;
}
body {
	background:black;
	margin: 0;
	font-family: Verdana;
	height:100%;
}
.wrapper {
	position:relative;
	min-height:100%;
	margin-top:0;
	width:100%;
	overflow-x:hidden;
	border:hidden;
}
.header-wrapper {
	position:absolute;
	top:5px;
	left:0;
	height:40px;
	width:100%;
}
.header {
	position:absolute;
	right:0;
	top:0;
	z-index:-1;
}
.logo {
	position:absolute;
	top:0;
	z-index:100;
}
.left-box {
	position:absolute;
	color:yellow;
	padding-top:120px;
	z-index:5;
	text-shadow: 1px 1px 1px #000000, -1px -1px 1px #000000, 1px -1px 1px #000000, -1px 1px 1px #000000;
}
.white-box {
	width:auto;
	margin-top:85px;
	padding: 15px;
	background:white;
	color:black;
	border: ridge 5px #AAAAAA;
	z-index:2;
}
@media screen and (max-height: 444px) {
	.white-box {
		min-height:60%
	}
}
@media screen and (min-height: 445px) and (max-height: 520px) {
	.white-box {
		min-height:65%
	}
}
@media screen and (min-height: 521px) and (max-height: 620px) {
	.white-box {
		min-height:70%
	}
}
@media screen and (min-height: 621px) {
	.white-box {
		min-height:75%;
	}
}
.content {
	position:relative;
	width:100%;
	text-align: justify;
}
.home-images{
	position:relative;
	float:left;
}
.home-image-box{
	position:relative;
	margin-left:auto;
	margin-right:auto;
}
.image-space {
	display: block;
}
.image-img {
	position:absolute;
	display: block;
	border:1px solid black;
}
#left1 {
	top:0px;
	background: url('signs.jpg');
	background-position: 0 0;
	background-size:200%;
}
#left2 {
	bottom:0px;
	display:none;
	background: url('signs.jpg');
	background-position: 400px 0;
	background-size:200%;
}
#right1 {
	top:0px;
	background: url('signs.jpg');
	background-position: 0 300px;
	background-size:200%;
}
#right2 {
	bottom:0px;
	display:none;
	background: url('signs.jpg');
	background-position: 400px 300px;
	background-size:200%;
}
.footer {
	clear: both;
	text-align: center;
	height:20px;
	padding-top: 5px;
	font-size:10pt;
	color: #fff;
	background-color:#246CA9;
	position:absolute;
	display:block;
	bottom:0;
	width:100%;
	border-top: solid red 1px;
}
.footer a{
	color:white;
}
.clearfix {
    display: block;
    visibility: hidden;
    height: 0;
    font-size: 1px;
    clear: both;
    width:100%;
}
.clearfix:after {
    content: ".";
}

.menu {
	margin-top:12px;
	right:5px;
	height:40px;
	color:white;
	text-shadow: 2px 2px 4px #000000;
}
.menu:li {
	list-style: none;
	float: left;
	margin-right: 5px;
}

.fb-box {
	display:block;
	position:absolute;
	border:none;
	overflow:hidden;
	top:50px;
	height:20px;
}

#specialField {
	display:none;
}
.title {
	font-size: 20px;
	font-weight: bold;
	text-align:center;
	padding-top:10px;
	padding-bottom:17px;
}
#home-title {
	font-family: 'High Tower Text';
	font-size: 40px;
	font-weight: bold;
	font-style: italic;
	text-align:center;
	padding-top:10px;
	padding-bottom:17px;
	width:100%;
}
#home {
	display: block;
}
#contact {
	display: none;
}
#gallery {
	display: none;
}
#about {
	display: none;
}
#products {
	display: none;
}
#upload {
	display: none;
}

#nav-wrap {
	//margin-top: 12px;
	z-index: 1000;
}

/* menu icon */
#menu-icon {
	display: none; /* hide menu icon initially */
}
#nav, 
#nav li {
	margin: 0;
	padding: 0;
}
#nav li {
	list-style: none;
	float: left;
	margin-right: 5px;
}

#nav a {
	text-decoration:none;
	color:white;
}
#nav a:hover {
	color: red;
}

#nav ul {
	padding: 2px;
	position: absolute;
	display: none; /* hide dropdown */
}
#nav ul li {
	float: none;
	margin: 0;
	padding: 0;
}
#nav li:hover > ul {
	display: block; /* show dropdown on hover */
}

span.small {
    font-variant: small-caps;
}
.force-wide {
	height:1px;
	visibility:hidden;
}

.photo {
	border:1px solid #000000;
}
.photo2 {
	border:1px solid #FFFFFF;
}
.photo3 {
	border:1px solid #000000;
	height:50px; width:50px;
}
.notes {
	font-size:9pt;
	font-weight: normal;
}
#popImage1 {
	margin: 5px 0;
	border:1px solid black;
	max-width:100%;
}
#popImage2 {
	margin: 5px 0;
	border:1px solid black;
	max-width:100%;
}
.pop-background {
	position:fixed;
	height:100%;
	top:0px;
	left:0px;
	display:none;
	float:center;
	width:100%;
	background:rgba(0, 0, 0, 0.7);
	text-align:center;
	z-index:2000;
}
.pop-foreground {
	float:center;
	position:relative;
	width:95%;
	vertical-align:middle;
	margin: auto;
	background:white;
	color:black;
	padding: 2px 2px 5px 2px;
	border:2px solid black;
}
#pop-caption {
	text-align:center;
	padding: 5px 2px 5px 2px;
}
#rc_menu {
    display: none;
    position: absolute;
    padding: 10px;
    background-color: #ddd;
    border: 1px solid #000;
	color: #009;
	text-decoration:none;
	list-style: none;
}
#rc_menu li {
	padding: 3px 0 3px 0;
	}
#rc_menu li:hover {
	cursor: pointer;
	color: #00c;
	}
.point {
	cursor: pointer;
}
#sortable1, #sortable2 {
	list-style-type: none;
	margin: 0;
	padding: 0;
	min-height: 50px;
	min-width: 100px;
}
.sortBox1 {
	display:block;
	background: url("/admin/drop.jpg") no-repeat center;
	border: 1px gray solid;
	min-height: 150px;
}
.sortBox2 {
	display:block;
	border: 1px gray solid;
	width:95%;
	height:75px;
	margin: 2%;
	overflow-x:auto; overflow-y:hidden;
}
#sortable1 li {
	//margin: 11px;
	float: left;
}
#sortable2 li {
	margin: 2px;
	display: inline;
}
.clearfix10 {
	padding-bottom:110px;
}
.clearfix1:after {
    content: ".";
    display: block;
    visibility: hidden;
    height: 0;
    font-size: 1px;
    clear: both;
    margin-bottom:15px;
    width:100%;
}
.clearfix2 {
	padding-bottom:60px;
}
/************************************************************************************
SMALL/MEDIUM SCREEN SIZE - DISPLAY ONLY 1 HOME IMAGE
*************************************************************************************/
@media screen and (max-width: 1020px) {
	.home-images{
		width:100%;
	}
	.hide-small{
		display:none;
	}
}
@media screen and (min-width: 1021px) {
	.home-images{
		width:50%;
	}
}

/************************************************************************************
SMALL/MEDIUM SCREEN SIZE - WHOLE MENU DOESN'T FIT WIDTH - DISPLAY DROP DOWN
*************************************************************************************/
@media screen and (max-width: 725px) {
	.menu {
		margin-left:70%;
	}
	#nav-wrap {
		z-index:1000;
	}
	#nav-wrap:hover {
		cursor: pointer
	}
	#menu-icon {
		display: block; /* show menu icon */
		z-index:1000;
	}
	#menu-icon.active {
		color: #AAAAAA;
	}
	/* main nav */
	#nav {
		clear: both;
		position: absolute;
		background: #246CA9;
		padding: 0 10px 0 10px;
		display: none; /* visibility will be toggled with jquery */
		z-index:1000;
	}
	#nav li {
		clear: both;
		float: none;
		margin: 5px 0 5px 0;
	}
	#nav a, 
	#nav ul a {
		background: none;
		padding: 0;
		border: none;
		text-decoration: none;
	}
	#nav a:hover, 
	#nav ul a:hover {
		background: none;
		color: #000;
	}
	
	/* dropdown */
	#nav ul {
		//width: auto;
		//position: static;
		//display: block;
		border: none;
		background: inherit;
	}
	#nav ul li {
		margin: 3px 0 3px 0;
	}

}
@media screen and (min-width: 726px) {
	.menu {
		position:absolute;
		right:5px;
		//margin-left:260px;
		font-size:10pt;
	}
	/* ensure #nav is visible on desktop version */
	#nav {
		display: block !important;
	}
	#nav li:before {
		padding-right: 4px;
		content: url(rivet.gif);
	}
	#nav:after {
		content: url(rivet.gif);
	}
	#nav-wrap {
		float:left;
	}

}

/************************************************************************************
SMALL SCREEN SIZE - SHRINK IMAGES IN WHITE BOX
*************************************************************************************/
@media screen and (max-width: 630px) {
	.home-images{
		min-width:90%;
		height:auto;
	}
	.home-image-box{
		width:90%;
	}
	.image-space {
		width:100%;
		height:auto;
	}
	.image-img {
		width:100%;
		height:auto;
	}
}
@media screen and (min-width: 631px) {
	.home-images{
		min-width:400px;
	}
	.home-image-box{
		width:400px;
	}
	.image-space {
		width:400px;
		height:300px;
	}
	.image-img {
		width:400px;
		height:300px;
	}
}

/************************************************************************************
MOBILE
*************************************************************************************/
@media screen and (max-width: 450px) {
	.clearfix {
	    padding-bottom:200px;
	}
	.white-box {
		margin-left:5px;
		margin-right: 5px;
	}
	.left-box {
		left:5px;
		bottom:30px;
	}

	.left1{
		float:left;
	}
	.left2{
		float:left;
	}
	.open {
		display:none;
	}
	
	.logo {
		width:55%;
	}
	.logo img {
		width:100%;
	}
	.fb-box {
		left:60%;
		right:0;
	}
	.header {
		left:35%;
	}
	.photo {
		margin:2%;
		max-width:40%;
	}
	.photo2{
		margin:0 2%;
		max-width:45%;
	}
	.title-space {
		width:30%;
		height:1px;
		display:hidden;
	}
}
@media screen and (max-width: 375px) {
	.title-space {
		width:0;
		height:0;
		display:none;
	}
}

/****************************
desktop version
****************************/
@media screen and (min-width: 451px) {
	.clearfix {
	    padding-bottom:30px;
	}
	.white-box {
		margin-left:170px;
		margin-right: 10px;
	}
	.left-box {
		left:5px;
		top:90px;
	}
	.left1{
		display:block;
	}
	.left2{
		display:block;
	}
	.open {
		position:absolute;
		top:0;
		left:5px;
		font-size:24px;
		color:black;
		z-index:101;
	}
	.logo {
		width:274px;
	}
	.logo img {
		max-width:100%;
	}
	.fb-box {
		left:280px;
	}
	.header {
		left:190px;
	}
	.column-box{
		width:300px;
	}
	.photo{
		margin:11px;
		height:150px; width:150px;
	}
	.photo2 {
		margin:0 11px;
		height:0; width:150px;
	}
}