* {
	margin: 0;
	padding: 0;
}

body {
	background: url('../img/bg.jpg');
	font-size: 13px;
	font-family: Georgia, Times, Times New Roman, serif;
}

a {text-decoration: none;}
a:hover {text-decoration: underline;}

a img {border: none;}

.hidden {display: none;}

div.center {width: 100%; text-align: center;}

div.center > * {text-align: left;}

.clearfloat {clear: both !important; float: none !important;}

/* General reusable styles */
.shadow-box {
	padding: 10px;
	background: #fff;
	border: 1px solid #ccc;
	-moz-border-radius: 6px 6px 6px 6px;
	-webkit-border-radius: 6px 6px 6px 6px;
	-moz-box-shadow: 1px 1px 6px #666;
	-webkit-box-shadow: 1px 1px 3px #666;
	border-radius:10px;
}

.wrap {
	position: relative;
	z-index: inherit;	
}

.message, .flash_error, .flash_success {
	background: #a3d2e6;
	padding: 5px 15px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-box-shadow: 1px 1px 6px #666;
	-webkit-box-shadow: 1px 1px 3px #666;
	margin: 10px 0 20px 0;
	color: #273b44;
}

.flash_error {background: #E6A8AC; color: #8b1f26;}
.flash_success {background-color:#A7E69F !important; color:#275421;}

#content > div.flash {margin: 20px 20px 20px 50px;}

.h20 {height: 20px;}

.blue-button {
	display: block;
	width: 239px;
	height: 44px;
	background: transparent url('../img/blank-button.png') top left no-repeat;
	font-size: 20px;
	color: #F6F5E4;
	text-align: center !important;
	padding-top: 12px;
	margin: auto;
	border: none;
	font-family: Georgia,Times,Times New Roman,serif;
	cursor: pointer;
}

input.blue-button-input, button.blue-button-input {
	display: block;
	width: 239px;
	height: 52px;
	background: transparent url('../img/blank-button.png') top left no-repeat;
	font-size: 20px;
	color: #F6F5E4;
	text-align: center !important;
	padding-bottom: 5px;
	margin: auto;
	border: none;
	font-family: Georgia,Times,Times New Roman,serif;
	cursor: pointer;
}

.large.blue-button-input, .large.blue-button {
	background: transparent url('../img/blank-button-large.png') top left no-repeat;
	width: 326px;
	padding-right: 16px;
}

.blue-button:hover {text-decoration:underline;}
input.blue-button-input:hover, button.blue-button-input:hover {text-decoration:underline;}

/* General layout */
#wrapper {background: transparent url('../img/kidsoverlay.png') no-repeat center 14px; width: 100%;	text-align: center;}

#center-me {margin: auto; text-align: left;	width: 963px; position: relative;}

#header {width: 963px; height: 90px; background: transparent url('../img/headerbg.png') bottom left no-repeat;}

#content {width: 903px; height: 525px; background: transparent url('../img/contentbg.jpg') top left no-repeat; position: relative; padding: 50px 30px 0; z-index: 0; overflow: hidden;}

#footer {
	width: 963px; 
	height: 120px; 
	background: transparent url('../img/footerbg.png') top left no-repeat;
	text-align: center;
	color: #edd7b5;
	font-size: 10px;
	padding-top: 20px;
	font-family: Arial, Helvetica, sans-serif;
}
#footer a {color: #edd7b5;}

#bl-kid {width: 69px; height: 185px; background: transparent url('../img/mainsprite.png') left -165px no-repeat; position: absolute; bottom: 0; left: 0; z-index: 100;}

#tr-kid {width: 68px; height: 165px; background: transparent url('../img/mainsprite.png') left top no-repeat; position: absolute; top: 0; right: 0; z-index: 100;}

#header h1 a {
	width: 170px; 
	height: 52px; 
	background: transparent url('../img/mainsprite.png') left -350px no-repeat; 
	text-indent: -9999px; 
	display: block;
	float: left;
	margin-top: 35px;
	outline: none;
}

.content-wrapper {
	padding: 0 20px 0 50px;
}

#flashContainer {
	width: 50%;
	position: absolute;
	left: 50%;
	margin-left: -25%;
	text-align: center;
}

/* Splash page */
#intro-link {
	display: block;
	width: 509px;
	height: 470px;
	background: transparent url('../img/cake.png') left top no-repeat; 
	margin: 0 auto auto auto;
}

/* Top left box (contact us, login, user information) */
#content-heading {
	padding: 20px 80px 0 30px;
	position: absolute;
	top: 0;
	left: 0;
	width: 843px;
	z-index: 10;
}
#login-button, #contact-button, #select-child-link, #profile-link {
	width: 105px;
	height: 32px;
	z-index: 10;
	display: block;
	background: transparent url('../img/login-contact-buttons.png') top left no-repeat;
	text-indent: -9999px;
	outline: none;
	position: relative;
	cursor: pointer;
	vertical-align: middle;
}

