body, html, h1, h2, h3, div, p, img, a, ul, li, ol, dl, dd, dt {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    font-family: Verdana, sans-serif;
    background: #ebebeb;
    font-size: 90%;
    color: #111;
    text-align: center;
    width: 100%;
}

a {
    color: #7aac22;
    text-decoration: none;
}

/* Main chrome */

.outer {
    width: 100%;
    background: #ebebeb url(../images/body_bg.png) repeat-y 50% 0;
}

.container {
    position: relative;
    width: 820px;
    height: 698px;
    padding: 1px 0;
    margin-left: auto;
    margin-right: auto;
    background: #f7efdc url(../images/bg.jpg) no-repeat 0 0;
}
    body.index .container {
        background-image: url(../images/bg_snowy.jpg);
    }

.rn_logo {
    position: absolute;
    bottom: 30px;
    left: 30px;
}

/* Index page */

.front_title {
    position: absolute;
    top: 50px;
    left: 160px;
}

.front_card {
    position: absolute;
    top: 170px;
    left: 200px;
}

a.front_start {
    position: absolute;
    display: block;
    top: 570px;
    left: 350px;
    width: 110px;
    height: 55px;
    text-indent: -5000px;
    background: url(../images/start.png) no-repeat 0 -2px;
}
    a.front_start:hover {
        background-position: 0 -52px;
    }

/* Choose-a-decoration page */

.choose_title { 
    position: absolute;
    top: 40px;
    left: 260px;
}

.decorations {
    position: absolute;
    top: 90px;
    left: 20px;
    width: 800px;
    height: 500px;
    background: url(../images/grid.png) no-repeat 23px 2px;
}
    .decoration {
        display: block;
        position: relative;
        float: left;
        width: 190px;
        height: 160px;
        background: no-repeat 50% 50%;
        padding: 0 2px 2px 0;
        cursor: pointer;
        text-decoration: none;
        color: #000;
    }
        .decoration .popup {
            position: absolute;
            visibility: hidden;
            top: -44px;
            left: -14px;
            width: 220px;
            height: 260px;
            background: url(../images/box.png) no-repeat 50% 50%;
            z-index: 2;
            cursor: pointer;
        }
            .selected .popup {
                visibility: visible;
                cursor: pointer;
            }
            .decoration .popup h6 {
                font-weight: normal;
                font-size: 30px;
                margin: 0;
                padding: 10px 0 0 0;
            }
            .decoration .popup p {
                position: absolute;
                top: 200px;
                left: 20px;
                width: 180px;
                font-size: 0.95em;
                margin: 0;
                padding: 0;
                color: #4c3d31;
            }
            .decoration .popup .inner_decoration {
                position: absolute;
                top: 25px;
                left: 0;
                width: 100%;
                height: 200px;
                background: no-repeat 50% 50%;
            }

/* Details form */

#message {
	position: relative;
	top: -15px;
	margin: 0 0 -15px 0;
}	


form#send {
	margin: 30px 0 0 0;	
}

label {
    display: block;
    width: 320px;
    margin-left: auto;
    margin-right: auto;
    font-size: 30px;
    font-weight: bold;
    text-align: left;
    text-transform: uppercase;
    margin-top: 20px;
}
    small.right {
        display: block;
        width: 320px;
        margin-left: auto;
        margin-right: auto;
        text-align: right;
        font-size: 12px;
        padding: 0;
        z-index: 100;
        position: relative;
        top: 50px;
        left: 0;
        color: #777;
        font-style: italic;
        padding-top: 0;
    }
    small.left {
        display: block;
        width: 320px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
        font-size: 10px;
        color: #777;
        font-style: italic;
    }

.checkbox {
    text-align: left;
    width: 320px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}
    .checkbox label {
        display: inline;
        font-size: 0.8em;
        text-transform: none;
        font-weight: normal;
    }

