From bcc9703d1c1dd8484179849d3625d3ac38a40f9b Mon Sep 17 00:00:00 2001 From: teleject Date: Wed, 18 Apr 2012 21:09:58 -0500 Subject: [PATCH] updated CSS --- index.html | 380 +++++++++++++++++++++++++++-------------------------- 1 file changed, 194 insertions(+), 186 deletions(-) diff --git a/index.html b/index.html index 66a5340..6bd0907 100755 --- a/index.html +++ b/index.html @@ -17,56 +17,66 @@ * { margin: 0; padidng: 0; - -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ - -moz-box-sizing: border-box; /* Firefox, other Gecko */ - box-sizing: border-box; /* Opera/IE 8+ */ + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } a { - text-decoration: none; + text-decoration: none; + } + html, body { + display: table; + height: 100%; + width: 100%; } body { font-size: 100%; } + body > div { + margin: 0 auto; + transform: translateY(-50%); + width: 960px; + margin-top: -6.6%; + } h1 a { - color: #66ffff; - font-family: "LeagueGothicRegular", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; - font-size: 3.5em; - text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135, -1px -1px 0 rgba(0,102,51,.5), + color: #66ffff; + font: 3.5em "leaguegothicregular","helvetica neue",arial,helvetica,geneva,sans-serif normal; + text-shadow: 0px 1px 0px #999, + 0px 2px 0px #888, + 0px 3px 0px #777, + 0px 4px 0px #666, + 0px 5px 0px #555, + 0px 6px 0px #444, + 0px 7px 0px #333, + 0px 8px 7px #001135, + -1px -1px 0 rgba(0,102,51,.5), 1px -1px 0 rgba(0,102,51,.5), -1px 1px 0 rgba(0,102,51,.5), 1px 1px 0 rgba(0,102,51,.5), 0 4px 4px rgba(0,0,0,.5); } - - - h2 { margin: 0 auto; - font-family: "LeagueGothicRegular", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; - font-size: 2.6em; + font: 2.6em "leaguegothicregular","helvetica neue",arial,helvetica,geneva,sans-serif normal; letter-spacing: .1em; - font-weight: normal; color: #66ffff; width: 960px; text-align: center; - border-top: 1px solid rgba(115,160,255,.5); - + border-top: 1px solid rgba(115,160,255,.5); border-left: 1px solid rgba(115,160,255,.5); - -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; + border-right: 1px solid #36383D; text-transform: lowercase; text-shadow: -1px -1px 0 rgba(0,102,51,.5), - 1px -1px 0 rgba(0,102,51,.5), - -1px 1px 0 rgba(0,102,51,.5), - 1px 1px 0 rgba(0,102,51,.5); - border-right:1px solid #36383D; - background-image: url(-/img/bkgd-noise.png); - + 1px -1px 0 rgba(0,102,51,.5), + -1px 1px 0 rgba(0,102,51,.5), + 1px 1px 0 rgba(0,102,51,.5); + background-image: url(-/img/bkgd-noise.png); } label,textarea { display: block; @@ -74,11 +84,7 @@ textarea { width: 600px; } - - br { - clear: both; - } - + form { width: 960px; margin: 0 auto; @@ -90,59 +96,68 @@ -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; - - - - /* border for edge, 1px solid #color */ - border-bottom:1px solid #36383D; - border-right:1px solid #36383D; - background-image: url(-/img/bkgd-noise.png); + border-bottom:1px solid #36383D; + border-right:1px solid #36383D; + background-image: url(-/img/bkgd-noise.png); } form p { + font: 3em/1.5 "leaguegothicregular","helvetica neue",arial,helvetica,geneva,sans-serif bold; + text-align: center; + text-shadow: -1px -1px 0 rgba(0,102,51,.5), + 1px -1px 0 rgba(0,102,51,.5), + -1px 1px 0 rgba(0,102,51,.5), + 1px 1px 0 rgba(0,102,51,.5), + 0 4px 4px rgba(0,0,0,.5); width: 10%; + height: 3em; float: left; margin: 1em auto 0; padding: 0; - text-align: center; - height: 3em; - line-height: 1.5; - font-size: 3em; color: #7afff5; - font-weight: bold; - font-family: "LeagueGothicRegular", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; - text-shadow: -1px -1px 0 rgba(0,102,51,.5), - 1px -1px 0 rgba(0,102,51,.5), - -1px 1px 0 rgba(0,102,51,.5), - 1px 1px 0 rgba(0,102,51,.5), - 0 4px 4px rgba(0,0,0,.5); } form div { width: 20%; float: left; margin: 2em 2em; - background: rgba(255,255,255,.9); + background: #fff; + background: rgba(255,255,255,.8); border: 1px solid #DAD9C6; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; - -webkit-box-shadow: 0 0 0 1px rgba(255,255,255,0), 0px 0px 0px 4px rgba(0, 33, 0, 0.5), 0px 0px 7px rgba(0, 33, 0, 0.9); - -moz-box-shadow: 0 0 0 1px rgba(255,255,255,0), 0px 0px 0px 4px rgba(0, 33, 0, 0.5), 0px 0px 7px rgba(0, 33, 0, 0.9); - box-shadow: 0 0 0 1px rgba(255,255,255,0), 0px 0px 20px rgba(0, 33, 0, 0.9), 0px 0px 11px rgba(0, 33, 0, 0.5), 0px 0px 0px 4px rgba(0, 76, 37, 0.5); - + -webkit-box-shadow: 0 0 0 1px rgba(255,255,255,0), + 0px 0px 20px rgba(0, 33, 0, 0.9), + 0px 0px 11px rgba(0, 33, 0, 0.5), + 0px 0px 0px 4px rgba(0, 76, 37, 0.5); + -moz-box-shadow: 0 0 0 1px rgba(255,255,255,0), + 0px 0px 20px rgba(0, 33, 0, 0.9), + 0px 0px 11px rgba(0, 33, 0, 0.5), + 0px 0px 0px 4px rgba(0, 76, 37, 0.5); + box-shadow: 0 0 0 1px rgba(255,255,255,0), + 0px 0px 20px rgba(0, 33, 0, 0.9), + 0px 0px 11px rgba(0, 33, 0, 0.5), + 0px 0px 0px 4px rgba(0, 76, 37, 0.5); } form div:hover { - -webkit-box-shadow: 0 0 0 1px rgba(255,255,255,.8), 0px 0px 0px 2px rgba(0, 33, 0, 0.5), 0px 0px 5px rgba(0, 33, 0, 0.9); - -moz-box-shadow: 0 0 0 1px rgba(255,255,255,.8), 0px 0px 0px 4px rgba(0, 33, 0, 0.5), 0px 0px 5px rgba(0, 33, 0, 0.9); - box-shadow: 0 0 0 1px rgba(255,255,255,.8), 0px 0px 2px rgba(0, 33, 0, 0.9), 0px 0px 5px rgba(0, 33, 0, 0.5), 0px 0px 0px 4px rgba(0, 76, 37, 0.5); - -webkit-transition: all 0.3s ease-out; + -webkit-box-shadow: 0 0 1px rgba(255,255,255,.8), + 0px 0px 2px rgba(0, 33, 0, 0.9), + 0px 0px 5px rgba(0, 33, 0, 0.5), + 0px 0px 0px 4px rgba(0, 76, 37, 0.5); + -moz-box-shadow: 0 0 1px rgba(255,255,255,.8), + 0px 0px 2px rgba(0, 33, 0, 0.9), + 0px 0px 5px rgba(0, 33, 0, 0.5), + 0px 0px 0px 4px rgba(0, 76, 37, 0.5); + box-shadow: 0 0 0 1px rgba(255,255,255,.8), + 0px 0px 2px rgba(0, 33, 0, 0.9), + 0px 0px 5px rgba(0, 33, 0, 0.5), + 0px 0px 0px 4px rgba(0, 76, 37, 0.5); + -webkit-transition: all 0.3s ease-out; } - form div.last { margin-right: 0; } - form:after { content: "."; display: block; @@ -150,35 +165,33 @@ clear: both; visibility: hidden; } - - label { - text-align: center; - margin: -8px 0 0; - display: block; - text-shadow: #dddddd 1px 0px 0em; - color: #da6700; font: 600 .8em Georgia; text-transform: uppercase; + text-shadow: #dddddd 1px 0px 0em; + text-align: center; + margin: 10px 0 0; padding-bottom: 10px; + display: block; + color: #da6700; border-bottom: 2px dashed #da6700; - margin-top: 18px; } div > input { + font: 4em "leaguegothicregular","helvetica neue",arial,helvetica,geneva,sans-serif; text-align: center; width: 100%; - margin: 0; - padding: .1em 0; border: 0; - font: 600 4em "LeagueGothicRegular", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; + padding: .1em 0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: rgba(255,255,255,.9); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(50%,#000202), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, #000000 0%,#000202 50%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), + color-stop(50%,#000202), + color-stop(100%,#ffffff)); + background: -webkit-linear-gradient(top, #000000 0%,#000202 50%,#ffffff 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } #container { @@ -189,131 +202,126 @@ color: green; display: none; } - input[type="reset"], input[type="submit"], textarea, #container { display: none; } - - html, body { - display: table; - height: 100%; - width: 100%; - } body { display:table-cell; vertical-align:middle; text-align: center; - - background-image: - -webkit-radial-gradient(50% 50%, rgba(0, 204, 125, 0.00), rgba(0, 51, 0, 0.6)), - -webkit-radial-gradient(50% 50%, rgba(0, 204, 125, 0.00), rgba(0, 00, 0, 0.7)), - url(-/img/bkgd-noise.png), - url(-/img/bkgd.png), - -webkit-gradient(linear, 0 0, 0 100%, - color-stop(0.05, rgba(255, 255, 255, .5)), - color-stop(0.05, rgba(255, 255, 255, 0.1)), - color-stop(0.5, rgba(255, 255, 255, 0.1)), - color-stop(0.5, rgba(255, 255, 255, .5)), - color-stop(0.55, rgba(255, 255, 255, .5)), - color-stop(0.55, rgba(255, 255, 255, 0))), - -webkit-gradient(linear, 0 0, 100% 0, - color-stop(0.05, rgba(255, 255, 255, .5)), - color-stop(0.05, rgba(255, 255, 255, 0.1)), - color-stop(0.5, rgba(255, 255, 255, 0.1)), - color-stop(0.5, rgba(255, 255, 255, .5)), - color-stop(0.55, rgba(255, 255, 255, .5)), - color-stop(0.55, rgba(255, 255, 255, 0))); - - background-image: - -moz-linear-gradient(90deg, - rgba(255, 255, 255, 1) 5%, - rgba(255, 255, 255, .25) 5%, - rgba(255, 255, 255, .25) 50%, - rgba(255, 255, 255, 1) 50%, - rgba(255, 255, 255, 1) 55%, - rgba(255, 255, 255, 0) 55%, - rgba(255, 255, 255, 0)), - -moz-linear-gradient(0, - rgba(255, 255, 255, 1)5%, - rgba(255, 255, 255, .25) 5%, - rgba(255, 255, 255, .25) 50%, - rgba(255, 255, 255, 1) 50%, - rgba(255, 255, 255, 1) 55%, - rgba(255, 255, 255, 0) 55%, - rgba(255, 255, 255, 0)), - -webkit-radial-gradient(50% 50%, rgba(255, 255, 255, 0.00), rgba(0, 0, 0, 1.00)); - - - background-image: - -ms-linear-gradient(90deg, - rgba(255, 255, 255, 1) 5%, - rgba(255, 255, 255, .25) 5%, - rgba(255, 255, 255, .25) 50%, - rgba(255, 255, 255, 1) 50%, - rgba(255, 255, 255, 1) 55%, - rgba(255, 255, 255, 0) 55%, - rgba(255, 255, 255, 0)), - -ms-linear-gradient(0deg, - rgba(255, 255, 255, 1)5%, - rgba(255, 255, 255, .25) 5%, - rgba(255, 255, 255, .25) 50%, - rgba(255, 255, 255, 1) 50%, - rgba(255, 255, 255, 1) 55%, - rgba(255, 255, 255, 0) 55%, - rgba(255, 255, 255, 0)); - background-image: - -o-linear-gradient(90deg, - rgba(255, 255, 255, 1) 5%, - rgba(255, 255, 255, .25) 5%, - rgba(255, 255, 255, .25) 50%, - rgba(255, 255, 255, 1) 50%, - rgba(255, 255, 255, 1) 55%, - rgba(255, 255, 255, 0) 55%, - rgba(255, 255, 255, 0)), - -o-linear-gradient(0, - rgba(255, 255, 255, 1)5%, - rgba(255, 255, 255, .25) 5%, - rgba(255, 255, 255, .25) 50%, - rgba(255, 255, 255, 1) 50%, - rgba(255, 255, 255, 1) 55%, - rgba(255, 255, 255, 0) 55%, - rgba(255, 255, 255, 0)); - background-image: - linear-gradient(90deg, - rgba(255, 255, 255, 1) 5%, - rgba(255, 255, 255, .25) 5%, - rgba(255, 255, 255, .25) 50%, - rgba(255, 255, 255, 1) 50%, - rgba(255, 255, 255, 1) 55%, - rgba(255, 255, 255, 0) 55%, - rgba(255, 255, 255, 0)), - linear-gradient(0, - rgba(255, 255, 255, 1)5%, - rgba(255, 255, 255, .25) 5%, - rgba(255, 255, 255, .25) 50%, - rgba(255, 255, 255, 1) 50%, - rgba(255, 255, 255, 1) 55%, - rgba(255, 255, 255, 0) 55%, - rgba(255, 255, 255, 0)); - - - background-color: #0db85f; - background-size: 100%, 100%, contain, contain, 25px 25px, 25px 25px; - background-position: 50%; + background-image: + -webkit-radial-gradient(50% 50%, rgba(0, 204, 125, 0.00), rgba(0, 51, 0, 0.6)), + -webkit-radial-gradient(50% 50%, rgba(0, 204, 125, 0.00), rgba(0, 00, 0, 0.7)), + url(-/img/bkgd-noise.png), + url(-/img/bkgd.png), + -webkit-gradient(linear, 0 0, 0 100%, + color-stop(0.05, rgba(255, 255, 255, .5)), + color-stop(0.05, rgba(255, 255, 255, 0.1)), + color-stop(0.5, rgba(255, 255, 255, 0.1)), + color-stop(0.5, rgba(255, 255, 255, .5)), + color-stop(0.55, rgba(255, 255, 255, .5)), + color-stop(0.55, rgba(255, 255, 255, 0))), + -webkit-gradient(linear, 0 0, 100% 0, + color-stop(0.05, rgba(255, 255, 255, .5)), + color-stop(0.05, rgba(255, 255, 255, 0.1)), + color-stop(0.5, rgba(255, 255, 255, 0.1)), + color-stop(0.5, rgba(255, 255, 255, .5)), + color-stop(0.55, rgba(255, 255, 255, .5)), + color-stop(0.55, rgba(255, 255, 255, 0))); + background-image: + -moz-radial-gradient(center, rgba(0, 204, 125, 0.00), rgba(0, 51, 0, 0.6)), + -moz-radial-gradient(center, rgba(0, 204, 125, 0.00), rgba(0, 00, 0, 0.7)), + url(-/img/bkgd-noise.png), + url(-/img/bkgd.png), + -moz-linear-gradient(90deg, + rgba(255, 255, 255, 1) 5%, + rgba(255, 255, 255, .25) 5%, + rgba(255, 255, 255, .25) 50%, + rgba(255, 255, 255, 1) 50%, + rgba(255, 255, 255, 1) 55%, + rgba(255, 255, 255, 0) 55%, + rgba(255, 255, 255, 0)), + -moz-linear-gradient(0, + rgba(255, 255, 255, 1)5%, + rgba(255, 255, 255, .25) 5%, + rgba(255, 255, 255, .25) 50%, + rgba(255, 255, 255, 1) 50%, + rgba(255, 255, 255, 1) 55%, + rgba(255, 255, 255, 0) 55%, + rgba(255, 255, 255, 0)); + background-image: + -ms-radial-gradient(center, rgba(0, 204, 125, 0.00), rgba(0, 51, 0, 0.6)), + -ms-radial-gradient(center, rgba(0, 204, 125, 0.00), rgba(0, 00, 0, 0.7)), + url(-/img/bkgd-noise.png), + url(-/img/bkgd.png), + -ms-linear-gradient(90deg, + rgba(255, 255, 255, 1) 5%, + rgba(255, 255, 255, .25) 5%, + rgba(255, 255, 255, .25) 50%, + rgba(255, 255, 255, 1) 50%, + rgba(255, 255, 255, 1) 55%, + rgba(255, 255, 255, 0) 55%, + rgba(255, 255, 255, 0)), + -ms-linear-gradient(0deg, + rgba(255, 255, 255, 1)5%, + rgba(255, 255, 255, .25) 5%, + rgba(255, 255, 255, .25) 50%, + rgba(255, 255, 255, 1) 50%, + rgba(255, 255, 255, 1) 55%, + rgba(255, 255, 255, 0) 55%, + rgba(255, 255, 255, 0)); + background-image: + -o-radial-gradient(center, rgba(0, 204, 125, 0.00), rgba(0, 51, 0, 0.6)), + -o-radial-gradient(center, rgba(0, 204, 125, 0.00), rgba(0, 00, 0, 0.7)), + url(-/img/bkgd-noise.png), + url(-/img/bkgd.png), + -o-linear-gradient(90deg, + rgba(255, 255, 255, 1) 5%, + rgba(255, 255, 255, .25) 5%, + rgba(255, 255, 255, .25) 50%, + rgba(255, 255, 255, 1) 50%, + rgba(255, 255, 255, 1) 55%, + rgba(255, 255, 255, 0) 55%, + rgba(255, 255, 255, 0)), + -o-linear-gradient(0, + rgba(255, 255, 255, 1)5%, + rgba(255, 255, 255, .25) 5%, + rgba(255, 255, 255, .25) 50%, + rgba(255, 255, 255, 1) 50%, + rgba(255, 255, 255, 1) 55%, + rgba(255, 255, 255, 0) 55%, + rgba(255, 255, 255, 0)); + background-image: + radial-gradient(center, rgba(0, 204, 125, 0.00), rgba(0, 51, 0, 0.6)), + radial-gradient(center, rgba(0, 204, 125, 0.00), rgba(0, 00, 0, 0.7)), + url(-/img/bkgd-noise.png), + url(-/img/bkgd.png), + linear-gradient(90deg, + rgba(255, 255, 255, 1) 5%, + rgba(255, 255, 255, .25) 5%, + rgba(255, 255, 255, .25) 50%, + rgba(255, 255, 255, 1) 50%, + rgba(255, 255, 255, 1) 55%, + rgba(255, 255, 255, 0) 55%, + rgba(255, 255, 255, 0)), + linear-gradient(0, + rgba(255, 255, 255, 1)5%, + rgba(255, 255, 255, .25) 5%, + rgba(255, 255, 255, .25) 50%, + rgba(255, 255, 255, 1) 50%, + rgba(255, 255, 255, 1) 55%, + rgba(255, 255, 255, 0) 55%, + rgba(255, 255, 255, 0)); + background-color: #0db85f; + background-size: 100%, 100%, contain, contain, 25px 25px, 25px 25px; + background-position: 50%; } - body > div { - margin: 0 auto; - transform: translateY(-50%); - width: 960px; - margin-top: -6.6%; - } - ::selection { + + ::selection, ::-moz-selection { background: #ff00cc; /* Safari */ - } - ::-moz-selection { - background: #ff00cc; /* Firefox */ } +