body { font-family:verdana, sans; font-size:0.9em; background-color:#999; } #page_wrapper { width:70%; background-color:white; padding:30px; margin-right:auto; margin-left:auto; position:relative; } h1, h2, h3 { font-family: arial; color:#6699aa; } #target { width:200px; height:150px; border:1px solid #222; background-color:#ccc; margin:20px; } #result { width:400px; border:1px solid #777; background-color:#ddefdd; padding:14px; margin:20px; } #result2 { width:35%; border:1px solid #777; background-color:#999; padding:14px; margin:20px; color:white; font-size:3em; float:right; height:100px; } #result3, #msg { width:35%; border:1px solid #777; background-color:#ddefdd; padding:14px; margin:20px; color:#222; float:right; display:none; } #btn-wrapper { width:200px; border:3px solid #ccc; background-color:#77e; padding:20px; margin:30px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .btn { padding:10px; font-size:1.4em; color:#555; cursor:pointer; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border-style:none; -moz-box-shadow: 2px 2px 3px #999; -webkit-box-shadow: 2px 2px 3px #999; box-shadow: 2px 2px 3px #999; background: #e6f0a3; /* Old browsers */ background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 53%, #c3d825 57%, #dbf043 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(53%,#d2e638), color-stop(57%,#c3d825), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e6f0a3 0%,#d2e638 53%,#c3d825 57%,#dbf043 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e6f0a3 0%,#d2e638 53%,#c3d825 57%,#dbf043 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e6f0a3 0%,#d2e638 53%,#c3d825 57%,#dbf043 100%); /* IE10+ */ background: linear-gradient(to bottom, #e6f0a3 0%,#d2e638 53%,#c3d825 57%,#dbf043 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */ } .navform { float:right; } .slideshow { position:relative; width:300px; } #ltArrow, #rtArrow { display:none; height:auto; position:absolute; top:150px; width:60px; z-index:50; } #rtArrow { right:0; } #ltArrow { left:0; } .border { border: 2px solid silver; padding:8px; margin:10px; } #dropTarget { width:250px; height:250px; border:2px solid #777; background-color:#aaa; margin:20px; position:absolute; top:100px; right:50px; font-size:1.3em; padding:10px; color:white; } canvas#drawing { background-color:#eee; } #stage { height:200px; margin-top:100px; } .ltr { margin:7px; font-size:3em; font-family:"arial"; font-weight:bold; padding:8px 16px; line-height:0; color:#66c; position:relative; cursor:pointer; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border:1px solid #999; background: #daf2eb; /* Old browsers */ background: -moz-linear-gradient(top, #daf2eb 0%, #a6a9b5 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#daf2eb), color-stop(100%,#a6a9b5)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #daf2eb 0%,#a6a9b5 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #daf2eb 0%,#a6a9b5 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #daf2eb 0%,#a6a9b5 100%); /* IE10+ */ background: linear-gradient(to bottom, #daf2eb 0%,#a6a9b5 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#daf2eb', endColorstr='#a6a9b5',GradientType=0 ); /* IE6-9 */ } #headerWrap { float:left; margin-right:20px; } #myForm input { font-size:0.9em; } #myForm input.sml { font-size:0.8em; color:#55a; }