div.textbox {
    background: #fff;
    padding: 3px;
    width: 320px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4px;
    margin-bottom: 7px;
}
    div.textbox input {
        color: #81c3db;
        width: 320px;
        background-color: #fff;
        border: 0;
        font-size: 19px;
        font-style: italic;
        border-bottom: 2px dashed #998675;
        padding: 5px 0 5px 0;
    }
    div.textbox textarea {
        color: #81c3db;
        width: 320px;
        height: 100px;
        background-color: #fff;
        border: 0;
        font-size: 19px;
        font-style: italic;
        font-family: sans-serif;
    }
 
.errorlist {
	position: relative;	
}

.errorlist li {
	position: absolute;
	left: 90px;
	top: 10px;
    list-style-type: none;
    color: #b00;
    font-size: 90%;
    margin: 6px 0;
}
    .errorlist li {
        width: 320px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

/* Card [pre]view */

.merry_title {
    position: absolute;
    top: 50px;
    left: 160px;
}

h2.sender_name {
    position: absolute;
    top: 90px;
    display: block;
    text-align: center;
    left: 0px;
    width: 100%;
}

.big_decoration {
    position: absolute;
    top: 50px;
    left: 0px;
    width: 100%;
    height: 500px;
    background: no-repeat 50% 50%;
}

.message {
    position: absolute;
    top: 470px;
    left: 250px;
    width: 320px;
}

.preview_roundel {
    position: absolute;
    top: 150px;
    left: 90px;
}

.send_card {
    position: absolute;
    top: 625px;
    left: 360px;
}

.made_mistake {
    position: absolute;
    top: 635px;
    left: 550px;
    font-size: 110%;
}

/* Thanks page */

.sent_title {
    position: absolute;
    top: 130px;
    left: 180px;
}

#teaser-container {
	position: absolute;
	top: 310px;	
	left: 30px;
}

	#teaser-container .teaser {
		width: 220px;
		float: left;
		margin: 0 15px;
		text-align: left;
	}
		#teaser-container .teaser .teaser-image {
			float: right;
			margin: 0 0 15px 15px;
		}
		
		#teaser-container .teaser h3 {
			margin: 0 0 5px 0;
			color: #333;
			text-transform: uppercase;
			font-size: 1.6em;
		}
	
		#teaser-container .teaser p {
			font-size: 0.85em;
			line-height: 1.5;	
			color: #4a3a2d;
		}
		
		#teaser-container .teaser a {
			display: block;
			margin: 10px 0 0 0;
			font-size: 1.2em;	
		}
		
			#teaser-container .teaser a:hover {
				color: #4a3a2d;
			}


/* Card view */

#footer-teasers {
	position: absolute;
	top: 600px;
	left: 280px;	
}

	#footer-teasers .footer-teaser {
		width: 220px;
		margin: 0 15px;
		padding: 0 0 0 15px;
		border-left: 1px solid #826e5a;
		float: left;	
		text-align: left;
		position: relative;
	}
		#footer-teasers .footer-teaser h3 {
			width: 200px;	
		}
		
		#footer-teasers .footer-teaser .footer-teaser-image {
			display: block !important;	
			position: absolute;
			right: -20px;
			top: 0;
			z-index: 999;
		}
		
		#footer-teasers .footer-teaser .tree {
			top: -15px;
			right: 5px;	
		}
	
		#footer-teasers .footer-teaser a {
			display: block;
		}
		
			#footer-teasers .footer-teaser a:hover {
				color: #4a3a2d;
			}

/* sIFR rules */

@media screen {
  .sIFR-flash {
    margin: 0;
    padding: 0;
  }
  
  .sIFR-alternate {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
  }
  
  .sIFR-replaced div.sIFR-fixfocus {
    margin: 0pt; 
    padding: 0pt; 
    overflow: auto; 
    letter-spacing: 0px; 
    float: none;
  }
}

@media print {
  .sIFR-flash {
    display    : none !important;
    height     : 0;
    width      : 0;
    position   : absolute;
    overflow   : hidden;
  }
  
  .sIFR-alternate {
    visibility : visible !important;
    display    : block   !important;
    position   : static  !important;
    left       : auto    !important;
    top        : auto    !important;
    width      : auto    !important;
    height     : auto    !important;
  }
}