1.5

public/style.css

@@ -0,0 +1,227 @@
+/*
+Infinity Squared CSS
+https://github.com/tomslominski/infinity-squared
+*/
+
+/* General */
+::selection {
+	background: rgba(1,63,109,0.7);
+	color: #FFF;
+}
+
+input::selection {
+	background: rgba(1,63,109,0.7);
+	color: #FFF;
+}
+
+::-moz-selection {
+	background: rgba(1,63,109,0.7);
+	color: #FFF;
+}
+
+input::-moz-selection {
+	background: rgba(1,63,109,0.7);
+	color: #FFF;
+}
+
+a, a:visited, .footer a, .footer a:visited {
+	color: #013F6D;
+	text-decoration: none;
+}
+
+p {
+	font-size: 1.2em;
+}
+
+/* Structure */
+body {
+	background: #F1F1F1;
+	color: black;
+	font-family: 'Ubuntu', sans-serif, Helvetica, Arial;
+	font-size: 62.5%;
+}
+
+#container {
+	width: 60%;
+	min-width: 720px;
+	margin: 0 auto;
+	background-color: white;
+}
+
+/* Header */
+header {
+	width: 95%;
+	padding: 2.5%;
+	margin: 0 auto;
+}
+
+h1 {
+	background: url(img/noise.png) #013F6D;
+	width: 100%;
+	text-align: center;
+	color: white;
+	font-size: 7em;
+	border-top: 4px #000 solid;
+	margin: 0 auto;
+}
+
+h1 a, h1 a:visited {
+	color: white;
+	text-decoration: none;
+}
+
+h1 a:hover {
+	border-bottom: #FFF 1px dashed;
+}
+
+.menu {
+	background: #000000; /* Old browsers */
+	background: -moz-linear-gradient(top,  #000000 0%, #141414 100%); /* FF3.6+ */
+	background: -webkit-linear-gradient(top,  #000000 0%,#141414 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(top,  #000000 0%,#141414 100%); /* Opera 11.10+ */
+	background: linear-gradient(to bottom,  #000000 0%,#141414 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#141414',GradientType=0 ); /* IE6-9 */
+	display: block;
+	float: left;
+	margin: 0 auto;
+	width: 96%;
+	color: white;
+	padding: 0 2% 0 2%;
+	margin-bottom: 30px;
+	font-size: 1.2em;
+}
+
+.menu a {
+	color: #FFF;
+	text-decoration: none;
+	line-height: 38px;
+	display: block;
+	padding: 0 10px;
+	background: none;
+	transition: background 800ms;
+	-moz-transition: background 800ms; /* Firefox 4 */
+	-webkit-transition: background 800ms; /* Safari and Chrome */
+	-o-transition: background 800ms; /* Opera */
+}
+
+.menu a:hover {
+	transition: background 800ms;
+	-moz-transition: background 800ms; /* Firefox 4 */
+	-webkit-transition: background 800ms; /* Safari and Chrome */
+	-o-transition: background 800ms; /* Opera */
+	background: #292929;
+}
+
+.menu li {
+	list-style: none;
+	float: left;
+	line-height: 38px;
+	width: auto;
+}
+
+/* Main style */
+.paragraph {
+	padding: 0 2.5% 0 2.5%;
+}
+
+h2 {
+	color: black;
+	margin-bottom: -8px;
+}
+
+.right {
+	width: 60%;
+	float: right;
+}
+
+a.bookmarklet {
+	border-radius: 11px;
+	background: #ddd url(../img/button.png) repeat-x;
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #ddd));
+	background: -moz-linear-gradient(top center, #fff 0%, #ddd 100%);
+	border: 1px solid;
+	border-color: #ddd #bbb #999;
+	cursor: pointer;
+	color: #333;
+	font: bold 12px/1.2 Arial, sans-serif;
+	outline: 0;
+	overflow: visible;
+	padding: 3px 10px 4px;
+	text-shadow: #fff 0 1px 1px;
+	text-decoration: none;
+	margin-right: 2%;
+}
+
+/* Tooltips */
+.qtip-default {
+	border-color: #013F6D;
+	background-color: #013F6D;
+	color: #FFF;
+}
+
+.ui-tooltip-titlebar,
+.ui-tooltip-content{
+	border-color: #013F6D;
+	background-color: #013F6D;
+	color: #FFF;
+}
+
+/* Output */
+.output label {
+	width: 30%;
+	float: left;
+}
+
+.output input {
+	width: 70%
+}
+
+.error {
+	color: red;
+}
+
+/* Footer */
+.footer {
+	text-align: center;
+	border-top: 2px solid #000;
+	margin-top: 30px;
+}
+
+.footer p {
+	padding: 2%;
+	margin: 0 auto;
+	font-size: 1.1em;
+}
+
+.footer a:hover {
+	text-decoration: none;
+	border-bottom: dashed 1px #013F6D;
+}
+
+/* Mobile */
+@media screen and (max-width: 720px) {
+body {
+	background:white;
+	margin:0;
+}
+
+#container {
+	min-width:0;
+	width:100%;
+	margin:0;
+	padding:0;
+}
+
+header {
+	width:100%;
+	padding:0;
+}
+
+.menu li {
+	margin-top:0;
+}
+
+.desktop-only {
+	display:none;
+}
+}