/** FUNCTIONS **/ .rounded-corners (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; } .box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { box-shadow: @arguments; -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; } .rounded { .rounded-corners(8px); } .shadow { .box-shadow(2px, 3px, 1px, #aaa); } .white_border { border: 1px solid white; } /** DEFINITIONS **/ * { padding: 0; margin: 0; font-size: 1em; font-family: 'Open Sans'; } html, body { background: #c2d0d9; height: 100%; width: 100%; padding: 0; margin: 0; } body { /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlNGU5ZjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIzOSUiIHN0b3AtY29sb3I9IiNkMmQ2ZTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI3MiUiIHN0b3AtY29sb3I9IiNjMmQwZDkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYzJkMGQ5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-radial-gradient(center, ellipse cover, #e4e9f5 0%, #d2d6e0 39%, #c2d0d9 72%, #c2d0d9 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#e4e9f5), color-stop(39%,#d2d6e0), color-stop(72%,#c2d0d9), color-stop(100%,#c2d0d9)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #e4e9f5 0%,#d2d6e0 39%,#c2d0d9 72%,#c2d0d9 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #e4e9f5 0%,#d2d6e0 39%,#c2d0d9 72%,#c2d0d9 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #e4e9f5 0%,#d2d6e0 39%,#c2d0d9 72%,#c2d0d9 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #e4e9f5 0%,#d2d6e0 39%,#c2d0d9 72%,#c2d0d9 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e9f5', endColorstr='#c2d0d9',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */ background-repeat:no-repeat; float:left; } html { overflow-y: hidden\9; } html, body { height: 100%\9; } body { overflow-y: scroll\9; } #main { position:relative; width: 100%; min-height: 100%; background-image:url('../image/main_bg_onigiri.png'); background-repeat:no-repeat; background-position:right bottom; background-attachment: fixed; float:left; } #top { position:relative; } #body { position:relative; } ._1, ._2, ._3, ._4 { margin-bottom: -10px; } .logo { } /* Stitches */ .stitch { float:left; width:100%; min-height:400px; position: relative; z-index: 0; padding: 19px; border: 1px solid #dddddd; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0 1px 0 0 #9a9a9a; -moz-box-shadow: 0 1px 0 0 #9a9a9a; box-shadow: 0 1x 0 0 #9a9a9a; background-color: #f6f6f6; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #eeeeee)); background-image: -webkit-linear-gradient(#ffffff, #eeeeee); background-image: -moz-linear-gradient(#ffffff, #eeeeee); background-image: -o-linear-gradient(#ffffff, #eeeeee); background-image: linear-gradient(#ffffff, #eeeeee); margin-bottom: 20px; } .stitch:before { content: ''; z-index: -1; position: absolute; border: 1px dashed #cccccc; top: 3px; bottom: 3px; left: 3px; right: 3px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 0 0 1px white; -moz-box-shadow: 0 0 0 1px white; box-shadow: 0 0 0 1px white; } h1 { margin:0; font-size:2em; font-family: 'Coming Soon'; } h2 { margin:0; font-size:1.5em; font-family: 'Coming Soon'; } h3 { margin:0; font-size:1.1em; font-family: 'Coming Soon'; } li { margin-left: 16px; }