weeding.css

/*CSS for Weeding Website*/

*{
	margin: 0; 
	padding: 0;
	border: 0;
}

body{
	background-color: #FFF;
	font-family: 'Open Sans', 'Helvetica', sans-serif;
	color: #6e6e6e;	
}

a{
	text-decoration: none;
	font-family: 'Open Sans', 'Helvetica', sans-serif;
	font-size: 14px;
	color: #3b81c4;
}

a.small{
	text-decoration: none;
	font-family: 'Open Sans', 'Helvetica', sans-serif;
	font-size: 11px;
	font-weight: 700;
	color: #3b81c4;
}

a:hover{ color: #8C8C8C; }

.left a{
	color: #292b87;
	text-decoration: underline;
}
a.playfair, .playfair{ font-family: "Playfair Display", serif; }
label.playfair{ font-size: 15px; }

h1{
	font-family: "Playfair Display", serif;
	font-weight: 700;
	font-size: 83px;
}
h2{
	font-family: "Playfair Display", serif;
	font-weight: 700;
	font-style: italic;
	font-size: 46px;
}
/*h3{}*/
h4{
	font-family: "Playfair Display", serif;
	font-style: italic;
	font-weight: 400;
	font-size: 30px;
	margin: 40px 0 0 0;
}
	.zero h4{
		font-family: "Open Sans", sans-serif;
		font-size: 14px;
		font-weight: 700;
		font-style: normal;
		float: left;
		clear: left;
	}
h5{
	font-family: "Playfair Display", serif;
	font-weight: 400;
	font-size: 24px;
	margin-top: 8px;
	margin-bottom: 8px;
}
	.answers h5{ margin: -10px 0 0 75px; }
h6{
	font-family: "Playfair Display", serif;
	font-weight: 400;
	font-size: 18px;
}

img{ display: block; }

p{
	font-size: 14px;
	font-weight: 400;
	margin-top: 14px;
	color: #363636;
}

ul{ list-style-type: none; }

.wrapper{ min-width: 545px; }

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
.clearfix:after{
	content: "";
	display: table;
	clear: both;	
}

.left{ float: left; }

.right{ float: right; }
	.right img, .left img{ margin: 59px auto 0;}
	.right img{
		border: 12px solid #fff;
		box-shadow: 1px 4px 5px 0 rgba(0,0,0,.3);
	}

.center{ text-align: center; }

.bold{ font-weight: 700; }
.italic{ font-style: italic; }
.normal{ font-style: normal;}


.smalltext{
	font-size: 10px;
	text-align: center;
	color: #666;
}

br.forty{ margin-top: 10px; }

.fifty{
	width: 50%;
	margin: 0 auto 70px;
}
.fifty p{ 
	margin: 0 0 0 10px; 
	font-weight: 700;
}
.sixty{ 
	width: 63%;
	margin: 0 auto 30px;
}
.sixty a{ font-size: 18px; }

.zero { margin-top: 60px;}
.zero h4, .zero p{ margin: 10px; }

.spacer{
	height: 400px;
	width: 99%;
}

a.attribution{
	position: absolute;
	bottom: 5px;
	right: 2.1%;
	text-align: right;
	font-size: 13px;
	font-weight: 400;
	background-color: transparent;
	padding: 0 3px;
	color: #6e6e6e;
}
#rsvp a.attribution{
	margin-right: 1%;
	position: relative;
	float: right;
	bottom: inherit;
	right: inherit;
}
a.attribution.whitebg{ background-color: rgba(255,255,255,0.57); }

#rsvp .invert h1, #rsvp .invert h2{ color: #000; }
.invert h1, .invert h2, .invert #topnav ul li a, .invert a.attribution:hover{
	color: #FFF;
	transition: color, 0.3s, ease, 0s;
}

.invert #topnav ul li a:hover, .invert a.attribution{
	color: #4C4C4C;
	text-decoration: none;
	transition: color, 0.3s, ease, 0s;
}

.underline{ text-decoration: underline;}

ul.dash li{
	list-style-type: disc;
	font-size: 14px;
	margin-left: 16px;
	color: #aeac12;
	padding-left: 8px;
	padding-bottom: 12px;
}
.dot{ color: #333333; }

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
header, section, footer{
	max-width: 1280px;
	margin: 0 auto;
}
	header img{
		width: 100%;
		z-index: -50;
	}

#home{ 
	position: relative; 
	color: #00eecc;
}
#rsvp{
	background-image: url("images/altoshills.jpg");
	background-repeat: no-repeat;
	background-size: cover; /*100%*/
	background-color: #d1bfa6;
}
#details{ position: relative; }

	header#home #title, header#details #title{
		position: absolute;
		left: 10%;
		top: 35%;
	}
	#rsvp #title{
		margin-top: 30px;
    text-align: center;
	}
	
	header h2{ line-height: 135%; }

	.invert h1 a{
		font-weight: 400;
		font-size: 64px;
		color: #FFF;
	}