#contact-button {background-position: left -32px;cursor: pointer;}
#select-child-link {background-position: left -64px; width: 167px; margin-left: 5px; display: inline-block;}
#profile-link {background-position: left -96px; width: 138px;}

.child-information {float: right; height: 20px;}

.hover-container {position: relative; float: right;}
.hover-box {
	width: 220px;
	position: absolute;
	z-index: 10;
	left: -50px;
	top: 30px;
}

.close-icon {
	width: 16px;
	height: 16px;
	background: transparent url('../img/close-icon.gif') top left no-repeat;
	position: absolute;
	top: 5px;
	right: 5px;
	cursor: pointer;
}

#login-box label, #login-box input {display: block; margin-bottom: 5px;}
#login-box input[type="text"], #login-box input[type="password"] {width: 100%;}

.user-information, .child-information {padding: 2px 20px; }
.user-information {float: left; padding-top: 2px;}
.logout-container {float: right; padding: 2px 0 0 15px;}
#select-child-link {float: right;}

#contact-box {padding-right: 10px; width: 170px;z-index:5555;}

/* Member Login Page */
#login-form {
	margin: 70px auto auto auto;
	width: 400px;
	padding: 20px;
}
#login-form label {float: left;}
#login-form input {float: right;}
#login-form input[type=text], #login-form input[type=password] {width: 300px;}

/* Registration process overview */
#signsContainer {position: absolute; top: 128px; left: -20px;}
#signsContainer area {cursor: pointer;}
#signs {border: 0; }
#smallLogo {position: absolute; left: 50px; top: 10px;}
#registration-label {position: absolute; left: 230px; top: 80px;}
#signsLabels {
	text-align: center;
	font-size: 18px;
	width: 963px;
	position: relative;
}
#signsLabels p {display: none; position: absolute; top: 380px; left:0; padding: 0 130px; width: 703px;}
#registerNow {
	display: block;
	width: 239px; 
	height: 56px; 
	background: transparent url('../img/review-process-register.png');
	position: absolute;
	left: 370px;
	top: 500px;
}

body.page-process #content {overflow: visible !important;}

/* Intro page */
#rightContainer {
	text-align: center;
	width: 400px;
	position: absolute;
	top: 50px; 
	right: 60px;
	z-index: 0;
}
#leftContainer {width: 400px;margin-left:40px; text-align: center; font-size: 24px; padding-top: 40px;}
#leftContainer h2 {margin: 30px 0 20px 0;}
#rightContainer p {text-align: justify; font-size: 20px; margin: 20px 0 30px 0;}
#letsCelebrate {
	display: block;
	width: 239px;
	height: 56px;
	background: transparent url('../img/lets-celebrate.png');
	margin: auto;
}

/* General Forms */
form.aligned div.fieldset {border: 0; width: 400px;}
form.aligned div.fieldset legend {font-size: 1.4em;margin-bottom: 10px;}
form.aligned div.fieldset#register-left label {float: left;}
form.aligned div.fieldset#register-left input, form.aligned div.fieldset#register-left select {float: right; width: 185px;}
form.aligned div.fieldset#register-left select {width: 190px;}
form.aligned .error-message {float: right; clear: both; width: 182px; color: #FF0000;}
form.aligned div.row {margin-bottom: 12px;}
form.aligned div.shadow-box {z-index: 2; position: relative;}
div#register-left {float: left; width: 360px;}
div#register-right {float: right; width: 400px;}
#register-right table {width: 100%;}
#register-right input[type="text"] {width: 120px;}
#register-right input[type="checkbox"] {float: left;}
form.aligned #register-right div.submit input {
	border: 0;
	width: 239px;
	height: 56px;
	background: transparent url('../img/submit.png') top left no-repeat;
	margin: auto !important;
	cursor: pointer;
	float: none !important;
}
form.aligned #register-right div.submit {width: 239px; margin: auto;}
#FamilyAdditionInfo {float:none !important; display: inline; vertical-align: middle; width: auto !important;}
#FamilyAdditionInfo + label {float: none !important; display: inline;}
form.aligned label[for=FamilyAdditionInfo] {width: 95%;}
#create-sign {
	background: transparent url('../img/create-sign.png') top left no-repeat;
	width: 336px;
	height: 341px;
	position: absolute;
	z-index: 0;
	right: -10px;
	top: 250px;
}
#register-right .error-message {width: auto; padding: 0 3px;}
#register-right td {vertical-align: top;}

