/* 
   CA1 stylesheet
   Filename: styles.css

   Author:   Wong Heng Yee
   Date:     18/05/2016
 */
 
 /*All for the small screen 397px*/
article, body, div, form, figure, figcaption, footer, img, nav, p, a, h1, h2, ul, li{
	border: 0;
	padding: 0;
	margin: 0;
	}

	ul{
	list-style-type: none;
	}
	#content {
		margin-top:6em; 
		margin-bottom:3em; 
		width:100%; 
		height:450px; 
		position:relative; 
		z-index: -1000;
		background: url("greyscale.jpg");
	}
 /*Home Page-----------------------------------------------------------------------------------*/
	/*Homepage_Upper Navigation*/
	.weblogo {
		padding-top: 1em;
		padding-bottom: 0.5em;
		padding-left: 2em;
	}
	
	nav.sitenavigation {
		width: 18%;
		padding: 5% 1%;
		text-align: center;
		float: right;
		position: relative;
	}

	div.navigation-menu-button {
		float: right;
	}

	nav.sitenavigation ul {
		display:none;
		background-color: black;
		position: absolute;
		right: 0;
		top: 70%;
		z-index: 2;
	}
	nav.sitenavigation li {
		margin: 0.3em 0.5em;
		font-size: 1.3em;
		line-height: 1.4em;
		text-align: left;
		display: inline-block;
	}
	nav.sitenavigation a:link {
		text-decoration: none;
		color: white;
	}
	nav.sitenavigation a:visited {
		color: pink;
	}
	nav.sitenavigation a:hover, nav.sitenavigation a:focus {
		color: red;
	}
	 /*home body container*/
	#index {
		background: url("greyscale.jpg");
		width: 100%;
		position: absolute;
		top: 0;
        left: 0;
		z-index: -1;
	}
	p.welcome {
        font-family: "Galada", cursive;
		color:black;
		font-size: 30px;
		padding-top: 3em;
		text-align: center;
	}
	p.quote {
		font-family: "Indie Flower", cursive;
		color: black;
		font-size: 25px;
		padding-top: 1.5em;
		padding-bottom: 3em;
		text-align: center;
	}
	a.indexface {
		padding-right: 2em;
	}
	
	a.indexinsta {
		padding-right: 2em;
	}
	figure.socialimage a:active {
		position: relative;
		top: 2px;
		left: 2px;
	}
    figure.socialimage a:hover, figure.socialimage a:focus {
			color: ivory;
	}
		.footersocial {
		text-align: center;
		width: 100%;
	}
	footer.footersocial{
		margin: 0 auto;
		padding-bottom: 1.5em;
	}
	
	/*About Me Page-----------------------------------------------------------------------------*/
	body.aboutmebg {
		background: url("greyscale.jpg");
		width: 100%;
		position: absolute;
		top: 0;
        left: 0;
	}
	nav.sitenavigation {
		font-family: "Slabo 27px", serif;
		color: black;
		text-align: center;
		font-size: 20px;
    }
	
	#intro {
		background-color: white;
		margin-top: 0.5em;
		padding-bottom: 0.5em;
		padding-left: 0.5em;
		padding-right: 0.5em;
	}
	.self{
		display: block;
		padding-top: 3em;
		width: 50%;
		height: 50%;
		margin-left: auto;
		margin-right: auto;
	}
	#intro h2 {
		text-align: center;
		padding-top: 3em;
	}
	#intro p{
		font-family: "Papyrus", fantasy;
		font-style: normal;
		font-size: 30px;
		text-align: center;
	}
	.top-link {
		padding-top: 2em;
		padding-bottom: 1em;
		right: auto;
		left: 0;
	}
	.top-link a {
		padding: 6px 15px;
		border: 2px solid #777;
		display: inline-block;
		background-color: #ebf8fa;
		border-radius: 10px;
		box-shadow: 0 4px #999;
	}
	.top-link a:link {
		text-decoration: none;
	}
	.top-link a:hover, .top-link a:focus {
		border-color: #34180f;
		color: red;
		background-color: #ebf8fa;
	}
	.top-link:active {
		transform: translateY(4px);
	}
	/*Portfolio Page-----------------------------------------------------------------------------*/
	div.img {
		border: 1px solid #ccc;
	}

	div.img:hover {
		border: 1px solid #777;
	}

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

	figcaption.desc {
		font-size: 30px;
		padding: 15px;
		text-align: center;
	}

  * {
		box-sizing: border-box;
	}

	.responsive {
		padding: 1em 1em;
		float: left;
		width: 24.99999%;
	}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}

	.clearfix:after {
		content: "";
		display: table;
		clear: both;
	}
	/*--------------------------------------------------------------------------------------------*/
	/*Animation Page*/
	.youtubeimg{
		text-align: center;
		margin-top: 12em;
		margin-bottom: 1em;
		width: 100%;
		height: auto;
	}
	.youtubefig{
		text-align: center;
		font-size: 35px;
	}
	/*--------------------------------------------------------------------------------------------*/
	/*Contact Page*/
	body.contactbg {
		background: url("greyscale.jpg");
		width: 100%;
		position: absolute;
		top: 0;
        left: 0;
	}
	article h2 {
		padding-top: 3em;
		text-align: center;
		margin: 0 auto;
	}
	p.form-instructions {
		text-align: center;
		margin: 0 auto;
	}
	nav.contactbody {
		background-color: #c6b9c2;
		font-family: "Algerian", fantasy;
		font-style: normal;
		font-size: 20px;
		margin-top: 2em;
	}
	/*styling forms---------------------------------------------------------------------*/
	/* feedback preview section*/
	.feedback-preview {
		max-width: 400px;
		padding: 10px;
		margin: 0 auto;
		border: 2px solid black;
		font-size: 1.3em;
		background-color: white;
		display: none;
	}
	.show {
		display: block;
	}
	.feedback-preview p { 
		margin-bottom: 0.3em;
	}
	.table-row {
		display: table-row;
	}
	.table-row div:first-child {
		font-weight: bold;
	}
	.table-cell {
		padding: 0 0.2em;
		display: table-cell;
	}
	.feedback-content {
		padding: 0.4em 0.2em 0;
	}
	footer {
		padding-top: 3em;
		text-align: center;
	}
	/*Form*/
	form {
		padding: 10px;
	}
	.container {
		min-width: 300px;
		max-width: 800px;
		margin: 0 auto;
		padding: 0 3% 1em;
		margin-top: 2.5em;
		background-color: #ffffff ;
		overflow: auto;
	}
	fieldset fieldset {
		margin-top: 1em;
		padding: 0.8em;
		border: 1px solid #777;
	}
	legend{
		font-size: 1.25em;
	}
	.contactinfo legend, .reserveinfo > legend, .additionalinfo legend, .countryinfo legend, .genderinfo legend{
		margin-left: -0.1em;
		font-weight: bold;
	}
	.schedule {
		position: relative;
	}
