/* Styles for send card // mileht */

#cardWrapper { /* position:relative;*/ }
#cardWrapper .handled h1, #cardWrapper .handled h2, #cardWrapper .handled p { margin:1em 0; line-height:1.6em; }
#cardWrapper .handled h1, #cardWrapper .handled h2 { margin:1em 0; font-size:1.7em; color:#3cbc0f; font-weight:normal; }
#cardWrapper .error h2 { color:#bc400f; }
#cardWrapper h3{font-size:1.3em; }
#cardWrapper h4{font-size:1.1em; }

#cardWrapper a { /*color:#30920d;*/ text-decoration:none; outline:none; }
#cardWrapper a:hover { text-decoration:underline; }
#cardWrapper img { border:0; }

#cardContainer { /*width:610px; height:420px;*/ margin:0; padding:0; /*background:url(images/bg_card.gif) 0 0 no-repeat;*/ text-align:left; }
#viewContainer { position:absolute; top:10px; left:50%; z-index:100; margin-left:-350px; width:610px; height:500px; padding:50px 40px 40px 50px; background:url(images/bg_card.png) 0 0 no-repeat; text-align:left; }
#cardWrapper .preview { display:none; }
#cardContainer .leftCol { float:left; width:300px; margin-left:40px; display:inline; }
#cardContainer .leftCol .inner { padding:10px 0 0 10px; }
#cardContainer .rightCol { float:left; width:270px; margin-left:40px; display:inline; }
#viewContainer .rightCol { height:400px; position:relative; }

#viewContainer .leftCol { float:left; width:300px; display:inline; }
#viewContainer .leftCol .inner { padding:10px 0 0 10px; }
#viewContainer .rightCol { float:right; width:270px; margin-right:20px; display:inline; }

#viewContainer #closeCardPreview { position:absolute; top:15px; right:50px; padding:5px 10px; background:#fff; }

#cardContainer form { margin-top:5px; }
#cardContainer #cardForm-message { width:264px; margin:2px 0; }
#cardContainer #loppu { display:block; width:100%; text-align:right; }

#cardContainer #cardForm-name,
#cardContainer #cardForm-email,
#cardContainer #cardForm-receiverName,
#cardContainer #cardForm-receiverEmail { width:260px; margin:2px 0; }

#cardContainer #commentForm-submit { float:right; margin:0; }

#cardContainer p { margin:0; }
#cardContainer p.buttons { margin-top:10px; }
#cardContainer p.choose { margin-bottom:10px; font-weight:bold; }
#viewContainer p.greetings { position:absolute; bottom:15px; left:0; font-size:1.2em; }

#cardContainer h2.sendCard { display:none; /*width:234px; height:67px; margin-bottom:1em; background:url(images/send_eastercard.gif) 0 0 no-repeat;*/}
#viewContainer h2.cardTitle { width:236px; height:66px; margin:15px 0 25px 0; background:url(images/happy_easter.gif) 0 0 no-repeat;}
#cardContainer h2.sendCard span, #viewContainer h2.cardTitle span { display:none; }

#cardContainer .cardHolder { width:45%; float:left; }

#cardContainer .cardHolder a { /*position:relative;*/ display:block; width:80px; height:106px; margin:0 auto 10px auto; padding:10px; border:1px solid #fff; }
#cardContainer .cardHolder a:hover { border:1px solid #eee; text-decoration:none; }
#cardContainer .cardHolder a.selected { background:url(images/bg_selected_green.gif) 0 0 no-repeat; border:1px solid #fff; }
#cardContainer .cardHolder a.selected:hover { border:1px solid #fff; } 
#cardContainer .cardHolder a img { width:80px; height:106px; }

#bigCard { width:300px; height:400px; }

#cardContainer .cardHolder { position:relative; }
#cardContainer .cardHolder .previewCard { top:-200px; right:60px; }

.previewCard { position:absolute; z-index:10; width:300px; height:400px; padding:10px; border:1px solid #ddd; }
#preview-card1, .card1 { background:#fff url(images/card1.jpg) 10px 10px no-repeat; }
#preview-card2, .card2 { background:#fff url(images/card2.jpg) 10px 10px no-repeat; }
#preview-card3, .card3 { background:#fff url(images/card3.jpg) 10px 10px no-repeat; }
#preview-card4, .card4 { background:#fff url(images/card4.jpg) 10px 10px no-repeat; }

.card1, .card2, .card3, .card4 { background-position:0 0; }