/* Members Account */
.left {float: left;	width: 380px;}
.right {float: right; width: 380px;}
form.grid input {float: right;}
form.grid label {float: left;}
form.grid .row {margin-bottom: 15px;}
form.grid .error-message {float: right; clear: both; width: 182px; color: #FF0000;}
div.families.form h2 {margin-bottom: 20px; font-size: 24px;}

/* Steps */
img#step-fbc-logo {
	margin: -12px 10px 0 40px;
}
.step-sign {float: left; margin-top:-10px;}
.step-label {float: left; margin-top: 50px;}
.step-description {margin-left: 80px; width: 390px; float: left; font-size: 16px; text-align: justify;}
.step-description p {margin: 1em 0;}
.step-content {
	height: 300px;
	position: absolute;
	right: 40px;
	top: 210px;
	width: 400px;
	z-index: 9;
	font-size: 16px;
}
.step-main {font-size: 16px; position: absolute; top: 280px;}
.step-content fieldset{border: 0; margin: auto;}
.step-content legend {display: none;}
.dates div.input {text-align: left;}
.dates input[type="radio"], .radios input[type="radio"] {
    display:inline;
    margin-right:5px;
    float:left;
    margin-top:4px;
}
.dates label, .radios label {
    display: inline;
    float:  left;
}
.step-content .dates {
	height:180px;
	overflow-x: hidden;
	overflow-y:scroll;
	width: 200px;
	margin: auto;
}
.step-content-dates {text-align: center;}
.step-1.not-selected .dates {height: 140px;}
.step-1.not-selected .step-content {top: 180px;}
.step-2 {margin-top: -30px;}
.step-2 h2 {text-align: center; margin-bottom: 10px;}
.step-2 .step-description p {text-align: left;}
.step-2 .step-content, .step-3 .step-content {position: relative; float: right; width: 300px; right: auto; top: auto;}
.step-2 ul.graphic {padding: 0 70px 0 80px;}
.step-2 ul.graphic a {width: 750px;}
.step-3 .step-main {width: 96%;}
.step-3 #player {float: left; margin: 10px 10px 0 40px;}
.step-3 .step-right {float: left; width:410px; padding: 10px 0 0 30px;}
.step-3 .step-right fieldset {border: none; padding-left: 10px;}
.step-3 .step-right legend {display: none;}
.step-4 .step-description {width: 450px; margin-top: -25px;}
.step-5 p {margin: 0.7em 0;}
.step-5 .dates {width: 265px;}
.step-5 .step-content {top: 180px;}
.step-6 .step-description, .step-7 .step-description {position: absolute;top: 250px; left: 20px; width: 500px;}
.step-6 .step-description ul li, .step-7 .step-description ul li {margin-left: 1em;}
.step-6 .step-content-dates {right: 0px; width: 300px;}
.step-6 .dates {width: 265px;}
.step-7 .step-content {width: 300px; padding-top: 50px;}

#ChildMembersStep2Form input.blue-button-input, #ChildMembersStep3Form input.blue-button-input {float: left;}

#FamilyMembersSelectChildForm fieldset{
    padding:20px 0 20px 0;
    border: none;
    margin: 10px;
}

#FamilyMembersSelectChildForm fieldset input[type="radio"]{
    display: inline;
    margin-right: 10px;
    vertical-align: middle;
}
#FamilyMembersSelectChildForm fieldset label{
    display: inline;
}
#register-left form.aligned div.submit input {
	border: 0;
	width: 239px;
	height: 56px;
	background: transparent url('../img/continue-button.png') top left no-repeat;
	margin: auto !important;
	cursor: pointer;
	float: none !important;
}

#sm2-container {height: 1px; width: 1px;}

/*
    ColorBox Core Style
    The following rules are the styles that are consistant between themes.
    Avoid changing this area to maintain compatability with future versions of ColorBox.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:hidden;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

/* 
    Example user style
    The following rules are ordered and tabbed in a way that represents the
    order/nesting of the generated HTML, so that the structure easier to understand.
*/
#cboxOverlay{background:url(../img/colorbox/overlay.png) 0 0 repeat;}
#colorbox{}
    #cboxTopLeft{width:21px; height:21px; background:url(../img/colorbox/controls.png) -100px 0 no-repeat;}
    #cboxTopRight{width:21px; height:21px; background:url(../img/colorbox/controls.png) -129px 0 no-repeat;}
    #cboxBottomLeft{width:21px; height:21px; background:url(../img/colorbox/controls.png) -100px -29px no-repeat;}
    #cboxBottomRight{width:21px; height:21px; background:url(../img/colorbox/controls.png) -129px -29px no-repeat;}
    #cboxMiddleLeft{width:21px; background:url(../img/colorbox/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(../img/colorbox/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(../img/colorbox/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(../img/colorbox/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0px; background:url(../img/colorbox/controls.png) -75px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious.hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(../img/colorbox/controls.png) -50px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext.hover{background-position:-50px -25px;}
        #cboxLoadingOverlay{background:url(../img/colorbox/loading_background.png) center center no-repeat;}
        #cboxLoadingGraphic{background:url(../img/colorbox/loading.gif) center center no-repeat;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(../img/colorbox/controls.png) -25px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose.hover{background-position:-25px -25px;}