/* field styles */
	.contactinfo input, textarea {
		border: 1px solid #ccc;
		padding: 0.2em;
		font-size: 1em;
	}
	select {
		margin-bottom: 0.6em;
	}
	.contactinfo input {
		position: absolute;
		left: 5em;
	}
	.schedule input {
		position: absolute;
		left: 10em;
	}
	#nameinput, #emailinput {
		width: 8em;
	}
/* Label Styles */
	label {
		font-size: 1em;
		line-height: 1.6em;
	}
	.contactinfo label {
		display: block;
		position: relative;
		margin: 0.8em 0;
	}
	.submitbutton {
		text-align: center;
	}
	#submit {
		border: none;
		padding: 0.4em 0.6em;
		background-color: #e3d5ba;
		font-size: 1.25em;
		border-radius: 10px;
	}
	#nameinput:focus{
		background-color: #ffd;
	}
	#emailinput:focus{
		background-color: #ffd;
	}
	.roominfo label, .genderinfo label{
		margin-right: 1.6em;
	}

	.schedule p {
		width: 9.2em;
		float: left;
	}
	.date-picker label {
		position: absolute;
		left: -10000px;
	}
	textarea {
		width: 250px;
		max-width: 263px;
		height: 50px;
		max-height: 51px;
	}
	/*Social Platforms-----------------------------------------------------------------*/
	nav.social {
		margin-top: 5em;
		font-family: "Algerian", fantasy;
		font-style: normal;
		font-size: 20px;
		
	}
	figure.socialimage{
		display: inline-block;
		padding-left: 1.5em;
	}
	a.face {
		padding-bottom: 1em;
		padding-left: 0.5em;
		padding-top: 1em;
		padding-right: 5em;
	}
	a.insta {
		padding-right:5em;
	}
	a.twit {
		padding-right: 5em;
	}
	
	figure.socialimage a:active {
		position: relative;
		top: 2px;
		left: 2px;
	}
	
    figure.socialimage a:hover, figure.socialimage a:focus {
			color: ivory;
	}
