/* MEDIA QUERIES for RWD (Responsive Web Design)
 Start with core styles outside of a media query that apply to mobile and up
 Global typography and design elements, stacked containers
 */

h1 {
	padding-bottom: .25em;
	color: red;
}

h2 {
	padding-bottom: .25em;
	color: blue;
}

h3 {
	padding-bottom: .25em;
	color: green;
}

#tablet, #tablet2 { 
	font-family: 'Orbitron', sans-serif;
	font-size: 2.5em;
	position: relative;
	color: #fff;
	text-shadow: 4px 4px 4px #aaa;
}

#tablet img {
max-width:100%; 
max-height:100%;
margin:auto;
display:block;
}

body {
	font-family: 'Orbitron', sans-serif;
	font-size: 2.5em;
	position: relative;
	color: #fff;
	text-shadow: 4px 4px 4px #aaa;
}

#tablet2 img {
max-width:100%; 
max-height:100%;
margin:auto;
display:block;
}


/*
 H1 { color: green; }
 a:link { color:purple; }
 */
/* Stack the two content containers */
/* .main,
 .sidebar { display:block; width:100%; }

 /* First breakpoint at 576px */
/* Inherits mobile styles, but floats containers to make columns */
/* @media all and (min-width: 36em){
 .main { float: left; width:60%; }
 .sidebar { float: left; width:40%; }
 }

 /* Second breakpoint at 800px */
/* Adjusts column proportions, tweaks base H1 */
/* @media all and (min-width: 50em){
 .main { width:70%; }
 .sidebar { width:30%; }

 /* You can also tweak any other styles in a breakpoint */
/*	H1 { color: blue; font-size:1.2em }
 }
 */

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {

	#tablet, body {
		margin-top: none;
		width: 50% font-size : 50%;
		background-color: yellow;
	}

}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width: 321px) {

	#tablet, body {
		margin-top: none;
		width: 70%;
		font-size: 70%;
		background-color: orange;
	}

}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 320px) {

	#tablet, body {
		margin-top: none;
		width: 70%;
		font-size: 70%;
		background-color: yellow;
	}

}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

	#tablet, body {
		margin-top: 20px;
		width: 100%;
		font-size: 100%;
		background-color: gray;
	}

}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {

	body {
		margin-top: 20px;
		width: 120%;
		font-size: 120%;
		background-color: teal;
	}

}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {

	#tablet, body {
		margin-top: 20px;
		width: 100%;
		font-size: 100%;
		background-color: teal;
	}

}

/* Desktops and laptops ----------- */
@media only screen and (min-width: 1224px) {

	#tablet, body {
		margin-top: 20px;
		width: 100%;
		font-size: 100%;
		background-color: teal;
	}

}

/* Large screens ----------- */
@media only screen and (min-width: 1824px) {

	#tablet, body {
		width: 150% font-size : 150%;
		background-color: teal;
	}

}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) , only screen and (min-device-pixel-ratio: 1.5) {

	#tablet, body {
		top-margin: 0;
		width: 70%;
		font-size: 70%;
		float: left;
	}

}

/* responsive / adaptive css design media query for mobile if column is too wide */

@media screen and (min-width: 600px) {
	nav {
		float: left;
		width: 25%;
	}
	section {
		margin-left: 25%;
	}
}
@media screen and (max-width: 599px) {
	nav li {
		display: inline;
	}
}

#tablet {
	width: 600px;
	height: 900px;
	margin: auto;
	object-fit: contain;
	overflow: hidden
}

img.quarter {
	height: 25%;
	width: 25%;
}

img.half {
	height: 50%;
	width: 50%;
}

.carousel-arrows {
	left: 50%;
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	z-index: 5;
	display: inline-block;
}

.draw-target {
	width: 180px;
	height: 40px;
	background-color: #005500;
	position: relative;
	margin: 0px auto;
}

.clearBoth {
	clear: both;
}

#monogoData {
	clear: both;
}

.starter-template {
	padding: 40px 15px;
	text-align: center;
}

.inputDiv {
	width: 400px;
	border: solid 2px black;
	padding: 3px;
	margin: 3px;
	float: left;
	text-align: right;
}

