HTML Files

css/main.css

@@ -0,0 +1,256 @@
+@CHARSET "UTF-8";
+
+html, body {
+	height: 100%;
+}
+
+body {
+	font-family: 'Open Sans', sans-serif;
+	margin: 0px;
+	font-size: 1em;
+	color: #2A2B2B;
+}
+
+* {
+	margin: 0;
+}
+
+/* Layout Styles */
+
+#bodyContainer {
+	/*width: 700px;*/
+	width: 60%; /*Could make this responsive this controls the width of everything within this div */
+	margin: 0px auto;
+	padding-top: 30px;
+}
+
+div.header {
+	border-bottom: dotted 1px #cccccc;
+	padding-bottom: 20px;
+	margin-bottom: 20px;
+	display: block;
+	clear: both;
+	overflow: auto;
+}
+
+.wrapper {
+	min-height: 100%;
+	height: auto !important;
+	height: 100%;
+	margin: 0 auto -80px;
+}
+
+div.col2 {
+	width: 50%;
+	float: left;
+}
+
+div.blue-bg-list {
+	background-color: #0087C7;
+	padding: 3% 5%;
+	width: 35%;
+	margin-left: 5%;
+	text-shadow: 1px 1px 1px rgba(4, 30, 71, 1);
+}
+
+.margin-left {
+	padding-left: 20px;
+}
+
+#footer, .push {
+	height: 80px;
+	clear: both;
+}
+
+#footer {
+	width: 100%;
+	background-color: #333;
+	color: #ffffff;
+	font-size: 0.8em;
+	text-align: center;
+}
+
+#footer-inner p {
+	padding-top: 20px;
+}
+
+/* Element Styling */
+
+h1, h2 {
+	margin-bottom: 10px;
+	color: #0087C7;
+}
+
+div.header h1 {
+	float: left;
+	margin: 10px 0px 0px 10px;
+}
+
+div.header img {
+	float: left;	
+}
+
+h1 {
+	font-size: 2em;
+}
+
+h2 {
+	margin-top: 0px;
+	font-size: 1.1em;
+	font-weight: normal;
+}
+
+div.blue-bg-list h2{
+	color: #ffffff;	
+}
+
+p {
+	margin-bottom: 25px;
+	font-size: 0.9em;
+}
+
+a {
+	text-decoration: none;
+	color: #0087C7;
+}
+
+a:hover {
+	color: #32BAFA;
+}
+
+p.contact a{
+	margin-right: 12px;
+	margin-top: 0px;
+}
+
+p.contact i.fa-twitter-square {
+	color: #0087C7;
+}
+
+ul, ol {
+	font-size: 0.9em;
+	color: #ffffff;	
+}
+
+ul li {
+	margin-bottom: 4px;
+	margin-left: -4px;
+}
+
+img#logo {
+	height: 60px;
+}
+
+img.image-top {
+	margin-bottom: 15px;
+	width: 100%;
+}
+
+/* Table styles */
+table.devices {
+	width: 100%;
+	margin-bottom: 20px;
+	cell-padding: 0;
+	border-spacing: 0;
+    border-collapse: collapse;
+}
+
+table.devices th {
+	background-color: #0087C7;
+	color: #ffffff;
+	padding: 8px 5px;
+	margin-left: 5%;
+	text-shadow: 1px 1px 1px rgba(4, 30, 71, 1);
+	border-right: 1px dotted #ffffff;
+}
+
+table.devices td {
+	border-right: 1px dotted #C9C7C9;
+	border-bottom: 1px dotted #C9C7C9;
+	padding: 5px;
+	font-size: 0.8em;
+	text-align: center;
+}
+
+table.devices th.right {
+	border-right: #0087C7 solid 1px;
+}
+
+table.devices .left {
+	text-align: left;
+	padding-left: 12px;
+}
+
+table.devices td.left {
+	border-left: 1px dotted #C9C7C9;
+}
+
+/* 
+	*** Status *** 
+	Change the icon from 'fa-check' to 'fa-times' if you want to mark a device as unavilable
+*/
+td.status i.fa-check{
+	color: #21b384;
+}
+
+td.status i.fa-times{
+	color: #C40000;
+}
+
+
+/* Alert Box */
+
+.alert-info {
+	background-color: #d9edf7;
+	color: #3a87ad;
+	padding: 8px 35px 8px 14px;
+	margin-bottom: 18px;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+	border: 1px solid #bce8f1;
+	-webkit-border-radius: 4px;
+	-moz-border-radius: 4px;
+	border-radius: 4px;
+}
+
+.alert-block {
+  padding-top: 14px;
+  padding-bottom: 14px;
+}
+
+
+/* Media Queries */
+
+@media all and (min-width: 1001px) {
+  #bodyContainer {
+	width: 700px;
+  }
+}
+
+@media all and (max-width: 650px) {
+  #bodyContainer {
+	width: 400px;
+  }
+
+  table.devices {
+  	font-size: 0.8em;
+  }
+
+  table.devices .left {
+  	padding-left: 2%;
+  }
+
+}
+
+
+@media all and (max-width: 420px) {
+  #bodyContainer {
+	width: 90%;
+	font-size: 0.8em;
+	margin: 0 5%;
+  }
+
+  .alert-info {
+  	padding-right: 14px;
+  }
+
+}