/* The styles that is relevant to the entire element. */
body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
	background-image: url(../images/bg_pattern.jpg);
	font-family: 'Open Sans', 'Lucida Grande', 'Segoe UI', Arial, Verdana, 'Lucida Sans Unicode', Tahoma, 'Sans Serif';
}

div {
	font-size: 15px;
}

a {
	text-decoration: none;
	color: #09f;
}

/* The styles to place the decorative trees in the background. */
div.bg_tree {
	top: 100%;
	left: 50%;
	position: absolute;
	margin-top: -350px;
}

div#tree_left {
	margin-left: -913px;
}

div#tree_right {
	margin-left: 538px;
}

/* The styles for the main containers on the screen. */
div.container {
	top: 50%;
	left: 50%;
	overflow: hidden;
	position: absolute;
	-webkit-border-radius: 60px;
			border-radius: 60px;
	-webkit-box-shadow: 0px 3px 12px #555;
    		box-shadow: 0px 3px 12px #555;
}

div.bottom {
	width: 980px;
	height: 670px;
	background-color: #6cf;
	margin: -337px 0 0 -490px;
	-webkit-transform: rotate(-4deg);
		-ms-transform: rotate(-4deg);
			transform: rotate(-4deg);
	background-image: url(../images/panel_bg.png);
}

div.top {
	width: 948px;
	height: 648px;
	background-color: #fff;
	margin: -326px 0 0 -474px;
}

/* The styles to position the site logo. */
div#site_logo {
	top: 50%;
	left: 50%;
	position: absolute;
	margin: -389px 0 0 -474px;
}

img#site_logo_img {
	width: 327px;
	height: 54px;
}

/* The styles for current logged in user. */
div#current_user {
	top: 50%;
	left: 50%;
	width: 250px;
	font-size:12px;
	text-align: right;
	position: absolute;
	margin: -350px 0 0 180px;
}

/* The styles for the normal user menu items. */
div.top > div#menu {
	height: 34px;
	border-bottom: 1px solid #aaa;
}

div#menu > div#menu_items {
	padding-left: 35px;
}

div#menu_items > div.menu_item {
	float: left;
	color: #aaa;
	height: 16px;
	margin-top: 9px;
	margin-bottom: 9px;
	padding: 0px 8px;
}

div.menu_item > div {
	height: 25px;
	padding: 0px 10px;
	cursor: pointer;
	font-size: 12px;
}

div.menu_item > div.selected {
	color: #6cf;
	border-bottom: 1px solid #6cf;
}

div.menu_item > div.hover {
	color: #777;
	border-bottom: 1px solid #6cf;
}

div#menu_items > div.divider {
	border-right: 1px solid #aaa;
}

/* The styles for the image to allow a user to login and logout. */
div#admin_login, div#admin_logout {
	left: 100%;
	width: 16px;
	height: 16px;
	cursor: pointer;
	position: absolute;
	margin: 9px 0 0 -61px;
}

div#admin_login {
	background-position: -16px 0;
	background-image: url(../images/login.png);
}

div#admin_logout {
	background-position: -16px 0;
	background-image: url(../images/logout.png);
}

div#admin_login:hover, div#admin_logout:hover {
	background-position: 0 0;
}

/* The styles for container that will show the photo/s. */
div#photo_container {
	height: 250px;
	overflow: hidden;
	text-align: center;
	background-color: #eee;
	border-bottom: 1px solid #999;
}

div#photo_container > img {
	height: 250px;
}

td.center {
	text-align: center;
}

td.empty {
	color: #777;
	line-height: 50px;
	font-style: italic;
	vertical-align: middle;
}

 /* The styles for container that will have the content. */
div#content_container {
	height: 362px;
	padding: 20px;
}

div#content_div {
	width: 100%;
	padding-right: 5px;
	line-height: 18px;
}

div#content_div > div#content {
	height: 295px;
	overflow: hidden;
	margin-right: 17px;
}

div.center {
	text-align: center;
}

.bold {
	font-weight: bold;
}

/* Styles for the vertical scrolling bar */
div#scroll_content {
	height: 295px;
	overflow: hidden;
}

div#scroll_track {
	z-index: 100;
	height: 255px;
	left: 100%;
	margin-left: -25px;
	width: 10px;
	cursor: pointer;
	position: absolute;
	background-color: #eee;
	-webkit-border-radius: 5px;
			border-radius: 5px;
	-webkit-box-shadow: inset 1px 0 0 #CCC;
			box-shadow: inset 1px 0 1 #CCC;
}

div#scroll_handle {
	top: 0px;
	width: 100%;
	height: 30%;
	opacity: 0.5;
	cursor: pointer;
	background-color: #6cf;
	-webkit-border-radius: 5px;
			border-radius: 5px;
}

div#scroll_handle:hover {
	opacity: 1;
}

/* The styles for the admin menu items. */
div.admin_menu_group {
	float:left;
	padding: 8px 10.8px;
}

div.admin_menu_item {
	padding: 30px;
	cursor: pointer;
}

div.admin_menu_item:hover {
	background-color: #eee;
	-webkit-border-radius: 6px;
			border-radius: 6px;
}

