/*
Theme Name: 	Chethams Splash
Theme URI: 		http://www.chethams.com
Description: 	Chethams landing page
Version: 		1.0
Author: 		Splinter
Author URI: 	http://www.splinter.co.uk
*/

/*
===========================
CONTENTS:

01 Sensible defaults
02 Typography
03 Media queries 
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@import "css/reset.css";

@font-face {
    font-family: 'Montserrat Chethams';
    src: url('fonts/montserrat-light-webfont.woff2') format('woff2'),
         url('fonts/montserrat-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat Chethams';
    src: url('fonts/montserrat-regular-webfont.woff2') format('woff2'),
         url('fonts/montserrat-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat Chethams';
    src: url('fonts/montserrat-semibold-webfont.woff2') format('woff2'),
         url('fonts/montserrat-semibold-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat Chethams';
    src: url('fonts/montserrat-bold-webfont.woff2') format('woff2'),
         url('fonts/montserrat-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
body 				{ background:#fff; /* Don't forget to style your body to avoid user overrides */ }
::-moz-selection 	{ background:#ff0; color:#333; }
::selection 		{ background:#ff0; color:#333; }

.clearfix:after 	{ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .clearfix    { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/* ---------------------------------------------------------------------------------------------------------- 
02 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*

14 / 16	= 		0.875em 		(14px equivalent)
16 / 16	= 		1em 			(16px equivalent)
18 / 16 = 		1.125em 		(18px equivalent)
21 / 16 = 		1.3125em 		(21px equivalent)
24 / 16 = 		1.5em 			(24px equivalent)
30 / 16 = 		1.875em 		(30px equivalent)

*/

body,
input,
textarea 			{ font-family: 'Montserrat Chethams', sans-serif; color: #ffffff;  }

h1, 
h2, 
h3, 
h4, 
h5, 
h6 					{ font-weight:bold; /* This helps to identify headings at the initial build stage, but you should write something more precise later on */ }

h1					{ font-size: 30px; font-weight: 600; margin: 0 0 20px 0; }
.page-grid.sub-page-table h1 { text-align: center; }
p					{ font-size: 16px; font-weight: 300; line-height: 23px; margin: 0; }
a					{ color: #ffffff; font-weight: 600; text-decoration: none; }
a:hover				{ text-decoration: underline; }

body, 
html 				{ height: 100%; padding: 0; margin: 0; overflow: hidden; }

.spaces body, 
html.spaces 			{ height: auto; padding: 0; margin: 0; overflow: auto; }

html#chethams		{ margin-top: 0 !important; }

#main-header		{ display: none; }

.page-grid			{ width: 100%; height: 100%; background: #ececec; }
.page-grid.sub-page-table { background: #ffffff; height: auto; }
.grid-item			{ width: 50%; height: 50%; float: left; overflow: hidden; background: #003a27; }

.grid-item p		{ margin: 0 0 20px 0; }
.grid-item ul		{ border-top: 2px solid #ffffff; max-width: 260px; margin: 0 auto 20px auto; }
.grid-item ul li	{ border-bottom: 2px solid #ffffff; line-height: 40px; }
.grid-item ul li a	{ display: block; }

.grid-item a.grid-btn		{ display: block; width: 100%; height: 100%; background-image: linear-gradient(to top right, #ececec, #cccccc); }
.grid-item a.grid-btn:hover	{ background-image: linear-gradient(to top right, #cccccc, #aaaaaa); }
.grid-item img.bg	{ position: absolute; left: 50%; top: 50%; margin-left: -700px; margin-top: -436px; }
.grid-item img.bg-colour { display: none; }
.grid-item a.grid-btn:hover img.bg-colour { display: block; }

.grid-img-bw,
.grid-img-colour	{ display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-size: cover; background-position: center; }
.grid-img-colour 	{ display: none; }
.grid-item a.grid-btn:hover .grid-img-colour { display: block; }

.grid-item-title	{ width: 217px; height: 217px; display: block; position: absolute; bottom: 0; left: 50%; margin-left: -108px; background: #003a27; padding: 0 20px; }
.grid-item-title	{ font-size: 30px; line-height: 32px; text-align: center;  }
.sub-page .grid-item-title	{ font-size: 24px; line-height: 26px; background: #ffffff; color: #003a27; }
.grid-item-title img { position: absolute; top: 0; left: 0; display: block; }
.grid-item-title.has-logo { background: none; }
.grid-item-title .grid-item-title-text { display: block; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.grid-item-title.has-logo .grid-item-title-text { display: none; }

.grid-item-inner	{ padding: 0 15%; text-align: center; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

.back-btn			{ z-index: 10; position: absolute; top: 10px; left: 30px; background: url(img/arrow.png) no-repeat 0 0; background-size: 32px 32px; line-height: 32px; padding: 0 0 0 42px; font-size: 14px; }
.admin-bar .back-btn { top: 40px; }

.page-grid.sub-page-table .back-btn { background-color: #003a27; left: 0; top: 0; padding: 10px 30px 10px 70px; background-position: 30px 50%; z-index: 2; }
.admin-bar .page-grid.sub-page-table .back-btn { top: 32px; }

.table-wrapper		{ padding: 33px 30px 30px 30px; color: #2c2c2c; }
.admin-bar .table-wrapper { padding: 75px 30px 30px 30px; }

.table-wrapper table { 
	width: 100%; 
	border-collapse: collapse; 
	font-size: 13px;
	letter-spacing: 0.5px;
}
	
.table-wrapper td {
	background: #dadada;
}

.table-wrapper tr.hover td {
	background: #cacaca;
}

.table-wrapper td.room-name {
	color: #ffffff;
	font-weight: 600; 
}
.table-wrapper td.medieval { 
		background: #336d85; 
	}
.table-wrapper td.contemporary { 
		background: #963821; 
	}
.table-wrapper tr.hover td.medieval { 
		background: #2f657b; 
	}
.table-wrapper tr.hover td.contemporary { 
		background: #8d351f; 
	}
.table-wrapper th { 
		background: #4b4b4b; 
		color: white; 
		font-weight: 600; 
	}
.table-wrapper th.super-header {
		background: #2c2c2c;
}
.table-wrapper th.super-header-blank {
		background: #ffffff;
}
.table-wrapper td, .table-wrapper th { 
		padding: 20px 15px; 
		border: 2px solid #ffffff;
		text-align: left; 
	}
.table-wrapper tr.hover {
   cursor: pointer;
}

/* ---------------------------------------------------------------------------------------------------------- 
03 Media queries (using a mobile-first approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

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

	body, 
	html 				{ height: auto; padding: 0; margin: 0; overflow: auto; }

	.table-wrapper		{ padding: 73px 30px 30px 30px; }
	.admin-bar .table-wrapper { padding: 115px 30px 30px 30px; }

	/* Force table to not be like tables anymore */
	.table-wrapper table, .table-wrapper thead, .table-wrapper tbody, .table-wrapper th, .table-wrapper td, .table-wrapper tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	.table-wrapper thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.table-wrapper tr { border: 1px solid #ccc; }
	
	.table-wrapper td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	.table-wrapper td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 20px;
		left: 15px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	.table-wrapper td:nth-of-type(1):before { content: "Room"; }
	.table-wrapper td:nth-of-type(2):before { content: "Theatre"; }
	.table-wrapper td:nth-of-type(3):before { content: "Cabaret"; }
	.table-wrapper td:nth-of-type(4):before { content: "Boardroom"; }
	.table-wrapper td:nth-of-type(5):before { content: "Banqueting"; }
	.table-wrapper td:nth-of-type(6):before { content: "Reception"; }
	.table-wrapper td:nth-of-type(7):before { content: "Length"; }
	.table-wrapper td:nth-of-type(8):before { content: "Width"; }
	.table-wrapper td:nth-of-type(9):before { content: "Height"; }
	.table-wrapper td:nth-of-type(10):before { content: "M²"; }

}

@media screen and (max-width:960px) {
	body, html { height: auto; }
	.page-grid { height: auto; }
	.grid-item { width: 100%; height: auto; min-height: 234px; clear: both; float: none; }
	.grid-item-title,
	.sub-page .grid-item-title { height: auto; line-height: 1.2em; padding: 15px; font-size: 24px; width: 70%; margin: 0 15%; left: auto; }
	.grid-item-title.has-logo { width: 150px; height: 150px; margin-left: -75px; left: 50%; }
	.grid-item-title.has-logo img { width: 100%; }
	.grid-item-inner { position: static; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); padding: 60px 30px; }
	.grid-item-title .grid-item-title-text { position: static; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}