/*** Defining Media Queries ***/
@media only screen
and (max-device-width : 730px) { 
          nav ul     {display: none;}
          nav select {
          	display: inline-block;
          	font-size: 5em;
          	width: 100%;
          	}         
}

body {
     margin: 0;
     padding: 0;
     }

header {
     width: 1110px;
     height: 250px;
     border: medium solid whitesmoke;
     background: #ddd url(/images/banner.png) no-repeat left top;
     border-radius: 10px;
     margin: 7px auto 0 0;
     }
     
nav {
     margin: 5px auto 5px auto;
     }
     
nav select {
	display: none;
}

video {
     border: 10px #ddd solid;
     border-radius: 6px;
     }

/*** Defining Id Styles ***/
#articlecontainer {
     margin: 0 auto;
     width: 1050px;  
     display: block;   
     }
     
#bloopers {
     width: 980px;
     margin: 15px auto 35px auto;
     display: block;
     }
     
#body_content {
     width: 1116px;
     margin: 0 auto;
     }
     
#content {
     width: 1035px;
     margin: 0px auto 0 auto;
     }
     
#footer-area {
     color: tan;
     font-size: large;
     padding: 0px;
     overflow: hidden;
	 width: 1110px;
	 margin: 0px auto;
	 border: 1px solid #222;
	 background-color: #111;
	 background-image: linear-gradient(#444, #111);
	 border-radius: 6px;
	 box-shadow: 0 1px 1px #777;
     }
     
#googlehotelmaya, #googleairports {
	margin: 0;
	border: 6px;
	border-radius: 6px;
	}

#main {
     width: 1110px;
     margin: 0 auto;
     padding-top: 15px;
     background: ivory;
     overflow: hidden;
     border: medium solid whitesmoke;
     border-radius: 10px;
     }
     
#photocontainer {
	margin-top: 30px;
	margin-bottom: 60px;
}
     
#videocontainer {
     margin: 0 auto;
     width: 980px;     
     }
     
#videolongbeach, #videotoofabulous, #videothebloopers {
     margin: 0 auto;
     width: 500px;
     }
     
/*** Defining Classes ***/
.articleleft {
     width: 172px;
     margin-left: 20px;
     background-color: silver;    
     }
     
.articleright {
     width: 850px;
     margin-left: 20px;
     }

.articleright ul:first-child {
	margin-bottom: 10px;
	}
	
.bold {
     font-weight: bold;     
     }
	
.center {
     text-align: center;
     }
	
.footer-segment {
     float: right;
     margin: auto;
     width: 500px;
     }

.footer-segment img {
     margin: auto;
     }
	
.imagehalf {
	margin: 10px 0;
	border: 6px whitesmoke solid;
	border-radius: 10px;
	float: left;
}

.left {
     text-align: left;
     }
     
.littlebox {
	 display: block;
     min-height: 170px;
     margin-bottom: 20px;
     border-bottom: black 1px solid;
     }
     
.moving {
	-webkit-animation-name: bounce-back-forth;
	-moz-animation-name: bounce-back-forth;
	-o-animation-name: bounce-back-forth;
	animation-name: bounce-back-forth;
	
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	-o-animation-duration: 2s;
	-animation-duration: 2s;
	
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	-animation-iteration-count: infinite;
	
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	-animation-fill-mode: both;
	
	-webkit-animation-timing-function: ease-in-out;
	-moz-animation-timing-function: ease-in-out;
	-o-animation-timing-function: ease-in-out;
	-animation-timing-function: ease-in-out;
	
	-webkit-animation-direction: alternate;
	-moz-animation-direction: alternate;
  -o-animation-direction: alternate;
	-animation-direction: alternate;
	
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	-o-animation-play-state: paused;
	animation-play-state: paused;
	
}

.moving:hover {
		-webkit-animation-play-state: running;
		-moz-animation-play-state: running;
		-o-animation-play-state: running;
		animation-play-state: running;
	}
	
.new {
	padding: 8px 8px 8px 40px;
	margin: 8px 0 8px 0;
	border: 2px red solid;
	border-radius: 6px;
	background: url('/images/newicon.png') center left no-repeat;
	display: block;
}

