@charset "utf-8";
/* CSS Document */



a:link {
	color: #CCCCCC;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	color: #FFFFFF;
}
a:active {
	text-decoration: none;
	border: none;
	outline: none;
}
@font-face {

    font-family: scripted_font;

    src: local(A_font), url('font/HoneyScriptSemiBold.ttf') format('truetype');

}

@font-face {

    font-family: Parisienne;

    src: local(A_font), url('font/Parisienne-Regular.ttf') format('truetype');

}
@font-face{
	font-family: GreatVibes;
	src: local(A_font), url('font/GreatVibes-Regular.ttf') format('truetype');
}
#loader{
position:absolute;
padding-top:20px;
top:0px;
left:0px;
width:100%;
height:100%;
background:#f26d7d;
z-index:100;


}
.style1 {
	color: #FF0000;
	font-size: xx-large;
}
.font1{
	color:#CCCCCC;
	font-family:scripted_font;
	font-size:18px
}
.font2{
	color:#29abe2;
	font-family:scripted_font;
	font-size:102px
}
.font3{
	color:#000000;
	font-family:scripted_font;
	font-size:18px
}
.font4{
	color:#FF0000;
	font-family:scripted_font;
	font-size:18px
}
.font5{
	color:#ffff00;
	font-family:standard_font;
	font-size:18px
}

#main-panel{
	position:absolute;
	top:155px;
	left:5%;
	border-radius: 25px;
	background: #000000;
	width: 40%;
	height: 300px;
	opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
	z-index:1;
}
#main-sub-panel{
	position:absolute;
	padding-top:10px;
	top:155px;
	height: 80%;
	width: 40%;
	left:5%;
	font-size: x-large;
	color:#FFFFFF;
	font-family:Parisienne;
	font-size:32px;
	z-index:2;
	text-align: center;
}

#SWC-panel{
	position:absolute;
	top:490px;
	left:5%;
	border-radius: 25px;
	background: #000000;
	width: 40%;
	height: 50px;
	opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
	z-index:1;
}
#SWC-sub-panel{
	position:absolute;
	/*padding-top:10px;*/
	top:500px;
	height: 30%;
	width: 40%;
	left:5%;
	font-size: x-large;
	color:#FFFFFF;
	font-family:GreatVibes;
	font-size:32px;
	z-index:2;
	text-align: center;
}

