html, body {
	min-height: 100%;
	margin: 0;
	line-height: 1.33;
	font-size: 13px;
	font-family: 'Fauna One', serif;
	/*font-size: 15px;
	font-family: 'Roboto Slab', serif;
	font-weight: 300;*/
	color: #333;
}

html {
	background: #53c1d0;
	background: -moz-linear-gradient(top, #53c1d0 0%, #92dee7 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#53c1d0), color-stop(100%,#92dee7));
	background: -webkit-linear-gradient(top, #53c1d0 0%,#92dee7 100%);
	background: -o-linear-gradient(top, #53c1d0 0%,#92dee7 100%);
	background: -ms-linear-gradient(top, #53c1d0 0%,#92dee7 100%);
	background: linear-gradient(to bottom, #53c1d0 0%,#92dee7 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#53c1d0', endColorstr='#92dee7',GradientType=0 );
	background-attachment: fixed;
	height: 100%;
}

body {
	background: transparent url(../images/bg.png);
}

a {
	color: #2d7a84;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

h2 {
	margin-top: 0;
	font-weight: normal;
}

h2+h3 { margin-top: 0; }

strong {
	font-weight: normal;
	color: #9c8665;
	font-size: 110%;
}

hr {
	color: #bbd9dd;
	background-color: #bbd9dd;
	border: 0;
	height: 1px;
	margin: 25px 0;
}

.wrapper {
	width: 940px;
	margin: 0 auto;
}

#header {
	background: #fff url(../images/logo.png) 0 31px no-repeat;
	height: 173px;
}

#scroller {
	border-top: 12px solid #fff;
	border-bottom: 12px solid #fff;
	width: 100%;
	height: 336px;
	overflow: hidden;
}
#scroller
{
    width:100%;
    position: relative;
}

/* Replace the last selector for the type of element you have in
   your scroller. If you have div's use #scroller div.scrollableArea div,
   if you have links use #scroller div.scrollableArea a and so on. */
#scroller div.scrollableArea img
{
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    /* If you don't want the images in the scroller to be selectable, try the following
       block of code. It's just a nice feature that prevent the images from
       accidentally becoming selected/inverted when the user interacts with the scroller. */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#nav {
	z-index: 999;
	position: absolute;
	width: 244px;
	height: 351px;
	top: 185px;
	left: 50%;
	margin-left: -470px;
	background: #fff;
}
#nav ul {
	width: 160px;
	margin: 0 auto;
	list-style: none;
	padding: 0;
}
#nav ul li a {
	text-transform: uppercase;
	display: block;
	line-height: 29px;
	margin-bottom: 2px;
	background: #e3fcff;
	text-decoration: none;
	color: #666;
	text-align: center;
	/*letter-spacing: 1px;*/
}
#nav ul li a:hover, #nav ul li a.selected {
	background: #59c4d2;
	color: #fff;
}


#main {
	background: #fff;
	position: relative;
	min-height: 760px;
}
.byronweddingco-home #main { min-height: 330px; }

#content {
	padding: 10px 0 15px 0;
	width: 650px;
	margin-left: 244px;
	min-height: 310px
}

.intro {
	color: #5ac5d3;
	font-size: 16px;
	text-transform: uppercase;
	/*padding-bottom: 13px;*/
}
.intro.lowercase { text-transform: none; }

#getting-married {
	/*position: absolute;
	top: 397px;
	left: 40px;*/
	text-align: center;
	margin-top: 20px;
}
#getting-married a, #getting-married img { border: 0; }
#getting-married a { opacity: 0.9; }
#getting-married a:hover { opacity: 1; }

#footer {
	background: #27afc1 url(../images/footer-logo.png) 27px 15px no-repeat;
	color: #7ad3de;
	height: 44px;
}

#footer .nav {
	float: right;
	margin-right: 20px;
}

#footer a {
	line-height: 44px;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	padding: 0 6px;
}
#footer a:hover {
	text-decoration: underline;
}


/*--- Forms ---*/

.checkboxes {
	padding: 4px 0 6px 0;
	margin-left: 230px;
}
.checkboxes label {
	width: auto;
	float: none;
	text-align: left;
	line-height: 22px;
}
.checkboxes label.error {
	float: left;
	text-align: left;
	margin: 0;
	border: 0;
}

hr + form { padding-top: 0; }

form {
	padding: 10px 0 0 0;
	width: 540px;
}

input[type=submit] {
	float: right;
	clear: both;
}
input[type=text], textarea, select {
	width: 300px;
	border: #CCC 1px solid;
	background-color: #f9f9f9;
	color: #666;
	font-size: 12px;
	display: block;
	padding: 6px 4px;
	margin-bottom: 12px;
}