.newmenuoption {
	padding: 0px 40px 0 0;
	margin: 0;
	background: url('/images/newicon.png') center right no-repeat;
	display: block;
}

.photo_slides {
	width: 1035px;
}

.photo_slides img {
	display: table-cell;
	margin: 0 auto;
	border-radius: 10px;
	box-shadow: tan 5px 5px 5px;
	border: ivory solid 3px;
}
   
.red {
     color:red;
     font-weight: bold;
     }
     
.right {
     text-align: right;
     }
     
.rightsideimage {
     float: right;
     margin-bottom: 10px;
     margin-left: 10px;     
     }
     
.slide_image {
	display: none;
}
     
.small {
     font-size: small;
     }
     
.shadow {
     color: saddlebrown;
     border-radius: 3px;     
     }

.table {
     display: table;
     margin-bottom: 10px;
     }
          
.table_row {
     display: table-row;
     }
     
.table_cell {
     display: table-cell;
     }

.top {
     vertical-align: top;
     }

/*** Defining Tag Styles ***/
a {
     font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
     text-decoration: none;
     color: darkslategrey;
     }
     
a.shadow:hover { 
     font-weight: normal;

     box-shadow: -10px 10px 5px 0px #555;

     z-index: 1;
 
     -webkit-transition: all .2s ease-in-out;
     -moz-transition: all .2s ease-in-out; 
     -o-transition: all .2s ease-in-out;
     transition: all .2s ease-in-out;
     }
     
article {
     border-radius: 6px;
     }
     
article img {
     display: block;
     border-radius: 6px;
     margin: 12px auto 12px auto;
     }

article, article.box {
     background-color: inherit;
     margin-bottom: 20px;
     color: black;
     width: 172px;
     float: left;
     }
     
article.box p {
     text-align: right;
     padding-right: 10px;
     }
     
article.box, p.bloopers {
     background-color: silver;     
     }
     
article.box:hover {
     background-color: tan;
     font-weight: bold;
     box-shadow: -10px 10px 5px 0px #555;
     z-index: 1;
     
     -webkit-transition: all .2s ease-in-out;
     -moz-transition: all .2s ease-in-out;
     -o-transition: all .2s ease-in-out;
     transition: all .2s ease-in-out; 
     }
     
article.box:hover p {
     color: black;
     }
     
article li {
     padding-left: 20px;
     color: darkslategrey;
     }
     
article ul {
     color: darkslategrey;
     list-style-position: inside;
     }
     
footer {
     width: 1116px;
     margin-top: 5px;
     margin-bottom: 5px;
     clear: both;
     }
          
footer p {
     color: ivory;
     margin-bottom: 10px;
     margin-top: 10px;     
     }
     
h1 {
     font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
     font-size: x-large;
     color: black;
     margin-bottom: 10px;
     }
     
h2 {
     font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
     font-size: large;
     color: black;
     margin-bottom: 10px;
     }

     
p, input, label, textarea, ul, li {
     font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
     font-size: large;
     color: darkslategrey;
     }

p, input, label, textarea {
     margin-bottom: 8px;
     }

ul#nav {
	list-style-type: none;
	margin: 10px 0 10px;
	padding: 0;
	}
	
ul#nav li {
	float: left;
	width: 30px;
}

ul#nav li a {
	text-decoration: none;
	color: black;
	padding: 5px;
}

/*** Defining transformations ***/
@-webkit-keyframes bounce-back-forth {
	from {-webkit-transform: translateX(0);}
	to {-webkit-transform: translateX(50px);}
	}

@-moz-keyframes bounce-back-forth {
	from {-webkit-transform: translateX(0);}
	to {-webkit-transform: translateX(50px);}
	}

@-o-keyframes bounce-back-forth {
	from {-webkit-transform: translateX(0);}
	to {-webkit-transform: translateX(50px);}
	}
	
@keyframes bounce-back-forth {
	from {-webkit-transform: translateX(0);}
	to {-webkit-transform: translateX(50px);}
	}