#map {
	background-color: blue;
	height: 100%;
	width: 100%;
}

#frame0 {
	/*				position: absolute; */
	float: top;
	top: 100px;
	left: 100px;
	width: 450px;
	height: 100px;
	margin: 50px;
	text-align: center;
	background-color: blue;
	border: 10px dotted red;	/* NOTE that this border surrounds the frame area */
}

#frame1 {
	/*			position: absolute; */
	float: bottom;
	top: 600px;
	left: 100px;
	width: 450px;
	height: 400px;
	margin: 50px;
	text-align: center;
	background-color: purple;
	border: 10px double orange;	/* NOTE that this border surrounds the frame area */
	.
}

#frame2 {
	/*			position: absolute; */
	float: bottom;
	top: 1000px;
	left: 10px;
	width: 450px;
	height: 400px;
	margin: 50px;
	text-align: center;
	background-color: red;
	border: 10px dashed green;	/* NOTE that this border surrounds the frame area */
	.
}

#frame3 {
	/*			position: absolute; */
	float: bottom;
	top: 1000px;
	left: 10px;
	width: 450px;
	height: 330px;
	margin: 50px;
	text-align: center;
	border: 10px double blue;	/* NOTE that this border surrounds the frame area */
	background-color: gray;
}

a:link, a:visited {
	color: blue;
}

#search_list {
	width: 450px;	
	float: left;
}
#video {
	width: 425px;
	float: left;

footer {
	margin: 500em, 500em;
    padding: 500em, 500em;
    clear: both
}

#login {
	width: 100px;
	position: absolute;
	right: 50px;
	top: 6px;
	z-index: 100; /* displays login window on top of everything else */
}

#open {
	margin: 0;
	cursor: pointer;
	background: rgb(255,255,255) url(Images/open.png) no-repeat 8px 7px;
	color: rgb(58,80,123);
	padding: 5px 0 5px 30px;
}

#login .close {
	background-image: url(Images/close.png);
	background-color: rgb(110,138,195);
}

#open:hover {
	color: white;
	background-color: rgb(110,138,195);
}

#login form {
	padding: 10px 10px 10px 10px;
	display: none;// initial condtion is to have form not appear
	background-color: rgb(255,255,255);
}
#login label {
	display: inline-block;
	width: 100px;
	text-align: right;
	margin: 0 15px 0 0;
	color: rgb(58,80,123);
}
#login input {
	font-size: 14px;
}
#login #button {
	margin-left: 50px;
}

#controls {
	margin: 50px 0;
	width: 500px;
}


#map-canvas {
	    max-width: 100%;
        max-height: 100%;
        margin: 0px;
        padding: 0px;
        border: 2px;
}

/* the styles for the carousel */
.button_panel	{
	height: 125px;
	padding: 50px 15px;
	float: left;
}
.button_panel img {
	width: 25px;
	height: 25px;
}
#display_panel {
	height: 125px;
	width: 100px;
	overflow: hidden;
	float: left;
}
#image_list {
	left: 0px;
	position: relative;   
    width: 900px;
    list-style: none;  
}
#image_list li	{
	float: left;
	width: 100px;
}
#image_list li img	{
	width: 95px;
	
}

#slides img {
	display: none;
}

img {
	height: 250px;
}

aside {
	width: 240px;
	float: left;
	position: absolute;
}
aside a {
	display: block;
	font-size: 100%;
	padding-bottom: .5em;
}
article {
	width: 440px;
	margin-left: 260px;
}

label { display: inline-block; width: 100px; }
legend { padding: 0.5em; }
fieldset fieldset label { display: block; }
#guest_form { width: 250px; }
#guest_form label { width: 250px; }
#guest_form label.error, #guest_form button.submit { margin-left: 253px; }


#tweenLiteDemo {
 float: right;
 position: relative;
 background-color: #000;
 object-fit: contain;
 margin-left: auto;
 margin-right: auto;
 overflow: hidden;
 width: 692px;
 height: 100px;
 overflow: hidden;
}
 /*	visibility:hidden; } */