#menu-panel {
	position:absolute;
	top:50px;
	left:10%;
	border-radius: 25px;
	background: #000000;
	width: 80%;
	height: 50px;
	opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
	z-index:1;
	font-size: x-large; color:#12025e;
	font-family:DancingScript; font-size:32px;
}
#menu-sub-panel{
	position:absolute;
	top:50px;
	height: 50px;
	width: 80%;
	padding-top:5px;
	left:10%;
	color:#CCCCCC;
	font-family:scripted_font;
	font-size:32px;
	text-align:center;
	z-index:2;
}
#RSVP-panel{
	position:absolute;
	top:155px;
	left:50%;
	border-radius: 25px;
	background: #000000;
	width: 600px;
	height: 100%;
	opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
	z-index:1;
}
#RSVP-form-panel{
	position:absolute;
	padding:1px;
	top:155px;
	height: 100%;
	width:600px;
	left:50%;
	z-index:2;
}
#RSVPS-panel{
	position:absolute;
	top:155px;
	left:50%;
	border-radius: 25px;
	background: #000000;
	width: 600px;
	height: 100%;
	opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
	z-index:1;
}
#RSVPS-form-panel{
	position:absolute;
	padding:1px;
	top:155px;
	height: 100%;
	width:600px;
	left:50%;
	z-index:2;
}
#ourDay-panel{
	position:absolute;
	top:155px;
	left:50%;
	border-radius: 25px;
	background: #000000;
	width: 45%;
	height: 100%;
	opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
	z-index:1;
}
#ourDay-sub-panel{
	position:absolute;
	padding:60px;
	top:155px;;
	height: 100%;
	left:50%;
	font-size: x-large;
	color:#CCCCCC;
	font-family:scripted_font;
	font-size:32px;
	z-index:2;
}
#aboutUs-panel{
	position:absolute;
	top:155px;
	left:50%;
	border-radius: 25px;
	background: #000000;
	width: 45%;
	height: 330%;
	opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
	z-index:1;
}
#aboutUs-sub-panel{
	position:absolute;
	padding:10px;
	top:155px;
	height: 100%;
	width: 44%;
	left:50%;
	font-size: x-large;
	color:#CCCCCC;
	font-family:scripted_font;
	font-size:32px;
	z-index:2;
}
#Accommodations-panel{
	position:absolute;
	top:155px;
	left:50%;
	border-radius: 25px;
	background: #000000;
	width: 45%;
	height: 115%;
	opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
	z-index:1;
}
#Accommodations-sub-panel{
	position:absolute;
	padding:10px;
	top:155px;;
	height: 100%;
	width: 44%;
	left:50%;
	font-size: x-large;
	color:#CCCCCC;
	font-family:scripted_font;
	font-size:32px;
	z-index:2;
}
#weddingParty-panel{
	position:absolute;
	top:155px;
	left:50%;
	border-radius: 25px;
	background: #000000;
	width: 45%;
	height: 115%;
	opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
	z-index:1;
	font-size: x-large; color:#12025e;
	font-family:DancingScript; font-size:32px;
}
#weddingParty-sub-panel{
	position:absolute;
	padding:10px;
	top:155px;;
	height: 100%;
	width: 44%;
	left:50%;
	font-size: x-large;
	color:#CCCCCC;
	font-family:scripted_font;
	font-size:32px;
	z-index:2;
}
#Registry-panel{
	position:absolute;
	top:155px;
	left:50%;
	border-radius: 25px;
	background: #000000;
	width: 45%;
	height: 25%;
	opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
	z-index:1;
	font-size: x-large; color:#12025e;
	font-family:DancingScript; font-size:32px;
}
#Registry-sub-panel{
	position:absolute;
	padding:10px;
	top:155px;
	height: 100%;
	width: 44%;
	left:50%;
	font-size: x-large;
	color:#CCCCCC;
	font-family:scripted_font;
	font-size:32px;
	z-index:2;
}

#clockdiv{
    font-family: sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 30px;
}

#clockdiv > div{
    padding: 10px;
    border-radius: 3px;
    background: #f26d7d;
    display: inline-block;
}

#clockdiv div > span{
    padding: 15px;
    border-radius: 3px;
    background: #ed145b;
    display: inline-block;
}

.smalltext{
    padding-top: 5px;
    font-size: 16px;
}
.numbers {
    border-style: ridge;    /* options are none, dotted, dashed, solid, double, groove, ridge, inset, outset */
    border-width: 2px;
    border-color: #666666;  /* change the border color using the hexadecimal color codes for HTML */
    background: #222222;    /* change the background color using the hexadecimal color codes for HTML */
    padding: 2px 0px;
    width: 55px;
    text-align: center; 
    font-family: Arial; 
    font-size: 28px;
    font-weight: bold;    /* options are normal, bold, bolder, lighter */
    font-style: normal;   /* options are normal or italic */
    color: #FFFFFF;       /* change color using the hexadecimal color codes for HTML */
}
.title {    /* the styles below will affect the title under the numbers, i.e., “Days”, “Hours”, etc. */
    border: none;    
    padding: 0px;
    width: 55px;
    text-align: center; 
    font-family: Arial; 
    font-size: 10px; 
    font-weight: normal;  /* options are normal, bold, bolder, lighter */
    color: #DDDDDD;       /* change color using the hexadecimal color codes for HTML */
    background: transparent;    /* change the background color using the hexadecimal color codes for HTML */
}
#table {
    width: 400px;
    border: none;    /* options are none, dotted, dashed, solid, double, groove, ridge, inset, outset */
    margin: 0px auto;
    position: relative;    /* leave as "relative" to keep timer centered on your page, or change to "absolute" then change the values of the "top" and "left" properties to position the timer */
    top: 0px;        /* change to position the timer */
    left: 0px;        /* change to position the timer; delete this property and it's value to keep timer centered on page */
}