header background, logos css and some responsive

nnmon/static/css/style.css

@@ -78,6 +78,7 @@ p label { width: 7em; display: inline-block; }
 	clear: both;
 	margin: auto;
 	background-color: #f9f9f9;
+	padding-bottom:30px;
 	}
 
 .errorlist { font-size: .8em; color: red; }
@@ -235,26 +236,28 @@ blockquote {
 }
 #header {
   background: #f9f9f9;
+  padding:3%
 }
 
 #header a {
-	color: #222;
+	color: white;
 	text-decoration: none;
 }
 
 h1 {
-  margin: 25px 0 0 0; padding: 30px 0;
+  margin: 25px 0 0 0;
+  padding: 3%;
   font-family: 'DroidSansBold', Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif;
   font-size: 35px;
   line-height: 1;
-  font-weight: normal;
+  font-weight: bold;
+  text-shadow:1px 2px 1px rgba(0, 0, 0, 0.4);
 }
 h1 span {
   display: block;
   font-family: 'DroidSansRegular', Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif;
   font-size: .8em;
-  font-weight: normal;
-  color: orange;
+  font-weight: bold;
 }
 
 /* User */
@@ -296,8 +299,40 @@ h1 span {
 /* Content */
 
 #content {
-  width: 610px;
+  width: 60%;
+}
+#add-case{
+  width: 40%;
+}
+#header{
+background: rgba(11,145,194,1);
+background: -moz-linear-gradient(left, rgba(11,145,194,1) 0%, rgba(4,220,227,1) 100%);
+background: -webkit-gradient(left top, right top, color-stop(0%, rgba(11,145,194,1)), color-stop(100%, rgba(4,220,227,1)));
+background: -webkit-linear-gradient(left, rgba(11,145,194,1) 0%, rgba(4,220,227,1) 100%);
+background: -o-linear-gradient(left, rgba(11,145,194,1) 0%, rgba(4,220,227,1) 100%);
+background: -ms-linear-gradient(left, rgba(11,145,194,1) 0%, rgba(4,220,227,1) 100%);
+background: linear-gradient(to right, rgba(11,145,194,1) 0%, rgba(4,220,227,1) 100%);
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0b91c2', endColorstr='#04dce3', GradientType=1 );
+
+background-image: url("images/net-neutrality.png"), -moz-linear-gradient(left, rgba(11,145,194,1) 0%, rgba(4,220,227,1) 100%);
+background-image: url("images/net-neutrality.png"), -webkit-gradient(left top, right top, color-stop(0%, rgba(11,145,194,1)), color-stop(100%, rgba(4,220,227,1)));
+background-image: url("images/net-neutrality.png"), -webkit-linear-gradient(left, rgba(11,145,194,1) 0%, rgba(4,220,227,1) 100%);
+background-image: url("images/net-neutrality.png"), -o-linear-gradient(left, rgba(11,145,194,1) 0%, rgba(4,220,227,1) 100%);
+background-image: url("images/net-neutrality.png"), -ms-linear-gradient(left, rgba(11,145,194,1) 0%, rgba(4,220,227,1) 100%);
+background-image: url("images/net-neutrality.png"), linear-gradient(to right, rgba(11,145,194,1) 0%, rgba(4,220,227,1) 100%);
+
+}
+
+
+
+h2{
+  margin: 1.5em 0 1em 0;
+}
+
+h2:first-child{
+  margin: 0.5em 0 1em 0;
 }
+
 #global h2:first-child {
   margin-top: 0;
 }
@@ -328,6 +363,23 @@ h1 span {
   margin-top: 1em;
 }
 
+.navbar-default {
+  background: #333;
+  border: none !important;
+  border-radius: 0;
+}
+
+.navbar-default a{
+  color:white !important;
+}
+
+.navbar-default li:hover{
+  background:#444 !important;
+}
+
+.navbar-default li.active{
+  background:#555 !important;
+}
 
 /* View page */
 
@@ -648,7 +700,7 @@ ul.messages {
 #map { float: right; }
 
 .logo-org { display: inline-block; margin: 15px; text-align: center; vertical-align: top; background-color: #f9f9f9; }
-.logo-org img { height: 80px; }
+.logo-org img { height: 80px; margin-bottom:10px}
 .dark { background-color: #212121; }
 
 tr.duplicate-status td { background: #aaa !important; }
@@ -683,3 +735,26 @@ input[type="text"], input[type="textarea"] {
 #table {
   clear: both;
 }
+
+@media screen and (max-width: 700px) {
+  h1{font-size:30px}  
+  h2{font-size:24px}  
+  h1 span{font-size:16px}
+}
+
+
+@media screen and (max-width: 500px) {
+  #add-case {
+        width:100%;
+    }
+  #content {
+        width:100%;
+    }
+    
+}
+
+@media screen and (max-width: 870px) {
+  .navbar-right input[type="text"]{
+        width:100px;
+    }    
+}
\ No newline at end of file