#topnav{
	position: absolute;
	top: 0; 
	left: 0; 
	z-index: 2;
	width: 100%; 
	padding-top: 3px;
	padding-bottom: 3px;
}	
	#topnav img{ 
		display: inline;
		width: 18px;
		height: 18px;
		padding-right: 7px;
		position: relative;
		top: 2px;
	}	

.grey{ background-color: rgba(155,155,154,.6); }
.blue{ background-color: rgba(109,169,217,.6); }
.brown{ background-color: rgba(97,85,83,.6); }	
	.grey a, .blue a, .brown a{ color: #FFF; }

	#topnav ul li{
		position: relative;
		display: inline-block;
		width: 31%;
		text-align: center;
		text-align: -webkit-center;
		text-align: -moz-center;
	}
		#topnav ul li a{
			font-size: 16px;
			letter-spacing: 1px;
			font-weight: 700;
			text-align: center;
			text-align: -webkit-center;
			text-align: -moz-center;
		}
		#topnav ul li a:hover{ text-decoration: underline; }

	#topnav a.active{ color: #000; }

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
	section.answers h3{ margin: 0 50% 0 0;  }

	#story h6.center{
			margin: 20px 0 30px 0;
		}

	.yellow{ background-color: #ffde00; }
	p.yellow{
		padding: 4px 6px 4px 10px;
    width: 270px;
	}

	p.white{
		background-color: #fff;
		padding: 4px 6px 4px 10px;
		width: 110px;
	}

	#midnav .left{
		width: 100%;
		min-height: 290px;
	}
		#midnav .left h3{
			width: 50%;
			margin: 24px 0 21px 0;
		}
		#midnav .left h3.mid{ margin-bottom: 16px; }
		
		#midnav ul.main{ margin-top: 20px; }

		#midnav ul li a.main{text-decoration: none; }

		#midnav .left ul li{
			display: inline;
			position: relative;
		}
			#midnav .left ul li a{
				font-weight: 700;
				display: inline;
				margin: 0 22% 0 0;
				color: #4C4C4C;
			}
					#midnav .left ul li ul{
						position: absolute;
						top: 21px;
						left: 0px;
						background-color: transparent;
						padding: 0;
					}
							#midnav .left ul li ul li a{
								font-family: "Playfair Display", serif;
								font-size: 20px;
								font-weight: 400;
								font-style: italic;
								color: #0024d8;
								float: left;
								clear: left;
								background-color: #e5ebeb;
								margin: 14px 1px 1px;
						    padding: 3px 10px 6px;
												transition: color, 0.5s, ease, 0s;
								-webkit-transition: color, 0.5s, ease, 0s;
									 -moz-transition: color, 0.5s, ease, 0s;
										 -o-transition: color, 0.5s, ease, 0s;
							}
							#midnav .left ul li ul li a:hover{ color: #8C8C8C; }

	.answers{ color: #333333; }

	.answers h2{ 
		background-color: #363636;
		padding-left: 10%;
	}
	.answers p{ color: #333333; }
	.answers .left{
		width: 50%;
		padding: 0 0 0 2%;
	}	
	.answers .right{ width: 40%; }
	.answers .right img{ width: 80%; }
		
	#midnav, .when, .where, .what, .more{ padding: 14px 10% 50px; }
		.when{ background-color: #ececc2; }
		.where{ background-color: #ceeae2; }
		.what{ background-color: #ced5ea; }

form{
	position: relative;
	padding: 1px 10px 20px 20px;
	width: 440px;
	background-color: rgba(255,255,255,.8);
	margin: 20px auto 60px;
}
	form label{ 
		font-size: 13px;
		color: #000;
		} /*was 15px*/

	form input, form textarea{
		border: 1px solid #4C4C4C;
		padding: 3px;
		font-size: 15px; /*was 19px*/
	}
	input[type="text"]{
		border-radius: 4px;
    padding: 10px;
    width: 400px;
	}

.input{ 
	font-size: 15px; 
	color: #000;
	line-height: 30px;
}

label.attend{ 
	font-size: 16px;

}

textarea{ 
	font-family: 'Open Sans', 'Helvetica', sans-serif;
	width: 420px;
	height: 200px;
	border-radius: 4px;
}

::-webkit-input-placeholder{ color: #acacac; } 
					:-moz-placeholder{ color: #acacac;
														 opacity: 1; } 
				 ::-moz-placeholder{ color: #acacac; 
				 										 opacity: 1; } 
		 :-ms-input-placeholder{ color: #acacac; }

.error{ 
	color: #C00; 
	font-size: 15px;
}

.info{ margin: 20px 0 0 0; }
.info h6{ color: #d2451e;}

.submit{
  background-color: #4694cd; 
  border-radius: 4px;
  border-color: #1579bd;
  color: #FFFFFF;
  padding: 5px 25px;
}

.confirm {
    background-color: #FFEF60;
    border: 2px solid #000000;
    border-radius: 4px;
    box-shadow: 1px 4px 5px #888888;
    font-family: "Playfair Display",serif;
    font-size: 20px;
    font-weight: 700;
    padding: 40px 70px;
    position: absolute;
    top: 33px;
    left: 37px;
}

footer{
	position: relative;
	padding: 5px 0 0 0;
}
.hr{ 
	border-top: 1px solid #000;
	margin: 0 5px 10px;
}
.footbg{
	background-color: #E8E8E8; 
	padding: 35px 35px 65px;
	font-size: 12px;
}

footer p, footer a{
	text-align: right;
	font-size: 13px;
	font-weight: 400;
}

footer p{
	color: #666;
	margin: 0;
}

footer a{
	color: #8C8C8C;
	text-decoration: underline;
}

footer .left{ color: #adadad; }

/*––––––––––––––––––––RESPONSIVE–––––––––––––––––––––––––––––––––––––––*/

@media only screen and (min-width: 900px) and (max-width: 1100px){

	#rsvp header .invert #title{
    left: 7%;
    text-align: center;
    top: 27px;
	}

}

/*–––––––––––––––––––––––––––––––––––*/

@media only screen and (min-width: 641px) and (max-width: 899px) {

	h1{ font-size: 63px;}

	h2{ 
		font-size: 30px;
		line-height: 30px;
	}
	.answers h2{ line-height: inherit; }

	header#home  h1, header#details h2{
		top: 41%;
		font-size: 56px;
	}

	.invert h1{ top: 35%; }
	
	.invert h1 a{
		font-weight: 400;
		font-size: 48px;
		color: #FFF;
	}

	#rsvp .invert h1{ font-size: 64px; }
	#rsvp .invert h2{ 
		font-size: 37px; 
		line-height: 37px;}	

	header#home h2, header#details h2{
		font-size: 34px;
		line-height: 34px;
	}
	
	#topnav ul li a{ font-size: 14px; }
	#topnav img{ 
		width:  13px; 
		height: 13px;
		top: 0;
	}

	a.attribution{ font-size: 13px; }

	#midnav .left{ min-height: 310px; }
	#midnav .left h3, #story .left h3{ width: 60%; }
	#midnav .left ul li a{ margin: 0 18% 0 0; }

	footer .left, footer .right{ float: none; }

}

/*–––––––––––––––––––––––––––––––––––*/

@media only screen and (max-width: 640px) and (min-device-width: 801px){

	#wrapper{ min-width: 540px; }
	
	header h1{
		top: 36%;
		left: 8%;
		font-size: 48px;
	}
	.invert h1{
		top: 35%;
		left: 8%;
	}
	.invert h1 a{
		font-weight: 400;
		font-size: 48px;
		color: #FFF;
	}

	header h2{
		font-size: 32px;
		line-height: 32px;
	}
	
	#topnav ul li a{ font-size: 14px; }
	#topnav img{ 
		width:  13px; 
		height: 13px;
		top: 0;
	}

	a.attribution{ font-size: 13px; }

	.fifty{ width: 80%; }

	#midnav{ min-height: 500px; }
	#midnav .left ul li a{ margin: 0 15% 0 0;}

	footer .left, footer .right{ float: none; }

}

/*–––––––––––––––––––––––––––––––––––*/

@media only handheld, only screen and (max-device-width: 640px){

	header, section, footer{
		max-width: 640px;
		margin: 0 auto;
	}

	.wrapper{ min-width: initial; }

	header#home #title{ left: 5%; }
	#title h1{ font-size: 30px; }
	#title h2{ 
		font-size: 17px; 
		line-height: 17px;
	}
	a.attribution{ font-size: 10px; }

	#rsvp #title{ 
		margin-top: 40px; 
		font-size: 30px;}

	#topnav ul li a{ font-size: 11px;}
	#topnav img{
		width: 13px;
		height: 13px;
		top: 2px;
	}

	#story{ 
		margin-left: 5%;
		margin-right: 5%;
	}
	#story h6, .fifty h6{ font-size: 16px; }

	.fifty, .sixty{ 
		margin: 0 auto 20px;
		width: 90%;
	}
	.fifty h5{ 
		font-size: 20px;
		line-height: 20px;
	}

	form{
		width: 87%;
	}
	input[type="text"]{
    width: 90%;
	}
	textarea{
		width: 95%;
		height: 100px;
	}

	#midnav p.yellow{ width: 250px; }

	.left, .right{ float: none; }
	.answers .left, .answers .right{ width: initial;}

	#midnav ul.main { margin-top: 10px; }

	#midnav ul li a.main { padding-top: 10px; }

	#midnav .left ul li{ clear: both; }
		#midnav .left ul li a{
			margin: 0 15% 0 0;
			line-height: 28px;
			display: block;
		}
			#midnav .left ul li ul{
				display: block;
				position: relative;
				top: 0;
			}
				#midnav .left ul li ul li a{ 
					margin-top: 0; 
					float: initial;
					clear: initial;
					display: block;
					padding-top: 6px;
					padding-bottom: 6px;
					} 

	.right img{ border: 8px solid #fff; }				

	footer .left, footer .right{ float: none; }

	footer p, footer a{ font-size: 10px; }

}