/* CSS for Grammar Captive's splash pages */

/************************************************************************************
General
*************************************************************************************/
body {
	font-size: 100%
}

	
/************************************************************************************
The Gallery Panels
*************************************************************************************/

.footnote {
	font-size: 0.8em
}

/************************************************************************************
The Welcome Slide
*************************************************************************************/
#welcome_slide  {
	background-color: #5a4149;
	color: #ffffff;
	text-align: right;
	width: auto;
	height: 100%;
}

#welcome_slide #host_image img {
	float: left;
}	

#welcome_slide h1, #welcome_slide h2 {
	font-family: "Bradley Hand", cursive;
}
/************************************************************************************
The Seven Gates
*************************************************************************************/

.gates a:link {color:#5a4149; font-weight: 400; text-decoration: none;}
.gates a:visited {color:#5a4149; font-weight: normal;}
.gates a:hover {color:#999999; font-weight: 800;}
.gates a:active {color:#666; font-weight: 800;}

.gHeading {
	text-align: right;
	text-align: -moz-right;
	text-align: -webkit-right;
	font-size: 2.5em;
}

.pHeading {
	text-align: right;
	text-align: -moz-right;
	text-align: -webkit-right;
	font-size: 1.8em;
}

p.gName {
	text-align: right;
	text-align: -moz-right;
	text-align: -webkit-right;
	margin-top: -1.5em;
	font-size: 0.9em;
	font-weight: 800;
}

.iGT1 {
	height: 360px;
	padding: 15px;
    background: url('../../_images/gates/brandenburg_350x263.png');
    background-repeat: no-repeat;
    background-origin: content-box;
    background-position: right top;
    background-attachment: fixed;
}

.iG1 {
    background: url('../../_images/gates/opacity/brandenburg_350x263.png');
}
.iGT2 {
	height: 360px;
	padding: 15px;
    background: url('../../_images/gates/baroda_350x354.png');
    background-repeat: no-repeat;
    background-origin: content-box;
    background-position: right top;
    background-attachment: fixed;
}
.iG2 {
    background: url('../../_images/gates/opacity/baroda_350x354.png');
}
.iGT3 {
	height: 360px;
	padding: 15px;
    background: url('../../_images/gates/williamsburg_350x309.png');
    background-repeat: no-repeat;
    background-origin: content-box;
    background-position: right top;
    background-attachment: fixed;
}
.iG3 {
    background: url('../../_images/gates/opacity/williamsburg_350x309.png');
}
.iGT4 {
	height: 360px;
	padding: 15px;
    background: url('../../_images/gates/doeksugung_350x263.png');
    background-repeat: no-repeat;
    background-origin: content-box;
    background-position: right top;
    background-attachment: fixed;
}
.iG4 {
    background: url('../../_images/gates/opacity/doeksugung_350x263.png');
}
.iGT5 {
	height: 360px;
	padding: 15px;
    background: url('../../_images/gates/diocletian_263x350.png');
    background-repeat: no-repeat;
    background-origin: content-box;
    background-position: right top;
    background-attachment: fixed;
}
.iG5 {
    background: url('../../_images/gates/opacity/diocletian_263x350.png');
}
    
#iG5C #gate5C1, #iG5C #gate5C2 {
	display: none;
	display: -moz-none;
}

#iG5C1 h2, #iG5C2 h2 {
	font-size: 1.2em;
}

#iG5C1 p, #iG5C2 p {
	font-size: 1.0em;
}

.iGT6 {
	height: 360px;
	padding: 15px;
    background: url('../../_images/gates/holyrood_285x350.png');
    background-repeat: no-repeat;
    background-origin: content-box;
    background-position: right top;
    background-attachment: fixed;
}
.iG6 {
    background: url('../../_images/gates/opacity/holyrood_285x350.png');
}
.iGT7 {
	height: 360px;
	padding: 15px;
    background: url('../../_images/gates/morocco_295x350.png');
    background-repeat: no-repeat;
    background-origin: content-box;
    background-position: right top;
    background-attachment: fixed;
}
.iG7 {
    background: url('../../_images/gates/opacity/morocco_295x350.png');
}
	
.innerGate {
	height: 360px;
	padding: 15px;
    background-repeat: no-repeat;
    background-origin: content-box;
    background-position: right top;
    background-attachment: fixed;
    text-align: left;
    text-align: -moz-left;
    text-align: -webkit-left;
    font-size: 1.3em;
    font-weight: 800;
    font-color: #4E7F4E;
}



#gate1, #gate2, #gate3, #gate4, #gate5, #gate6, #gate7 {
	background-color: #ffffff;
	text-align: left;
}		

