/*
Theme Name: Royal Elizabeth
Theme URI: http://www.boundlessdm.com
Description: A custom theme built for the Royal Elizabeth
Version: 1.0
Author: Josh White
Author URI: http://boundlessdm.com
Tags: Clean, Basic, Blanc
*/

@import "css/reset.css";
@import "css/layout.css";
@import url(http://fonts.googleapis.com/css?family=Voltaire);
@import url(http://fonts.googleapis.com/css?family=Raleway:400,700);
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);

* { 
	margin:0px;
	padding:0px;
	/* This brings padding inside of the box */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */		
}

.mobile-show { display:none; }

.slicknav_menu { display:none; }

.clearfix { clear:both; }
.left {	float:left;	}	
.right { float:right; }	
.clear { clear: both; }

body {
	height: 100%;
	background: #fff;
	font-family: 'Droid Sans', sans-serif;
}

.container {
	max-width: 1200px;
	margin: auto;
	position: relative;
}

.header {
	background: #c84e4e url('images/header-bg.jpg') top center repeat;
	min-height: 150px;
	position: relative;
}

.contact-number {
	height: 50px;
	top: 65px;
	position: absolute;
	left: 25px;
	text-align: left;
	color: #fff;
	line-height: 1.25;
	text-shadow:1px 1px 2px #6e1c1c;
	font-size: 14px;
}

.social-box {
	height: 50px;
	top: 60px;
	position: absolute;
	right: 25px;
	text-align: right;
}

.social-box img { padding: 2px; vertical-align: middle; }

.prongs {
	position: absolute;
	background:url('images/royal-prongs.png') no-repeat;
	width: 535px;
	height: 40px;
	left: 50%;
	bottom: 0px;
	margin: 0 0 0 -271px;	
	z-index:30;
}

.prongs-back {
	position: absolute;
	background:url('images/royal-prongs-back.png') no-repeat;
	width: 250px;
	height: 75px;
	left: 50%;
	bottom: -5px;
	margin: 0 0 0 -125px;
	z-index:10;
}

.logo {
	width: 150px;
	height: 154px;
	margin: auto;
	position: relative;
	z-index:20;
	box-shadow: 0px -5px 15px #8c3938;
}

.logo img { display: block; width: 100%; height: auto; }

.top-menu {
	background-color: #3a3a3a;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3a3a3a), to(#252525));
	background-image: -webkit-linear-gradient(top, #3a3a3a, #252525);
	background-image:    -moz-linear-gradient(top, #3a3a3a, #252525);
	background-image:     -ms-linear-gradient(top, #3a3a3a, #252525);
	background-image:      -o-linear-gradient(top, #3a3a3a, #252525);
	text-align: center;
	z-index: 9999;
}

.top-menu ul {
	margin: 0px;
	padding: 0px;
	position: relative;
	z-index: 9999;
}

.top-menu ul li {
	padding: 15px 16px;
	display: inline-block;
	*display: inline;
	zoom: 1;
	position: relative;
}

.top-menu ul li a {
	color: #fff;
	font-size: 18px;
	-webkit-transition: color .25s ease-in-out;
	-moz-transition: color .25s ease-in-out;
	-o-transition: color .25s ease-in-out;
}

.top-menu ul li a:hover { color:#ffa893; }

/* Dropdown */

.top-menu ul ul {
  position: absolute;
  height: 0px;
  overflow:hidden;
  /* width: 300px; */
  /* background: #bf523b; */
  left: 0px;
  top: 45px;
  text-align: left;
  
  -webkit-transition: height 0.3s ease-in-out;
  -moz-transition: height 0.3s ease-in-out;
  -o-transition: height 0.3s ease-in-out;
  -ms-transition: height 0.3s ease-in-out;
  transition: height 0.3s ease-in-out;
}

.top-menu ul ul li {
	border-bottom: 1px solid #db5e45;
	display: block;
	width: 100%;
	padding: 0px;
	background: #bf523b;
	width: 250px;
}

.top-menu ul ul li:hover { background:#b04b37; }

.top-menu ul ul li a { font-size: 14px; display: block; width: 250px; padding: 10px; color:#ffa893; }
.top-menu ul ul li a:hover { color:#fff; }

.top-menu li:hover ul { left: 0px; height: 250px; }


.content {
	padding: 20px 0px;
	background: #fff;
}

.content-left {
	width: 74%;
	display: inline-block;
	*display: inline;
	zoom: 1;
	vertical-align: top;
}

.sidebar {
	width: 24%;
	display: inline-block;
	*display: inline;
	zoom: 1;
	vertical-align: top;
}

.under-repeater {
	height: 50px;
	background: url('images/top-content-repeater.jpg') top center repeat;
}

.homepage-banner {
	width: 100%;
	height: auto;
	margin: -20px 0 0 0;
}

.sub-footer {
	background: #212121;
	color: #784242;
	padding: 10px;
	font-size: 14px;
	text-shadow: 0px 1px 1px #000;
	text-align: left;
}

.top-footer {
	text-align: center;
	background-color: #eee;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#ccc));
	background-image: -webkit-linear-gradient(top, #eee, #ccc);
	background-image:    -moz-linear-gradient(top, #eee, #ccc);
	background-image:     -ms-linear-gradient(top, #eee, #ccc);
	background-image:      -o-linear-gradient(top, #eee, #ccc);
	padding: 10px;
	
}

.top-footer a {
	text-shadow: 0px 1px 1px #a4a4a4;
	color: #6d6d6d;
	-webkit-transition: color .25s ease-in-out;
	-moz-transition: color .25s ease-in-out;
	-o-transition: color .25s ease-in-out;
}

.top-footer a:hover { color:#333; }

.footer {
	background: #3b3b3b;
}

.footer-left {
	width:64%;
	vertical-align:middle;
	display:inline-block;
	*display:inline;
	zoom:1;
	padding: 50px 100px 50px 0px;
	color: #fff;
	font-size: 14px;
	color: #ccc;
	line-height: 1.5;
}

.footer-right {
	width:32%;
	vertical-align:top;
	display:inline-block;
	*display:inline;
	zoom:1;
	padding: 30px 0px;
	text-align: right;
	color: #fff;
}

.footer-right h3 {
	font-size: 20px;
	color: #e16565;
	padding: 0px 0px 10px 0px;
	font-weight: 400;
}

.footer-right a {
	font-size:14px;
	padding: 3px 6px;
	color: #fff;
	background: #e16565;
	border-radius: 4px;
}

.footer-right a:hover {
	background:#000;
	color:#e16565;
}



/* Typography Styles */

p {
	color:#000;
	line-height:1.5;
	padding:10px 15px;
	font-size:16px;	
}

h1 {
	/* font-family: 'Voltaire', sans-serif; */
	font-family: 'Raleway', sans-serif;
	font-weight:400;	
	color:#af4545;
	font-size:36px;
	padding:5px 5px 5px 0px;
	margin:15px;		
	text-shadow:2px 2px 3px #ccc;
	-webkit-text-shadow:2px 2px 3px #ccc;	
	-moz-text-shadow:2px 2px 3px #ccc;	
}

h2 {
	font-size:28px;
	color:#620000;
	padding:10px;		
}

h2.intro {
	font-family: 'Voltaire', sans-serif;
	width: 100%;
	padding: 25px 20%;
	color: #575757;
	background: #f8f8f8;
	text-align: center;
	line-height: 1.5;
	border-bottom: 1px solid #eee;
}

h3 {
	color:#3f3b27;
	font-size:16px;
	padding: 10px;
	font-weight:bold;
}

.post-divider {
	background:transparent;
	height:20px;
	width:500px;
	margin:auto;
	border-bottom:1px dotted #ccc;
}

a { text-decoration: none; }

a:hover { text-decoration: none !important; }


blockquote {
	margin: 15px 20px;
	padding: 10px;
	border-left: 3px solid #eee;
	font-size: 24px;
	font-style: italic;
	font-weight: 400;
	color: #3f3f3f;
}

.sidebar ul { margin: 5px 10px; }
.sidebar ul li { background: none !important; padding: 3px 10px !important; }
.sidebar .menu li a { background: #eee; padding: 4px; border-radius: 3px; display: block;  }

.content a {
	color: #ff5757;
	-webkit-transition: color .15s ease-in-out;
	-moz-transition: color .15s ease-in-out;
	-o-transition: color .15s ease-in-out;
}

.content a:hover { color: #802d2d; }

.content ul {
	padding: 0px;
	margin: 5px 5px 5px 30px;
}

.content ul > li {
	padding: 0px 0px 15px 25px;
	
	background: url('images/li-icon.png') top left no-repeat;
	background-size: 16px 16px;
}

.osc-res-tab .nav-tabs > ul { padding: 0px; margin: 0px; }
.osc-res-tab .nav-tabs > li { padding: 0px; margin: 0px; background: none; }
ul.tab-content li {	background: none; }

.tab-pane ul {
	padding: 5px;
	margin: 5px 5px 5px 30px;
}

.tab-pane ul li {
	padding: 0px 0px 15px 25px;
	
	background: url('images/li-icon.png') top left no-repeat;
	background-size: 16px 16px;
}

hr {
	border-bottom: 2px dotted #ccc;
	border-top: none;
	border-right: none;
	border-left: none;
	width:90%;
	margin:30px auto;
	position:relative;
}

hr:after {
	background: url('images/hr-bg.png');
	content:'';
	position:absolute;
	width:50px;
	height:50px;
	left: 50%;
	top:-25px;
	margin-left:-25px;
}

strong, b { font-weight: bold; }
em, i { font-style: italic; }

/* Columns */

.one-third {
	width:32%;
	vertical-align:top;
	display:inline-block;
	*display:inline;
	zoom:1;
}

.two-third {
	width:65%;
	vertical-align:top;
	display:inline-block;
	*display:inline;
	zoom:1;
}

.one-half {
	width:49%;
	vertical-align:top;
	display:inline-block;
	*display:inline;
	zoom:1;
}

.one-half img, .two-third img, .one-third img { max-width:100%; height: auto; }

/* Room Styles */

.room-header {
	width: 100%;
	position: relative;
	min-height: 200px;
	top: -20px;
}

.room-header img {
	width: 100%;
	height: auto;
}

/*
.room-content-top {
	background: #fff;
	background: rgba(255,255,255,.85);
	position: relative;
	top: -200px;
}
*/

.room-content-top {
	background: url('images/room-content-top.png') top repeat-x;
	position: relative;
	top: -300px;
}


img.room-pic-tn {
	max-width: 75%;
	height: auto;
	display: block;
	margin: 10px;
	border: 3px solid #fff;
	box-shadow: 0px 0px 15px #eee;
}

.room-form-container {
	width: 90%;
	margin: auto;
	padding: 10px;
	background: #eee;
	border-radius: 5px;
}

.room-form-container p {
	font-size: 12px;
	padding: 5px;
}

.room-form-container input[type=text],
.room-form-container input[type=email],
.room-form-container textarea {
	border:1px solid #7a7464;
	background:#fff;
	box-shadow:inset 0px 0px 2px #e0d6bc;
	padding:3px;
	font-size:14px;
	border-radius: 2px;
	max-width: 90%;
}


.floor-container {
  width:500px;
  height:500px;
  position:relative;
  display: block;
}

.floorplan {
  position: absolute;
  top:0;
  right:0;
  width:500px;
  height: 500px;
  background-image: url('images/room-sprite.jpg');
  overflow:hidden;
}

.floor-nav {
  width:500px;
  height: 500px;
  position:absolute;
  display: inline-block;
  vertical-align: top;
  top:0px;
  right:0px;
}

floor-nav a {
  width:500px;
}

a.nicole {
  display:block;
  width: 150px;
  height: 130px;
  position: absolute;
  left: 95px;
  top: 110px;
  z-index:999;
}

a.ryan {
  display:block;
  width: 150px;
  height: 130px;
  position: absolute;
  left: 90px;
  top: 240px;
  z-index:999;  
}

a.syd {
  display:block;
  width: 150px;
  height: 130px;
  position: absolute;
  left: 100px;
  bottom: 50px;
  z-index:999;
}

a.rose {
  display:block;
  width: 150px;
  height: 130px;
  position: absolute;
  right: 50px;
  top: 110px;
  z-index:999;
}

a.nick {
  display:block;
  width: 150px;
  height: 80px;
  position: absolute;
  right: 50px;
  bottom: 180px;
  z-index:999;
}

a.sara {
  display:block;
  width: 150px;
  height: 130px;
  position: absolute;
  right: 50px;
  bottom: 50px;
  z-index:999;
}

a.nicole:hover ~ .floorplan {
    background-position: 3000px;
}

a.rose:hover ~ .floorplan {
    background-position: 500px -1px;
}

a.nick:hover ~ .floorplan {
    background-position: 1000px -1px;
}

a.sara:hover ~ .floorplan {
    background-position: 1500px -1px;
}

a.syd:hover ~ .floorplan {
    background-position: 2000px 0;
}

a.ryan:hover ~ .floorplan {
    background-position: 2500px 0;
}


/* Page Styles */

.ngg-gallery-thumbnail span { display: none !important; }

p.home-quote {
	font-size: 20px;
	font-style: italic;
}

img.shadow {
	border: 4px solid #fff;
	box-shadow: 0px 3px 15px #e1e1e1;
}

.grid {
	text-align: center;
}

.blog-left {	
	width:15%;
	vertical-align:top;
	display:inline-block;
	*display:inline;
	zoom:1;

}

.blog-right {
	width:65%;
	vertical-align:top;
	display:inline-block;
	*display:inline;
	zoom:1;
}

.blog-date {
	width: 50px;
	min-height: 80px;
	margin: auto;
	overflow: hidden;
	padding: 15px 0 0 0;
	height: auto;
	background: url('images/blog-date.png') no-repeat;
	color: #fff;
	text-align: center;
	font-size: 18px;
	text-shadow: 0px 1px 2px #a04731;
}

/* 
.homebox {
	width: 250px;
	height: 200px;
	margin: 10px;
	border: 3px solid #fff;
	box-shadow: 0px 0px 15px #eee;
	display: inline-block;
	*display: inline;
	zoom: 1;
}
*/

.homebox {
	width: 250px;
	height: 250px;
	margin: 10px;
	border: 3px solid #fff;
	box-shadow: 0px 0px 15px #eee;
	display: inline-block;
	*display: inline;
	zoom: 1;
	border-radius:50%;
	overflow:hidden;
	position:relative;
	-webkit-transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
}

.homebox:hover {
	box-shadow: 0px 0px 15px #686868;
}

.homebox-title {
	width: 100%;
	background: #000;
	background: rgba(0,0,0,.75);
	position: absolute;
	bottom:20%;
	display: block;
	height:40px;	
	text-align:center;
}

.homebox h3 {
	font-family: 'Voltaire', sans-serif;
	padding: 10px;
	color: #fff;
	border: none;
	margin: 0px;
}

.homebox img { width: 100%; height: auto; }

.shadow-box {
	border: 3px solid #fff;
	box-shadow: 0px 5px 15px #eee;
}

.sidebar ul { margin:0px; padding:0px }
.sidebar li { padding:5px margin:0px; list-style-type:none; }

a.edit-post-link {
	display:block;
	width:100px;
	height:20px;
	background:#777;
	color:#fff;
	line-height:1.25;
	text-align:center;
	margin:10px;
}

a.edit-post-link:hover {
	background:#000;
	box-shadow:0px 0px 10px #ccc;
	-webkit-box-shadow:0px 0px 10px #ccc;
	-moz-box-shadow:0px 0px 10px #ccc;
	-webkit-transition:all .25s ease-in;
}

a.fancy-room {
	color: #fff;
	display: block;
	width: 90%;
	text-align: center;
	margin: 3px auto;
	font-size: 20px;
	background: #af4545;
	padding: 8px 10px;
	border-radius: 3px;
	box-shadow: 0px 1px 1px #ccc;
	text-shadow: 0px 1px 1px #6e2828;
	-webkit-transition:all .20s ease-in-out;
	-moz-transition:all .20s ease-in-out;
	-o-transition:all .20s ease-in-out;

}

a.fancy-button {
	color: #fff;
	background: #af4545;
	padding: 5px 10px;
	border-radius: 3px;
	box-shadow: 0px 1px 1px #ccc;
	text-shadow: 0px 1px 1px #6e2828;
	-webkit-transition:all .20s ease-in-out;
	-moz-transition:all .20s ease-in-out;
	-o-transition:all .20s ease-in-out;
}

a.fancy-button:hover, a.fancy-room:hover {
	background:#883333;
	color:#fff;
}

a.specials-button {
	color: #fff;
	background: #af4545;
	padding: 5px 10px;
	border-radius: 3px;
	font-size: 20px;
	display: block;
	text-align: center;
	box-shadow: 0px 1px 1px #ccc;
	text-shadow: 0px 1px 1px #6e2828;
	-webkit-transition:all .20s ease-in-out;
	-moz-transition:all .20s ease-in-out;
	-o-transition:all .20s ease-in-out;
}

a.specials-button:hover { background:#883333; color:#fff; }

.specials-container-sm {
	width: 30%;
	margin: 10px;
	float:left;
	border-radius: 10px;
	background: #eee;
	box-shadow: inset 0px 0px 150px #ccc, 0px 1px 3px #222;
	padding: 10px;
	text-align: center;
}

.specials-container {
	width: 90%;
	margin: 10px;
	float:left;
	border-radius: 10px;
	background: #eee;
	box-shadow: inset 0px 0px 150px #ccc, 0px 1px 3px #222;
	padding: 10px;
}

.specials-container h1 {
	color: #4d4d4d;
	padding: 10px;
	margin: 0px;
	border-bottom: 1px solid #ccc;
}

a.specials-link {
	background: #fff;
	border-radius: 4px;
	text-align: center;
	padding: 4px 8px;
	color: #222;
	margin: 5px;
}

a.specials-link:hover { box-shadow: 0px 1px 2px #222; }

/* Tables */

table { margin:10px; }
table tr { }
table td { padding: 5px; border: 1px solid #ccc; }
table tr:nth-child(odd)	{ background-color:#eee; }
table tr:nth-child(even) { background-color:#fff; }

/* Contact Form 7 Styles */

.wpcf7-submit {
	font-family:sans-serif;
	padding:5px;
	background:#ccc;
	color:#fff;
}

.wpcf7-submit:hover {
	background:#000;
}

span.wpcf7-list-item {
	display:block;
}

	
/* Form Inputs */

input:focus,
select:focus,
textarea:focus,
button:focus {
	outline: none;
}
	
input[type=text],
input[type=url],
input[type=tel],
input[type=number],
input[type=color],
input[type=email],
input[type=password],
textarea {
	border:1px solid #7a7464;
	background:#fff;
	box-shadow:inset 0px 0px 2px #e0d6bc;
	padding:5px;
	font-size:16px;
	border-radius: 2px;
}

input[type=submit] {
	background:#a74141;
	border:1px solid #ee1717;
	padding:8px;
	font-size: 18px;
	text-align:center;
	color:#fff;	
	-webkit-transition: background .15s ease-in-out;
	-moz-transition: background .15s ease-in-out;
	-o-transition: background .15s ease-in-out;
}

input[type=submit]:hover { background:#760a0a }
	

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

	.top-menu {
		display:none;
	}
	
	.slicknav_menu {
		display:block;
	}
	
}

@media only screen
and (max-width : 480px) {
	
	.mobile-show { display: block; }
	.mobile-hide { display: none; }
	.prongs, .contact-number { display: none; }
	
	.sidebar { display:none; }
	.content-left { width: 100%; display: block; }
	
	h2.intro { font-size: 18px; }
	h1 { font-size: 24px; }
	
	.social-box { top: 175px; right: 20%; }
	.header { border-bottom: 75px solid #222; }
	
			
	.one-third,.two-third,.one-half {
		width:100%;
		display: block;
	}
	
	.one-third img,.two-third img,.one-half img {
		max-width: 95%;
		display: block;
		height: auto;
		margin: auto;
	}
	
	.footer-left, .footer-right {
		width: 100%;
		display: block;
		text-align: center;
		padding: 10px;
	}
	
	
}