/*Onsitus.it - css tutorials - cartoline natalizia css - css Christmas card:
http://css.flepstudio.org
Se usate questo template, grazie per lasciare queste informazione o un link back a onsitus.it è sempre il benvenuto
If you use this template, thank you to leave those information or a link back to onsitus.it is always welcome*/

#christmas_card{
width:500px;
height:400px;
margin:auto;
overflow:hidden;
position:relative;
background-color:#000666;
border:5px solid #000;
color:#FFFFFF;
-moz-border-radius: 25px;/*compatible with Firefox*/
-webkit-border-radius: 25px;/*compatible with Safari*/
}
/*text style*/
@font-face{/*compatible with Safari - Firefox 3.5+*/
font-family: 'Christmas';
src:url('http://www.onsitus.it/css-tutorials/css_christmas_card_2009/christmas.ttf');
} 
#xmas_wishes {
text-align:center;
font-size:40px;
font-family:serif;
font-family: 'Christmas'; /*compatible with Safari - Firefox 3.5+*/
font-weight:bold;
}
#xmas_wishes h1{/*for IE 6-7*/
font-size:80px;
margin-top:60px;
margin-bottom:0;
}
/*border class*/
.br{
border-right:1px solid black;
}
.bl{
border-left:1px solid black;
}
.bt{
border-top:1px solid black;
}
.bb{
border-bottom:1px solid black;
}
/*start - father christmas*/
.father_xmas{
width:95px;
height:124px;
position:absolute;
bottom:30px;
right:50px;
z-index:11;
}
.father_xmas div{
position:absolute;
}
.father_xmas .head{
width:38px;
height:50px;
position:absolute;
top:0;
left:18px;
z-index:20;
}
.father_xmas .head .pt60{
width:5px;
height:5px;
bottom:36px;
left:29px;
}
.father_xmas .head .pt59{
width:13px;
height:2px;
background-color:#FF0000;
bottom:47px;
left:21px;
}
.father_xmas .head .pt58{
width:14px;
height:4px;
background-color:#FF0000;
bottom:43px;
left:22px;
}
.father_xmas .head .pt57{
width:4px;
height:4px;
background-color:#FF0000;
bottom:43px;
left:17px;
}
.father_xmas .head .pt56{
width:11px;
height:6px;
background-color:#FF0000;
bottom:37px;
left:18px;
}
.father_xmas .head .pt55{
width:4px;
height:4px;
background-color:#FF0000;
bottom:38px;
left:13px;
}
.father_xmas .head .pt54{
width:1px;
height:4px;
background-color:#FF0000;
bottom:33px;
left:29px;
}
.father_xmas .head .pt53{
width:15px;
height:5px;
background-color:#FF0000;
bottom:33px;
left:14px;
}
.father_xmas .head .pt52{
width:3px;
height:4px;
background-color:#FF0000;
bottom:33px;
left:10px;
}
.father_xmas .head .pt51{
width:6px;
height:5px;
bottom:8px;
left:18px;
z-index:24;
}
.father_xmas .head .pt50{
width:1px;
height:5px;
background-color:#000000;
bottom:21px;
left:23px;
z-index:23;
}
.father_xmas .head .pt49{
width:1px;
height:5px;
background-color:#000000;
bottom:21px;
left:16px;
z-index:22;
}
.father_xmas .head .pt48{
width:7px;
height:4px;
background-color:#FF0000;
bottom:15px;
left:13px;
z-index:21;
}
.father_xmas .head .pt47{
width:21px;
height:4px;
background-color:#999999;
bottom:27px;
left:9px;
}
.father_xmas .head .pt46{
width:2px;
height:4px;
background-color:#FFFFFF;
bottom:23px;
left:27px;
}
.father_xmas .head .pt45{
width:15px;
height:4px;
background-color:#FFFFFF;
bottom:23px;
left:11px;
}
.father_xmas .head .pt44{
width:15px;
height:5px;
background-color:#FFFFFF;
bottom:18px;
left:12px;
}
.father_xmas .head .pt43{
width:2px;
height:4px;
background-color:#FFFFFF;
bottom:18px;
left:9px;
}
.father_xmas .head .pt42{
width:17px;
height:3px;
background-color:#FFFFFF;
bottom:15px;
left:10px;
}
.father_xmas .head .pt41{
width:2px;
height:2px;
background-color:#FFFFFF;
bottom:15px;
left:7px;
}
.father_xmas .head .pt40{
width:19px;
height:4px;
background-color:#FFFFFF;
bottom:11px;
left:8px;
}
.father_xmas .head .pt39{
width:4px;
height:3px;
background-color:#FFFFFF;
bottom:11px;
left:3px;
}
.father_xmas .head .pt38{
width:2px;
height:16px;
background-color:#FFFFFF;
bottom:0;
left:27px;
}
.father_xmas .head .pt37{
width:23px;
height:10px;
background-color:#FFFFFF;
bottom:0;
left:4px;
}
.father_xmas .head .pt36{
width:3px;
height:9px;
background-color:#FFFFFF;
bottom:0;
left:0;
}
.father_xmas .pt35{
width:31px;
height:3px;
background-color:#48721C;
top:0;
left:41px;
}
.father_xmas .pt34{
width:16px;
height:7px;
background-color:#48721C;
top:4px;
left:73px;
}
.father_xmas .pt33{
width:31px;
height:8px;
background-color:#48721C;
top:4px;
left:41px;
}
.father_xmas .pt32{
width:5px;
height:24px;
background-color:#48721C;
top:12px;
left:89px;
}
.father_xmas .pt31{
width:47px;
height:26px;
background-color:#48721C;
top:12px;
left:41px;
}
.father_xmas .pt30{
width:11px;
height:16px;
background-color:#48721C;
bottom:69px;
left:78px;
}
.father_xmas .pt29{
width:5px;
height:11px;
background-color:#D00807;
bottom:61px;
left:71px;
}
.father_xmas .pt28{
width:7px;
height:13px;
background-color:#48721C;
bottom:73px;
left:71px;
}
.father_xmas .pt27{
width:5px;
height:25px;
background-color:#48721C;
bottom:61px;
left:66px;
}
.father_xmas .pt26{
width:11px;
height:15px;
background-color:#FF0000;
bottom:61px;
left:53px;
}
.father_xmas .pt25{
width:12px;
height:9px;
background-color:#FF0000;
bottom:76px;
left:53px;
}
.father_xmas .pt24{
width:30px;
height:24px;
background-color:#FF0000;
bottom:61px;
left:23px;
}
.father_xmas .pt23{
width:6px;
height:24px;
background-color:#FF0000;
bottom:61px;
left:15px;
}
.father_xmas .pt22{
width:5px;
height:13px;
background-color:#D00807;
bottom:47px;
left:72px;
}
.father_xmas .pt21{
width:11px;
height:12px;
background-color:#D00807;
bottom:48px;
left:60px;
}
.father_xmas .pt20{
width:6px;
height:5px;
background-color:#FFFFFF;
bottom:48px;
left:54px;
}
.father_xmas .pt19{
width:6px;
height:7px;
background-color:#FF0000;
bottom:53px;
left:54px;
}
.father_xmas .pt18{
width:5px;
height:13px;
background-color:#FF0000;
bottom:48px;
left:48px;
}
.father_xmas .pt17{
width:20px;
height:12px;
background-color:#99CC00;
bottom:48px;
left:27px;
}
.father_xmas .pt16{
width:17px;
height:12px;
background-color:#FF0066;
bottom:48px;
left:8px;
}
.father_xmas .pt15{
width:10px;
height:11px;
background-color:#D00807;
bottom:36px;
left:61px;
}
.father_xmas .pt14{
width:60px;
height:11px;
background-color:#D00807;
bottom:36px;
left:0;
}
.father_xmas .pt13{
width:61px;
height:6px;
background-color:#D00807;
bottom:29px;
left:6px;
}
.father_xmas .pt12{
width:61px;
height:6px;
background-color:#FF0000;
bottom:22px;
left:6px;
}
.father_xmas .pt11{
width:5px;
height:13px;
background-color:#D00807;
bottom:9px;
left:52px;
}
.father_xmas .pt10{
width:5px;
height:13px;
background-color:#D00807;
bottom:9px;
left:27px;
}
.father_xmas .pt9{
width:9px;
height:4px;
background-color:#666;
bottom:4px;
left:58px;
}
.father_xmas .pt8{
width:5px;
height:5px;
background-color:#666;
bottom:4px;
left:53px;
}
.father_xmas .pt7{
width:20px;
height:4px;
background-color:#666;
bottom:4px;
left:33px;
}
.father_xmas .pt6{
width:5px;
height:5px;
background-color:#666;
bottom:4px;
left:28px;
}
.father_xmas .pt5{
width:4px;
height:4px;
background-color:#666;
bottom:4px;
left:24px;
}
.father_xmas .pt4{
width:17px;
height:5px;
background-color:#666;
bottom:4px;
left:7px;
}
.father_xmas .pt3{
width:17px;
height:3px;
background-color:#666;
bottom:9px;
left:7px;
}
.father_xmas .pt2{
width:6px;
height:7px;
background-color:#666;
bottom:4px;
left:0;
}
.father_xmas .pt1{
width:60px;
height:3px;
background-color:#333;
bottom:0;
left:6px;
box-shadow:3px 3px 10px #000;/*compatible with Safari - Firefox 3.5+ - Google Chrome*/
-webkit-box-shadow:3px 3px 10px #000;
-moz-box-shadow: 3px 3px 10px #000;
}
/*end - father christmas*/
/*start - reindeer*/
.reindeer{
width:57px;
height:59px;
position:absolute;
z-index:10;
}
.reindeer div{
position:absolute;
background-color:#BD7D3C;
}
.reindeer .pt33{
width:1px;
height:3px;
left:13px;
top:24px;
z-index:5;
}
.reindeer .pt32{
width:4px;
height:4px;
top:17px;
left:22px;;
}
.reindeer .pt31{
width:2px;
height:2px;
background-color:red;
border:1px solid black;
position:absolute;
left:0;
bottom:31px;
}
.reindeer .pt23, .reindeer .pt24, .reindeer .pt25, .reindeer .pt26, .reindeer .pt27, .reindeer .pt28, .reindeer .pt29, .reindeer .pt30{
background-color:#F4D882;
}	
.reindeer .pt30{
width:3px;
height:5px;
top:16px;
left:16px;
}
.reindeer .pt29{
width:3px;
height:2px;
top:14px;
left:16px;
}
.reindeer .pt28{
width:3px;
height:1px;
top:14px;
left:20px;
}
.reindeer .pt27{
width:3px;
height:2px;
top:11px;
left:13px;
}
.reindeer .pt26{
width:3px;
height:2px;
top:11px;
left:17px;
}
.reindeer .pt25{
width:3px;
height:3px;
top:11px;
left:20px;
}
.reindeer .pt24{
width:3px;
height:10px;
top:0;
left:13px;
}
.reindeer .pt23{
width:3px;
height:8px;
top:2px;
left:19px;
}
.reindeer .pt22{
width:9px;
height:8px;
bottom:23px;
left:1px;
}
.reindeer .pt21{
width:8px;
height:9px;
bottom:23px;
left:11px;
}
.reindeer .pt20{
width:5px;
height:3px;
bottom:31px;
left:19px;
}
.reindeer .pt19{
width:13px;
height:2px;
bottom:33px;
left:10px;
}
.reindeer .pt18{
width:6px;
height:2px;
bottom:35px;
left:10px;
}
.reindeer .pt17{
width:3px;
height:3px;
bottom:35px;
left:17px;
}
.reindeer .pt16{
width:3px;
height:2px;
bottom:35px;
left:20px;
}
.reindeer .pt15{
width:1px;
height:2px;
bottom:35px;
left:23px;
}
.reindeer .pt14{
width:3px;
height:2px;
bottom:35px;
left:24px;
}
.reindeer .pt13{
width:2px;
height:3px;
left:53px;
bottom:31px;
}
.reindeer .pt12{
width:5px;
height:8px;
bottom:23px;
left:19px;
}
.reindeer .pt11{
width:29px;
height:7px;
bottom:23px;
left:24px;
}
.reindeer .pt10{
width:3px;
height:7px;
bottom:23px;
left:53px;
}
.reindeer .pt9{
width:5px;
height:9px;
bottom:13px;
left:18px;
}
.reindeer .pt8{
width:10px;
height:10px;
bottom:13px;
left:24px;
}
.reindeer .pt7{
width:6px;
height:9px;
bottom:13px;
left:34px;
}
.reindeer .pt6{
width:10px;
height:10px;
bottom:13px;
left:40px;
}
.reindeer .pt5{
width:3px;
height:9px;
bottom:13px;
left:50px;
}
.reindeer .pt1, .reindeer .pt2, .reindeer .pt3, .reindeer .pt4{
width:4px;
height:12px;
bottom:0;
box-shadow:3px 3px 10px #000;/*compatible with Safari - Firefox 3.5+ - Google Chrome*/
-webkit-box-shadow:3px 3px 10px #000;
-moz-box-shadow: 3px 3px 10px #000;
}
.reindeer .pt4{
left:23px;
}
.reindeer .pt3{
left:29px;
}
.reindeer .pt2{
left:39px;
}
.reindeer .pt1{
left:45px;
}
/*reindeer position*/
.r1{
bottom:30px;
left:40px;
}
.r2{
bottom:23px;
left:110px;
}
.r3{
bottom:28px;
left:200px;
}
.r4{
bottom:35px;
left:280px;
}
/*white background*/
.snow{
width:500px;
height:100px;
border-top:5px solid #00003C;
background-color:#FFFFFF;
-moz-border-radius-bottomright:22px;/*Compatible with Safari - Firefox 2+ - Google Chrome*/
-moz-border-radius-bottomleft:22px;
-webkit-border-bottom-right-radius:22px; 
-webkit-border-bottom-left-radius:22px; 
position:absolute;
bottom:0;
left:0;
z-index:0;
}
/*stars style/position*/
.stars{
font-family:sans-serif;
filter: alpha(opacity=40); /*Internet Explorer*/
opacity:.4;
position:absolute;
}
.s1{
font-size:150px;
top:0;
left:3px;
}
.s2{
font-size:100px;
top:0;
left:450px;
}
.s3{
font-size:150px;
top:40px;
left:430px;
}
.s4{
font-size:90px;
top:0;
left:250px;
}
.s5{
font-size:60px;
top:0;
left:150px;
}
.s6{
font-size:130px;
top:0;
left:400px;
}
.s7{
font-size:130px;
top:50px;
left:50px;
}
.s8{
font-size:80px;
top:0;
left:50px;
}
.s9{
font-size:80px;
top:0;
left:370px;
}
.s10{
font-size:100px;
top:20px;
left:60px;
}
.s11{
font-size:55px;
top:120px;
left:10px;
}
.s12{
font-size:55px;
top:140px;
left:460px;
}
.s13{
font-size:90px;
top:150px;
left:30px;
}
/*snow flakes style/position*/
.flakes{
font-size:10px;
filter: alpha(opacity=50); /*Internet Explorer*/
opacity:.5;
position:absolute;
}
.f1{
bottom:130px;
left:20px;
}
.f2{
bottom:140px;
left:35px;
}
.f3{
bottom:150px;
left:46px;
}
.f4{
bottom:130px;
left:76px;
}
.f5{
bottom:170px;
left:99px;
}
.f6{
bottom:142px;
left:463px;
}
.f7{
bottom:185px;
left:372px;
}
.f8{
bottom:158px;
left:268px;
}
.f9{
bottom:159px;
left:296px;
}
.f10{
bottom:139px;
left:238px;
}
.f11{
bottom:169px;
left:182px;
}
.f12{
bottom:160px;
left:130px;
}
.f13{
bottom:134px;
left:365px;
}
.f14{
bottom:145px;
left:230px;
}
.f15{
bottom:150px;
left:498px;
}
.f16{
bottom:150px;
left:128px;
}
.f17{
bottom:137px;
left:179px;
}
.f18{
bottom:147px;
left:199px;
}
.f19{
bottom:124px;
left:200px;
}
.f20{
bottom:136px;
left:216px;
}
.f21{
bottom:128px;
left:163px;
}
.f22{
bottom:125px;
left:269px;
}
.f23{
bottom:130px;
left:245px;
}
.f24{
bottom:120px;
left:287px;
}
.f25{
bottom:124px;
left:310px;
}
.f26{
bottom:132px;
left:315px;
}
.f27{
bottom:139px;
left:329px;
}
.f28{
bottom:150px;
left:99px;
}
.f29{
bottom:120px;
left:100px;
}
.f30{
bottom:145px;
left:80px;
}