/* The styles for the side content. */
div#side_content {
	width: 33%;
	float: left;
	padding: 0 30px 0 10px;
}

div#side_content > div {
	height: 151px;
	margin-bottom: 20px;
	text-align: center;
	visibility: hidden;
}

div.widget_text, div#ceremony_date, div#timer_div {
	background-color: #eee;
	-webkit-border-radius: 10px;
    		border-radius: 10px;
	-webkit-box-shadow: 2px 2px 5px #ccc;
    		box-shadow: 2px 2px 5px #ccc;
	/*background-image: url(../images/bg_pattern.jpg);*/
}

div#save_date_div:hover div.widget_text,
		div#save_date_div:hover div#ceremony_date,
		div#timer_container:hover div.widget_text,
		div#timer_container:hover div#timer_div {
	background-color: #ddd;
	/*background-image: url(../images/widget_bg_over.png);*/
}

div.widget_text {
	font-size: 17px;
	padding: 15px 0;
}

/* The styles for the ceremony date. */
div#ceremony_date {
	font-size: 28px;
	margin-top: 7px;
	padding: 27px 5px;
}

/* The stylese for the countdown timer element. */
div#timer_div {
	height: 66px;
	margin-top: 7px;
	padding: 13px 5px 14px 34px;
}

div.timer_element {
	width: 48px;
	float: left;
	padding: 12px 5px 5px 5px;
}

div.timer_element > div {
	text-align: center;
}

div.timer_element > div.big {
	font-weight: bold;
	font-size: 24px;
}

div.timer_element > div.small {
	font-size: 8px;
}

/* The styles for the buttons on the index page - Step 1, Step 2 and Step 3 */
div#index_button_container {
	width: 568px;
	float: right;
	height: 118px;
	line-height: 48px;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url(../images/wavy_lines.png);
}

img#btn_index_story, img#btn_index_wedding, img#btn_index_rsvp,
		img#btn_index_photos, img#btn_index_contact {
	cursor: pointer;
}

/* The styles for the image thumbnails */
div.thumbnail > img {
	padding: 5px;
	-webkit-border-radius: 6px;
			border-radius: 6px;
	-webkit-box-shadow: 0px 3px 12px #555;
			box-shadow: 0px 3px 12px #555;
}

div.thumb_small > img {
	padding: 2px;
	-webkit-border-radius: 3px;
			border-radius: 3px;
	-webkit-box-shadow: 0px 3px 6px #555;
			box-shadow: 0px 3px 6px #555;
}

div.story_left {
	float: left;
	margin: 15px 0 0 5px;
	padding: 0 20px 15px 0;
}

div.story_right {
	float: right;
	margin: 15px 20px 0 0;
	padding: 0 0 15px 20px;
}

/* The styles for the image stack to represent a group */

div.stack {
	height:177px;
}

div.portrait {
	padding-left:45px;
}

div.landscape {
	padding-left:26px;
}

div.landscape > div {
	margin-top:25px;
}

div.stack > div {
	position:absolute;
}

div.thumbnail > img[class*='top']:hover {
	-webkit-box-shadow: 0px 3px 12px #222;
			box-shadow: 0px 3px 12px #222;
}

div.thumbnail > img[class*='top'] {
	background-color:#FFF;
}

div.thumbnail > img[class*='middle'] {
	background-color:#FFF;
	-webkit-transform: rotate(4deg);
		-ms-transform: rotate(4deg);
			transform: rotate(4deg);
}

div.thumbnail > img[class*='bottom'] {
	background-color:#FFF;
	-webkit-transform: rotate(-4deg);
		-ms-transform: rotate(-4deg);
			transform: rotate(-4deg);
}

/* */
div.expand {
	float:left;
	padding: 0px 3px;
}

div.expand > img {
	cursor:pointer;
}

td.recipients > div {
	float: left;
	margin: 2px;
	padding: 2px 4px;
	font-size: 10px;
	border: 1px solid #bbb;
	background-color: #ddd;
	-webkit-border-radius: 3px;
			border-radius: 3px;
}

td.recipients > div.busy {
	color: black;
	border: 1px solid #3386cc;
	background-color: #c2dbef;
}

td.recipients > div.success {
	color: black;
	border: 1px solid #99cc33;
	background-color: #e6efc2;
}

td.recipients > div.error {
	color: black;
	border: 1px solid #cc3333;
	background-color: #efd9c2;
}

td.recipients > div.empty {
	color: black;
	float: left;
	margin: 3px;
	padding: 3px;
	font-size: 10px;
	margin-top: -4px;
	border-width: 0px;
	font-style: italic;
	background-color: white;
}

/* */
div#wedding_map {
	float: left;
	width: 272px;
	text-align: left;
	margin-top: 25px;
	padding-top: 10px;
	padding-left: 3px;
}

div#wedding_info {
	float: right;
	width: 590px;
	height: 235px;
	margin-top: 25px;
	text-align: left;
	padding-left: 25px;
	border-left: 1px dotted #999;
}

/* The styles used for the copyright section.  */
div#copyright {
	top: 50%;
	left: 50%;
	width: 300px;
	font-size: 10px;
	text-align: right;
	position: absolute;
	margin: 330px 0 0 120px;
}