/*--------------------------------------------------------------------------------------480---*/	
/*Mobile Screen Styles */
	@media screen and (min-width: 480px) {
		header {
			float: none;
			width: auto;
		}
		div.navigation-menu-button {
			display: none;
		}
		nav.sitenavigation {
			width: 100%;
			padding: 0;
		}
		nav.sitenavigation ul {
			border: none;
			width: 100%;
			display: block;
			position: static;
			text-align: center;
		}
		nav.sitenavigation li {
			display: inline-block;
		}
		li a, .dropbtn {
			display: inline-block;
			color: white;
			text-align: center;
			padding: 14px 16px;
			text-decoration: none;
		}
		li a:hover, .dropdown:hover .dropbtn {
			background-color: white;
			color: black;
		}

		li.dropdown {
			display: inline-block;
		}

		.dropdown-content {
			display: none;
			position: absolute;
			background-color: #2f2f2f;
			min-width: 160px;
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		}

		.dropdown-content a {
			color: black;
			padding: 12px 16px;
			text-decoration: none;
			display: block;
			text-align: center;
		}

		.dropdown-content a:hover {
			background-color: white;
		}
		.dropdown a:visited {
			text-decoration: none;
			color: pink;
		}

		.dropdown:hover .dropdown-content {
			display: block;
		}
		.self{
			display: block;
			padding-top: 3em;
			width: 50%;
			height: 50%;
			margin-left: auto;
			margin-right: auto;
		}
		footer.footersocial{
			margin: 0 auto;
			padding-bottom: 1.5em;
		}
			p.welcome {
			padding-top: 1em;
			font-size: 50px;
			}
		#content {
		margin-top:11em; 
		margin-bottom:2em; 
		width:100%; 
		height:450px; 
		position:relative;
		z-index: -1000;		
		background: url("greyscale.jpg");
	}
	textarea{
		width: 350px;
		max-width: 363px;
		height: 50px;
		max-height: 51px;
	}
	/*---------------------------------------------------------------------------------1280---*/
/*Screen Styles  1280 x 800*/
	@media screen and (min-width: 1280px) {
		body.contactbg {
		background: url("greyscale.jpg");
		width: 100%;
		position: absolute;
		top: 0;
        left: 0;
	}
	.weblogo {
		width: 100%;
		height: 100%;
	}
	.self{
		display: block;
		padding-top: 3em;
		width: 50%;
		height: 50%;
		margin-left: auto;
		margin-right: auto;
	}
	article h2 {
		padding-top: 3em;
		text-align: center;
		margin: 0 auto;
	}
	p.form-instructions {
		text-align: center;
		margin: 0 auto;
	}
	nav.contactbody {
		background-color: #c6b9c2;
		font-family: "Algerian", fantasy;
		font-style: normal;
		font-size: 20px;
		margin-top: 2em;
	}
		p.welcome {
		padding-top: 1em;
		font-size: 100px;

	}
	
	p.quote {
		font-size: 35px;
	}
	.form-instructions {
		color: red;
		text-align: center;
	}
/*slider*/
#content {
		margin-top:11em; 
		margin-bottom:3em; 
		width:100%; 
		height:450px; 
		position:relative;
		z-index: -1000;
		background: url("greyscale.jpg");
	}
/* feedback preview section*/
	.feedback-preview {
		max-width: 400px;
		padding: 10px;
		margin: 0 auto;
		border: 2px solid black;
		font-size: 1.3em;
		background-color: white;
		display: none;
	}
	.show {
		display: block;
	}
	.feedback-preview p { 
		margin-bottom: 0.3em;
	}
	.table-row {
		display: table-row;
	}
	.table-row div:first-child {
		font-weight: bold;
	}
	.table-cell {
		padding: 0 0.2em;
		display: table-cell;
	}
	.feedback-content {
		padding: 0.4em 0.2em 0;
	}
	footer {
		padding-top: 3em;
		text-align: center;
	}
	/*Form*/
	form {
		padding: 10px;
	}
	.container {
		min-width: 600px;
		max-width: 800px;
		margin: 0 auto;
		padding: 0 3% 1em;
		margin-top: 5em;
		background-color: #ffffff ;
		overflow: auto;
	}
	fieldset fieldset {
		margin-top: 1em;
		padding: 0.8em;
		border: 1px solid #777;
	}
	legend{
		font-size: 2em;
	}
	.contactinfo legend, .reserveinfo > legend, .additionalinfo legend, .countryinfo legend, .genderinfo legend{
		margin-left: -0.1em;
		font-weight: bold;
	}
	.schedule {
		position: relative;
	}
/* field styles */
	.contactinfo input, textarea {
		border: 1px solid #ccc;
		padding: 0.2em;
		font-size: 1em;
	}
	select {
		margin-bottom: 0.6em;
	}
	.contactinfo input {
		position: absolute;
		left: 5em;
	}
	.schedule input {
		position: absolute;
		left: 10em;
	}
	#nameinput, #emailinput {
		width: 15em;
	}
	#phoneinput {
		width: 12em;
	}
/* Label Styles */
	label {
		font-size: 1em;
		line-height: 1.6em;
	}
	.contactinfo label {
		display: block;
		position: relative;
		margin: 0.8em 0;
	}
	.submitbutton {
		text-align: center;
	}
	#submit {
		border: none;
		padding: 0.4em 0.6em;
		background-color: #e3d5ba;
		font-size: 1.25em;
		border-radius: 10px;
	}
	#nameinput:focus{
		background-color: #ffd;
	}
	#emailinput:focus{
		background-color: #ffd;
	}
	.roominfo label, .genderinfo label{
		margin-right: 1.6em;
	}

	.schedule p {
		width: 9.2em;
		float: left;
	}
	.date-picker label {
		position: absolute;
		left: -10000px;
	}
	textarea {
		width: 400px;
		max-width: 410px;
		height: 50px;
		max-height: 51px;
	}