/* Xmas Tree CSS
 *
 * Britta Gustafson and Douglas Thrift
 *
 * tree.css
 */

.tree { margin-top: 20px; text-align: center; }

.tree span, #star span, #ornaments span, #star_character, #ornaments_character
{
	font-family: serif;
}

p, h1, h2 { margin: 0 auto; padding: 0; text-align: center; }
h1, h2 { font-size: 100%; font-weight: normal; }
img { border-style: none; }

.b-, .c-, .d-, .e-, .f-, .g-, .h-, .i-, .j-
{
	background-color: #228b22/*forestgreen*/;
	height: 40px;
}

.b- { width: 20px; margin-top: -45px; }
.c- { width: 60px; }
.d- { width: 100px; }
.e- { width: 140px; }
.f- { width: 180px; }
.g- { width: 220px; }
.h- { width: 260px; }
.i- { width: 300px; }
.j- { width: 340px; }
.k- { width: 40px; height: 40px; background-color: #8b4513/*saddlebrown*/; }

.star { font-size: 90px; }
.ornament { font-size: 27px; }
.ornament-0 { margin-right: 25px; }
.ornament-1 { margin-left: 30px; }
.ornament-2 { margin-right: 70px; }
.ornament-6 { margin-left: 130px; }
.ornament-7 { margin-right: 50px; }
.ornament-8 { margin-left: 10px; }
.ornament-9 { margin-right: 100px; }
.ornament-11 { margin-left: 80px; }

.light { text-decoration: blink; font-size: 10px; }
.one { color: red; }
.two { color: yellow; }
.three { color: aqua/*cyan*/; }
.four { color: #7fff00/*chartreuse*/; }

.greetings, th, label, select, #save input, header a, footer p, .email p, .actions input, #greeting input, #greeting textarea, #greeting .errorlist, li, #about p, .tree input
{
	font-family: futura, calibri, sans-serif;
}

.actions
{
	margin-bottom: 20px;
	margin-top: 20px;
	text-align: center;
}

.actions div, .actions form { display: inline; }

.greetings { font-size: 50px; text-align: center; }
.greetings h1 { white-space: pre; }
.snowflakes { color: #dcdcdc/*gainsboro*/; font-size: 100px; }

table#decorate, table.colors, table#featured, table#greeting, table#index
{
	margin: auto;
}

td#make, td#about { vertical-align: top; padding-top: 20px; }
td#about { width: 500px; }
#about p { text-align: left; }
#featured td { vertical-align: bottom; }

#greeting th { text-align: right; }
#greeting .errorlist { font-size: 11px; }
#greeting ul.errorlist { margin: 0; }
#greeting .greetings { width: 500px; }

#star, #ornaments { vertical-align: top; width: 180px; }
#star p, #ornaments p { text-align: left; }

#star p.star, #ornaments p.ornament 
{
	background-color: #228b22/*forestgreen*/;
	text-align: center;
}

#star p.star span, #ornaments p.ornament span { cursor: pointer; }

.colors td { cursor: pointer; height: 10px; width: 10px; }

#star .suggestions, #ornaments .suggestions { text-align: center; }
#star .suggestions { font-size: 72px; }
#ornaments .suggestions { font-size: 33px; }

.suggestions span { cursor: pointer; }
.decorate-active { border: thin dashed black; }
.decorate-hover { border: thin solid black; }

#save p { text-align: center; }

a:link, a:visited, a:active { text-decoration: none; }
a:hover { text-decoration: underline; }
a:link { color: #228b22/*forestgreen*/; }
a:visited { color: #b22222/*firebrick*/; }

li { padding-bottom: 12px; }

header h1 { font-size: 130%; }
footer p { font-size: 13px; }
.email p { text-align: left; }

@font-face {
	font-family: 'Symbola';
	src: url('/fnt/symbola.eot');
	src: local('☺'), url('/fnt/symbola.woff') format('woff'), url('/fnt/symbola.otf') format('opentype'), url('/fnt/symbola.ttf') format('truetype'), url('/fnt/symbola.svg#Symbola') format('svg');
}