label {
	width: 220px;
	padding: 7px 10px 11px 0;
	float: left;
	clear: both;
	text-align: right;
	color: #777;
}
label.error {
	float: none;
	clear: both;
	color: red;
	padding: 1px 0 6px 0;
	vertical-align: top;
	text-align: right;
	width: 100%;
	display: block;
	font-size: 11px;
}

input[type=submit], .button {
	font-size: 13px;
	color: #050505;
	cursor: pointer;
	padding: 4px 12px;
	background: -moz-linear-gradient(
		top,
		#ffffff 0%,
		#ebebeb 50%,
		#dbdbdb 50%,
		#b5b5b5);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#ffffff),
		color-stop(0.50, #ebebeb),
		color-stop(0.50, #dbdbdb),
		to(#b5b5b5));
	-moz-border-radius: 17px;
	-webkit-border-radius: 17px;
	border-radius: 17px;
	border: 1px solid #999;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.2),
		inset 0px 0px 2px rgba(255,255,255,1);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.2),
		inset 0px 0px 2px rgba(255,255,255,1);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.2),
		inset 0px 0px 2px rgba(255,255,255,1);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.2),
		0px 1px 0px rgba(255,255,255,1);
}
a.button { margin: 3px 0; display: inline-block; }
a.button:hover { text-decoration: none; }
a.button.large { font-size: 150%; }


/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
	/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
	min-width: 75px;
	width: 10%;
	height: 100%;
	/* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	/*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
	cursor: url(../images/cursors/cursor_arrow_left.png), url(../images/cursors/cursor_arrow_left.cur),w-resize;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
	background-image: url(../images/arrow_left.gif);
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35; /* Standard CSS3 opacity setting */
	-moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
	filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
	zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
	min-width: 75px;
	width: 10%;
	height: 100%;
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;
	cursor: url(../images/cursors/cursor_arrow_right.png), url(../images/cursors/cursor_arrow_right.cur),e-resize;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
	background-image: url(../images/arrow_right.gif);
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35;
	filter: alpha(opacity = 35);
	-moz-opacity: 0.35;
	zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
}

/** Slideshow **/
#slideshow, .slideshow {
	border: 5px solid #94dee7;
	width: 650px;
	height: 433px;
	overflow: hidden;
}

/*---- Misc ----*/
.center { text-align: center; }

.highlight {
	color: #000;
	background: #ffc;
	padding: 4px 7px;
	border-radius: 10px;
	/*font-size: 100%;*/
	display: inline-block;
}
.highlight.center { margin-left: auto; margin-right: auto; }

.note { color: #aaa; }

.feature {
	border: 5px solid #94dee7;
}

.clear { clear: both; }

/*---- Facebook ----*/
.fb-like-box {
	margin: 2em 0;
}
.fb_iframe_widget { display: block !important; }
.center .fb_iframe_widget { margin: 0 auto; }

/* Clearfix */
.group:after {
  content: "";
  display: table;
  clear: both;
}

/*---- Dream Wedding Competition -----*/

/* Header button */
#header { position: relative; }
a.dream-wedding, a.elopement-packages {
  border: 0;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
  background: url(../images/button-dream-wedding.png);
  width: 162px;
  height: 148px;
  position: absolute;
  top: 17px;
  left: 44px;
}
a.elopement-packages {
	background: url(../images/button-elopement-discount.png);
}

ul.prizes {
	list-style-type: none;
	padding: 20px;
	/*width: 85%;*/
	margin: 20px auto;
	background: #F5FDFF;
	border-radius: 20px;
	border: 1px solid #bbd9dd;
}

ul.prizes li {
	margin-bottom: 20px;
}
ul.prizes li:last-child {
	margin-bottom: 0;
}

ul.prizes a {
	display: block;
	padding-bottom: 3px;
	border-bottom: 1px solid #bbd9dd;
	font-size: 110%;
	margin-bottom: 8px;

}

/*----- Tables ------*/

table {
	border-collapse: collapse;
}
table, th, td {
	border: 1px solid #59c4d2;
}

th, td { padding: 6px; }

th { background: #59c4d2; color: #fff; }
tr:nth-child(odd) td { background: #e3fcff; }


/*----- Elopement Page -----*/

ul.features {
	line-height: 1.5;
	width: 75%;
	margin: 25px 0;
	list-style-type: circle;
}
ul.features li {
	margin-bottom: 10px;
}

.conditions {
	font-size: 90%;
	opacity: 0.7;
	padding: 5px 0;
	border-top: 1px dotted #bbd9dd;
	border-bottom: 1px dotted #bbd9dd;
	width: 75%;
	line-height: 1.5;
	margin-left: 35px;
}
.conditions strong {
	font-size: 1em;
}

/* Honeypot :-) */
.hello-robots {
	opacity: 0 !important;
	visibility: hidden !important;
	display: none !important;
}