Webmasters.BY

*{
 margin:0;
 padding:0;
}
body {
 background-color:#eee;
 color:#fff;
 font:14px/1.3 Arial,sans-serif;
}
header {
 background-color:#212121;
 box-shadow: 0 -1px 2px #111111;
 display:block;
 height:70px;
 position:relative;
 width:100%;
 z-index:100;
}
header h2{
 font-size:22px;
 font-weight:normal;
 left:50%;
 margin-left:-400px;
 padding:22px 0;
 position:absolute;
 width:540px;
}
header a.stuts,a.stuts:visited{
 border:none;
 text-decoration:none;
 color:#fcfcfc;
 font-size:14px;
 left:50%;
 line-height:31px;
 margin:23px 0 0 110px;
 position:absolute;
 top:0;
}
header .stuts span {
 font-size:22px;
 font-weight:bold;
 margin-left:5px;
}

/* стили основной области */
.container {
 height: 500px;
 margin: 50px auto;
 overflow: hidden;
 position: relative;
 width: 800px;

 background-color: #0093d8;
 background: -moz-linear-gradient(top, #0093d8, #fff);
 background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #fff),color-stop(1, #0093d8));

 -moz-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
 -webkit-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
 box-shadow: 0 10px 10px rgba(0,0,0,0.5);
}

/* стили снега внизу */
.bottom_snow {
 position: absolute;
 z-index: 5;
 top: 400px;
 left: 50%;
 margin-left: -500px;
 width: 1000px;
 height: 1000px;
 background: #e2e2e2;

 border-radius: 1000px;
 -moz-border-radius: 1000px;
 -webkit-border-radius: 1000px;
}
.bottom_snow:before , .bottom_snow:after {
 background-color: #fff;
 content: "";
 height: 1000px;
 position: absolute;
 top: -25px;
 width: 1000px;

 border-radius: 1000px;
 -moz-border-radius: 1000px;
 -webkit-border-radius: 1000px;
}
.bottom_snow:before {
 left: 400px;
}
.bottom_snow:after {
 right: 400px;
}

/* стили надписи */
h1 {
 color: #FAFAFA;
 font: bold 80px 'Comic Sans MS',Arial;
 text-align: center;
 text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.85), 4px 4px 0 #CFEAED;
 text-transform: uppercase;

 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -o-user-select: none;
 user-select: none;
}

/* стили для елки */
.tree, .tree:before, .tree:after, .tree_bot, .tree_bot:before, .tree_bot:after {
 height: 0;
 position: absolute;
 width: 0;

 border-radius: 40px;
 -moz-border-radius: 40px;
 -webkit-border-radius: 40px;
}
.tree {
 border-left: 20px solid transparent;
 border-right: 20px solid transparent;
 border-bottom: 20px solid green;
 left: 390px;
 top: 135px;
}
.tree:before {
 content:'';
 border-left: 40px solid transparent;
 border-right: 40px solid transparent;
 border-bottom: 40px solid green;
 left: -40px;
 top: 15px;
}
.tree:after {
 content:'';
 border-left: 60px solid transparent;
 border-right: 60px solid transparent;
 border-bottom: 60px solid green;
 left: -60px;
 top: 40px;
}
/* елка, нижняя часть */
.tree_bot {
 border-left: 80px solid transparent;
 border-right: 80px solid transparent;
 border-bottom: 80px solid green;
 left: 330px;
 top: 210px;
}
.tree_bot:before {
 content:'';
 border-left: 100px solid transparent;
 border-right: 100px solid transparent;
 border-bottom: 100px solid green;
 left: -100px;
 top: 40px;
}
.tree_bot:after {
 content:'';
 border-left: 120px solid transparent;
 border-right: 120px solid transparent;
 border-bottom: 120px solid green;
 left: -120px;
 top: 80px;
}

/* стили для шариков */
.ball {
 height: 40px;
 left: 390px;
 position: absolute;
 top: 345px;
 width: 40px;

 border-radius: 40px;
 -moz-border-radius: 40px;
 -webkit-border-radius: 40px;

 box-shadow: 0 0 5px #777;
 -moz-box-shadow: 0 0 5px #777;
 -webkit-box-shadow: 0 0 5px #777;
}
.red {
 background-color: #c8171f;
 background-image: -webkit-radial-gradient(50% 50%, circle, #f9d0be, #c8171f 70%);
 background-image: -moz-radial-gradient(50% 50%, circle, #f9d0be, #c8171f 70%);
 background-image: -o-radial-gradient(50% 50%, circle, #f9d0be, #c8171f 70%);
 background-image: radial-gradient(50% 50%, circle, #f9d0be, #c8171f 70%);

 left: 340px;
 top: 325px;
}
.blue {
 background-color: #00a1ee;
 background-image: -webkit-radial-gradient(50% 50%, circle, #cde6f9, #00a1ee 70%);
 background-image: -moz-radial-gradient(50% 50%, circle, #cde6f9, #00a1ee 70%);
 background-image: -o-radial-gradient(50% 50%, circle, #cde6f9, #00a1ee 70%);
 background-image: radial-gradient(50% 50%, circle, #cde6f9, #00a1ee 70%);
}
.green {
 background-color: #4d8d00;
 background-image: -webkit-radial-gradient(50% 50%, circle, #d1e5b2, #4d8d00 70%);
 background-image: -moz-radial-gradient(50% 50%, circle, #d1e5b2, #4d8d00 70%);
 background-image: -o-radial-gradient(50% 50%, circle, #d1e5b2, #4d8d00 70%);
 background-image: radial-gradient(50% 50%, circle, #d1e5b2, #4d8d00 70%);

 left: 440px;
 top: 325px;
}
.rsmall, .gsmall, .bsmall {
 height: 25px;
 width: 25px;
}
.rsmall {
 left: 440px;
 top: 255px;
}
.bsmall {
 left: 350px;
 top: 255px;
}
.gsmall {
 left: 395px;
 top: 275px;
}

/* стили для падающего снега */
.fall_snow {
 background-image: url('../images/snow1.png'), url('../images/snow2.png'), url('../images/snow3.png');
 height: 100%;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;

 -webkit-animation: snow 10s linear infinite;
 -moz-animation: snow 10s linear infinite;
 -ms-animation: snow 10s linear infinite;
 animation: snow 10s linear infinite;
}
@keyframes snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
 100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}