/* FABRIC - R1 ; No12 ; STYLE.CSS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* FABRIC RESET
`````````````````````````````````````````````````````````````````````````` */
html, body, nav, section, article, aside, div, h1, h3, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td 
{ margin: 0; padding: 0; }

body { color: #000; font: 14px/20px Helvetica, sans-serif }

h1 { font-size: 36px; line-height: 36px; margin-bottom: 18px; font-family: Helvetica, sans-serif;} 

a { text-decoration: none; color: #404040; }

a:hover { text-decoration: none; color: #999; } 

img { border: none; }

p, ul, ol, dl, table { margin-bottom: 0px; }

ul, ol, dd { margin: 0; }

.clearing { clear: both; }
.clearfix { overflow: hidden; }
.last { margin-bottom: 0; }
.screenReader { left: -9999px; position: absolute; top: -9999px; }

/* STRUCTURE
`````````````````````````````````````````````````````````````````````````` */
h1 { font-family: 'Alfa Slab One', serif; }

h1.groom { color: #50c6e8; text-transform: uppercase;}

h1.bride { color: #de2a33; text-transform: uppercase;}

h1.gifts { text-transform: uppercase; font: 28px/24px 'PT Mono', serif; margin-bottom: 1.5em; }

h1 span.red { color: #de2a33;}

h1 span.blue { color: #52c6d4;}

h1 span.yellow { color: #fdd57e;}

p { font: 1em/2em 'Droid Sans', sans-serif; width: 50%; margin: 0 auto; color:#999;}

#successMessage p {background: #555; color: #fff; padding: 0.25em; border-radius: 0.5em;}

#failureMessage p { 
	position: absolute; 
	width: 50%; 
	height: 4em;
	z-index: 5; 
	margin: 0 auto; 
	background: rgb(3, 136, 166); 
	color: #fff; 
	padding: 0.25em; 
	border-radius: 0.5em;
}

hr { border: none; margin: 3em 0;}

a.gifts {
	padding: 0.6em;
	border: 0.2em solid #52c6d4;
	border-radius: 0.5em;
	color: #52c6d4;
}

a.gifts:hover { background: #52c6d4; color: #fff;}

.shift { margin-left: 2em;}

article.wide p { margin-bottom: 4em;}

/* Sections */
section#landing, section#about, section#rsvp, section#photos, section#gifts, section#when, section#break, footer { width: 100%; }

/* Section Style */
section#landing, section#rsvp, section#gifts, section#when {
background-color: #ffffff;
background-image: url("http://www.transparenttextures.com/patterns/debut-light.png");
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */

}

section#break, section#photos { background: #fff; }

footer { background: #333; }

section#break { height: 0.5em; margin-top: 2.5em; margin-bottom: 4em; background: #fff; border-bottom: 1px #9b9b9b dashed;}

/* Inner Containers */
.main, .about, .work, .contact, .services, .footer, .break-img, .foot {
	margin: 0 auto; 
	width: 70em; 
	padding: 10% 0 10% 0; 
	overflow: auto; 
	max-width: 98%;
}

.break-img {
	width: 50em;
}

.foot {
	padding: 1em 0 1em;
	color: #999;
	text-align: center;
}

/* Content */
.one-left, .two-left {
	width: 30%;
	float: left;
	margin-right: 5%;
}

.three-right {
	width: 30%;
    float: right;
}

.half-left, .half-right {
	width: 45%;
	float: left;
}

.half-left {
	margin-right: 10%;
}

.action {
	margin: 0 auto;
	padding: 4em 0 0 0;
	height: 4.25em;
	width: 12em;
	text-align: center;
}

.action:last-child {
	padding: 0;
}

.action i {
	color: #52c6d4;
}

.buttonTop {
	font: 1.1em/1.1em 'PT Mono', serif;
	text-transform: uppercase;
	border: 0.25em solid #52c6d4;
	border-radius: 0.5em;
	padding: 1em 3em;
	color: #999;
	letter-spacing: 0.25em;
}

.buttonTop:hover {
	border: 0.25em solid #52c6d4;
	background: #52c6d4;
	color: #fff;
}

article, article.half-left {
	width: 60%;
	margin-right: 5%;
	float: left;
	padding: 4% 0 4% 0;
}

article.wide { width: 100%; margin: 3em 0; padding: 0; float: left; -height: 200px; text-align: center;}

article.half-left { width: 45%; float: left; margin-right: 10%;}

aside, aside.half-right {
    width: 35%;
    float: left;
    margin-bottom: 1%;
    padding: 4% 0 4% 0;
}

aside.half-right { width: 45%; float: left;}

h2.medium, h2.medium-right {
	font: 2em/2em 'Alfa Slab One', serif;
	float: left;
	height: auto;
	border-bottom: 1px #9b9b9b dashed;
	margin-top: 2.5em;
	color: #9b9b9b;
}

h2.medium-right {float: right;}

h3.note { font: 2em/1em "PT Mono", serif; color: #9b9b9b; text-transform: uppercase; margin-top: 1em;}

/* HEADER 
`````````````````````````````````````````````````````````````````````````` */
header {
	width: 100%;
	height: auto;
	margin: 0;
}

/* IMG
`````````````````````````````````````````````````````````````````````````` */

.banner img.landing {
	width: 100%;
	top: 0;
	margin-top: 60px;
}

.banner img.section {
	width: 100%;
	top: 0;
}

img.extra { 
	margin: 0 auto;
	padding: 0;
}

img.example { width: 100%; }

.work article.wide {margin: 0 auto;}

.banner h1 { text-align: center; margin-top: 1em;}

/* NAV 
`````````````````````````````````````````````````````````````````````````` */
nav.navmain {
	text-align: center;
	font: 1em 'PT Mono', sans-serif;
    background-color: #fff;
    text-align: center;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	position: fixed;
	width: 100%;
	-webkit-box-shadow: 0 1px 6px  rgba(0, 0, 0, 0.1);
	   -moz-box-shadow: 0 1px 6px  rgba(0, 0, 0, 0.1);
	        box-shadow: 0 1px 6px  rgba(0, 0, 0, 0.1);
	z-index: 1;
}
 
nav.navmain li { 
	float: left;
	text-align: center;
	padding: 1.5em 3.5em;
}

nav.navmain li:first-child {
	padding: 1.5em 5em 0 5em;
}

.scrolled {
	padding: 0.75em 0;
	opacity: 0.9;
}

nav.navmain ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: inline-block;
}

nav.navmain li a {
	text-decoration: none;
	color: #444;
} 

nav.navmain li a:hover {
	text-decoration: none;
	color: #52c6d4;
} 

/* CONTACT FORM 
`````````````````````````````````````````````````````````````````````````` */
#name, #email, #comments {
	font: 1em/1em 'PT Mono', sans-serif;
	display: block;
	width: 100%;
	height: 1.5em;
	margin-bottom: 1em;
	border: none;
	border-radius: 0.2em;
	padding: 1em 0.5em;
	font-family: sans-serif;
}

#name, #email { float: left; }

#name:hover, #email:hover, #comments:hover { color: #999; }

#comments{ height: 100px; }

fieldset {
	padding: 2% 2% 5% 2%;
	border: none;
}

article.wide p.note { 
	font: 1em 'PT Mono', sans-serif; 
	margin-top: 1em; 
	margin-bottom: 0; 
	text-transform: uppercase; 
	color: #4e443c;
	width: 100%;
}

button.form_button {
	font: 1em 'PT Mono', sans-serif;
	float: left;
	color: #52c6d4;
	background: rgba(0,0,0,0);
	text-transform: uppercase;
	border: none;
	padding: 0.5em 5em;
	cursor: pointer;

	border: 0.2em solid #52c6d4;
	border-radius: 0.5em;
}

button.form_button:hover { background: #52c6d4; color: #fff;}

.statusMessage { display: none; }


/* FOOTER 
`````````````````````````````````````````````````````````````````````````` */
button.top {
	font: 1em 'Anton', sans-serif;
	background: #fff;
	border: none;
	text-transform: uppercase;
	margin: 0 auto;
	color: #000;
	width: 10em;
	float: right;
	cursor: pointer;
}

button.top:hover{ background: #555; }

.footer p {
	margin: 0 auto;
	text-align: center;
	float: left;
	color: #fff;
}

/* TRANSITIONS AND TRANSFORMS 
`````````````````````````````````````````````````````````````````````````` */
a, #name, #email, #comments, button.form_button, .social img, button.top, img.logo-img, img.extra, nav.navmain {  
	/* Transition: Smooth hover animation */
	transition: all 0.40s;
	/* Browser specific tags, IE has to be 10 or up to work */
	-ms-transition: 0.40s; /* IE 10 */
	-webkit-transition: 0.40s; /* Safari and Chrome */
	-moz-transition: 0.40s; /* Firefox */
	-o-transition: 0.40s; /* Opera */
}

.social img:hover, img.logo-img:hover {
	/* Transform: Move elements up on hover */
	transform: translateY(-5px);
	/* Browser specific tags, IE has to be 9 or up */
	-ms-transform: translateY(-5px); /* IE 9 only supports 2D transforms */
	-webkit-transform: translateY(-5px); /* Safari and Chrome */
	-moz-transform: translateY(-5px); /* Firefox */
	-o-transform: translateY(-5px); /* Opera */
}

img.extra:hover {
	transform: scale(1.1,1.1);
	-ms-transform: scale(1.1,1.1); /* IE 9 */
	-webkit-transform: scale(1.1,1.1); /* Safari and Chrome */
}

/* CAROUSEL
`````````````````````````````````````````````````````````````````````````` */
h1 {
    color: #4E443C;
    font-size: 32px;
    font-weight: bold;
}

h2, h2 a {
    color: #F14E32;
}

h3, h3 a {
  color: #0388A6;
}

a {
  color: #0388A6;
}

pre {
  border:1px solid #000;
  overflow-x:auto;
  background: #222;
  color: #fff;
  text-shadow: none;
}

.wrapper {
    max-width: 70em;
    padding: 0 20px 40px 20px;
    margin: auto;
}

.jcarousel-wrapper {
    margin: 20px auto;
    position: relative;
    z-index: 0;
}

/** Carousel **/

.jcarousel {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.jcarousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jcarousel li {
    width: 200px;
    float: left;
    border: 1px solid #fff;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.jcarousel img {
    display: block;
    max-width: 100%;
    height: auto !important;
    margin: 0 auto;
    padding: 0;
}

/** Carousel Controls **/

.jcarousel-control-prev,
.jcarousel-control-next {
    position: absolute;
    top: 48%;
    margin-top: -15px;
    width: 40px;
    height: 40px;
    text-align: center;
    background: #111;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 36px/32px Arial, sans-serif;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

.jcarousel-control-prev {
    left: 15px;
}

.jcarousel-control-next {
    right: 15px;
}

.jcarousel-control-prev:hover, .jcarousel-control-next:hover { background: #222;}

/** Carousel Pagination **/

.jcarousel-pagination {
    position: absolute;
    bottom: -25px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    margin: 0;
}

.jcarousel-pagination a {
    text-decoration: none;
    display: inline-block;

    font-size: 11px;
    height: 16px;
    width: 16px;
    line-height: 16px;

    background: #C2C2C2;
    color: #F0F0F0;
    border-radius: 10px;
    -text-indent: -9999px;

    margin-right: 10px;
}

.jcarousel-pagination a.active {
    background: #111;
    color: #fff;
    opacity: 1;
}

img.thumb {
	width: 15%;
	height: 15%;
	float: left;
	padding: 0.25em;
	margin: 0.25em;
	border-radius: 0.75em;
}