#gate1 h2, #gate2 h2, #gate3 h2, #gate4 h2, #gate5 h2, #gate6 h2, #gate7 h2 {
	color: #666666;
	font-size: 1.2em;
}		

li .gates {
	font-size: 1em;
	color: red;
}

#frame_gate1, #frame_gate2, #frame_gate3, #frame_gate4, #frame_gate5, frame_gate5C, #frame_gate6, #frame_gate7 {
	display: none;
}

/************************************************************************************
Sign-Up Form
*************************************************************************************/

/*			#signup_div {
				margin: 0;
				padding-bottom: 15px;
			}
			#g_heading, #g_info, #g_signup, #g_closing {
				background-color: #5a4149;
				padding: 0 15px;
				color:#ffffff;
				text-align:left;
			}
			#g_heading {
				padding-top: 15px;
			}
			#g_heading h1, #g_heading p {
				text-align: center;
			}
			#g_heading h1{
				text-align: center;
				margin-bottom: 0.2em;
			}*/
			
			#g_signup form {
				display: -webkit-flex;
				display: flex;
				-webkit-flex-direction: column;
				flex-direction: column;
			}
				
			#g_signup form #fieldsets {
				display: -webkit-flex;
				display: flex;
				-webkit-flex-direction: row;
				flex-direction: row;
			}
			
			#g_signup div#channel {
				width: 40%;
				text-align: -moz-left;
				text-align: -webkit-left;
				text-align: left;
			}
			
			#g_signup div#contact {
				width: 60%;
			}
			
			#g_signup #contactInfo {
				display: -webkit-flex;
				display: flex;
				-webkit-flex-direction: column;
				flex-direction: column;
			}
						
			#g_signup form fieldset {
				border: 1px solid #ccc;
				margin-bottom: 0.5em;
			}
			
			#g_signup #contact input:focus {
				background: #5a4149;
				color: #ffffff;
				border: 1px solid #ffffff;
			}
			
			#g_signup #contact input {
				background-color: #ccc;
				border: 1px solid #5a4149;
				padding: 0.2em;
				font-weight: bold;
				float: right;
				line-height: 0.8em;
			}

			#g_signup #contact input[type="text"]{
				font-size: 0.7em;
			}

			#g_signup #contact input[name] {
				font-size: 0.7em;
			}

			#g_signup form fieldset span.label {
				color: #000;
				font-weight: 800;
				line-height: 1.2em;
			}
			
			.rightfloat {
				float: right;
			}

/****************************************************************/
/*                      Submit Button                   */
/****************************************************************/

			#g_signup form input[type="submit"] {
				width: 40%;
				display: block;
				margin: auto;
				margin: -webkit-auto;
				margin-top: 0.5em;
				margin-bottom: 0.5em;
				background-color: #ccc;
				color: #5a4149;
				padding: 5px 5px;
				border: none;
				font-weight: bold;
				font-size: 1.3em;
				border-radius: 50%;
				cursor: pointer;
			}
			
			#g_closing hr {
				display: block;
				width:80%;
			}
			
			#g_closing {
				padding-bottom: 1.5em;
			}	
			
/****************************************************************/
/*                      Subscription Checkbox                   */
/****************************************************************/

		input[type=checkbox] {
			visibility: hidden;
		}

		.gateCheckbox {
			width: 60px;
			height: 20px;
			background: #5a4149;
			margin: 10px 30px;

			border-radius: 50px;
			position: relative;
		}
		
		.gateCheckbox:before {
			content: 'OK';
			position: absolute;
			top: 3px;
			left: 10px;
			height: 1px;
			color: #ccc;
			font-size: 10px;
		}
		
		/*.gateCheckbox:after {
			content: 'No';
			position: absolute;
			top: 6px;
			left: 5px;
			height: 1px;
			color: #f00;
			font-size: 10px;
		}*/
		
		.gateCheckbox label {
			display: block;
			width: 26px;
			height: 11px;
			border-radius: 50px;
			transition: all .5s ease;
			cursor: pointer;
			position: absolute;
			top: 4px;
			z-index: 1;
			left: 6px;
			background: #ddd;
		}

		.gateCheckbox input[type=checkbox]:checked + label  {
			left: 30px;
			background: #fff;
		}