From 3e4119d3dcce0e22b33ffa0e9da11f6e478f3b5c Mon Sep 17 00:00:00 2001
From: Adam Amstrong <adama@localhost>
Date: Tue, 3 Apr 2007 15:02:18 +0000
Subject: [PATCH] Add Observer header image

git-svn-id: http://www.observium.org/svn/observer/trunk@8 61d68cd4-352d-0410-923a-c4978735b2b8
---
 html/css/styles.css | 813 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 813 insertions(+)
 create mode 100644 html/css/styles.css

diff --git a/html/css/styles.css b/html/css/styles.css
new file mode 100644
index 0000000000..223750395d
--- /dev/null
+++ b/html/css/styles.css
@@ -0,0 +1,813 @@
+img	{ border: 0; }
+
+A         { text-decoration: none; }
+A:link    { color: #0000cc; }
+A:visited { color: #0000cc; }
+A:hover   { color: #990099; }
+A:active  { color: #00000; }
+
+A.red:visited, a.red, .red {color: #CC0000;}
+A.grey:visited, A.grey, .gray {color: #36393D;}
+A.black:visited, A.black, .black {color: #000000;}
+A.green:visited, A.green, .green {color: #008C00;}
+A.blue:visited, A.blue, .blue {color: #0000ff;}
+A.orange:visited, a.orange, .orange {color: #FF7400;}
+
+
+.pinkbg { background-color: #ffbbbb; }
+.redbg { background-color: #ff8585; }
+.bluebg { background-color: #aaaaff; }
+.greenbg { background-color: #aaffaa; }
+.greybg { background-color: #dddddd; }
+
+.page-h2 { 
+        font-size: 14px; 
+	font-weight: bold;
+	vertical-align: top;
+}
+
+.header-text {
+        font-family: sans-serif;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: bold;
+        color: #000000;
+}
+
+.interface-header {
+        font-family: sans-serif;
+        font-size: 20px;
+        font-style: normal;
+        font-weight: bold;
+        color: #000000;
+}
+
+.graphhead, .sectionhead {
+        font-size: 15px;
+        font-style: normal;
+        font-weight: bold;
+        color: #555;
+}
+
+.tablehead {
+        font-family: Verdana, arial, sans-serif; 
+        font-weight: bold;
+        font-size: 13px;
+        font-style: normal;
+        font-weight: bold;
+        color: #666;
+}
+
+.box-desc {
+        font-family: "Verdana", Arial, Helvetica, sans-serif;
+        font-size: 12px;
+        font-style: italic;
+}
+
+.interface-desc {
+  	font-family: "Verdana", Arial, Helvetica, sans-serif;
+        font-size: 11px;
+        font-style: normal;
+}
+
+.syslog {
+        font-family: Verdana, Arial, Helvetica, sans-serif;
+        font-size: 12px;
+        font-style: normal;
+        color: #000000;
+}
+
+.page-header, .device-header {
+        font-family: Verdana, Arial, Helvetica, sans-serif;
+        font-size: 24px;
+        font-weight: bold;
+        color: black;
+}
+
+.top-subtitle {
+        font-family: Verdana, Arial, Helvetica, sans-serif;
+        font-size: 22px;
+        font-weight: bold;
+        vertical-align: middle;
+}
+
+.device-header {
+        font-size: 20px;
+}
+
+.device-head {
+        font-family: Verdana, Arial, Helvetica, sans-serif;
+        font-size: 16px;
+        font-weight: bold;
+}
+
+.list-device, .list-device-ignored, .list-device-down, .list-device-ignored-up {
+        font-weight: bold;
+}
+
+.device-head, .list-device {
+	color: #000cc;
+}
+
+.list-device-down, a.list-device-down, a.list-device-down:visited {
+ color: #cc0000;
+}
+
+a.list-device-ignored-up {
+	color: #009900;
+}
+
+.footer-text {
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: bold;
+        color: #FFFFFF;
+}
+
+.header-text-3 {
+        font-family: Verdana, Arial, Helvetica, sans-serif;
+        font-size: 13px;
+        font-style: normal;
+        font-weight: bold;
+        color: #ffffff;
+}
+
+.body-1 {
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+        font-size: 13px;
+        font-style: normal;
+        font-weight: normal;
+        color: #000000;
+}
+
+.body-date-1 {
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+        font-size: 10px;
+        font-style: normal;
+        font-weight: normal;
+        color: #000000;
+}
+
+.copy {
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+        font-size: 10px;
+        font-style: italic;
+        font-weight: normal;
+        color: #000000;
+}
+
+.body-2 {
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: normal;
+        color: #000000;
+}
+
+.body-field-1 {
+  font-family: verdana, font-family: Verdana, Arial, Helvetica, sans-serif;
+        font-size: 13px;
+        font-style: normal;
+        font-weight: bold;
+        color: #000000;
+}
+
+.body-head-1 {
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: bold;
+        color: #000000;
+}
+
+.body-head {
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+        font-size: 32px;
+        font-style: normal;
+        font-weight: bold;
+        color: #000000;
+}
+
+.body-head-2, .table-head-2 {
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: bold;
+        color: #000000;
+}
+
+.table-head-2 {
+        background-color: #cccccc;
+}
+
+
+.text-more {
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+        font-size: 10px;
+        font-style: normal;
+        font-weight: bold;
+        color: #cc0000;
+}
+
+.body-blue {
+        color: #0000CC;
+}
+
+.top-menu:link {
+ color: #dddddd;
+ text-decoration: none;
+}
+.top-menu:visited {
+  color: #dddddd;
+        text-decoration: none;
+}
+.top-menu:hover {
+  color: #CC0000;
+        text-decoration: none;
+}
+.top-menu:active {
+  color: #000000;
+        text-decoration: none;
+}
+
+.menu-box-dash-off {
+        border: 1px dashed #000000;
+}
+
+.copyright {
+	bottom: 0px;
+	margin: 10px auto;
+	position: relative;
+	background-color: #eeeeee;
+	text-align: center;
+        font-family: Verdana, Arial, Helvetica, sans-serif;
+        font-size: 10px;
+        font-style: italic;
+        font-weight: normal;
+        color: #000000;
+        width: 360px;
+	padding: 10px;
+}
+
+body {
+    margin: 0px; padding: 0px 0px 0px 0px; 
+    background-color: #fff; color: #666;
+    font: 10pt Verdana;
+    line-height: 20px;
+}
+
+<table { border-collapse: collapse; margin: 0px; }
+<table tr td { border: 0px solid #ddd; vertical-align: top; }
+form { margin: 0px; padding: 0px; }
+hr { border: 0px; height: 1px; background-color: #ccc; color: #ccc; }
+p { margin: 0px; padding: 0px; }
+
+ul { margin: 0px 24px; padding: 0px; list-style: disc outside; }
+ul ul { margin-top: 0px; padding-top: 0px; list-style: circle outside; }
+ul ul ul { margin-top: 0px; padding-top: 0px; list-style: square outside; }
+
+a { text-decoration:none; color: #00f; }
+a:visited { text-decoration:none; color: #00f; }
+a:hover { text-decoration:underline; color: #00f; }
+a:active { color: #00f; }
+
+.vspace { margin-top: 4px; margin-bottom: 4px; }
+p.vspace { padding-top: 3px; padding-bottom: 3px; }
+.content-mat { padding: 0px; margin: auto; background: none; }
+
+.clearer { clear: both; display: block; padding: 0px; height: 0px; line-height: 1px; font-size: 0px; }
+
+.borderless-table tr td { border: none }
+
+#header { width: 100%; margin: 0px 0px 0px 0px; background-color: #fff; }
+#header #page-title { color: #555; font: 18pt Arial; font-weight: bold; }
+#header #page-subtitle { color: #555; font: 12pt Arial; font-weight: bold; }
+#header a { color: #eeeeee; }
+
+#main h1 { font-size: 12pt; margin: 0px; padding: 0px; }
+#main h2 { font-size: 11pt; margin: 0px; padding: 0px; }
+#main h3 { font-size: 10pt; margin: 0px; padding: 0px; }
+#main h4 { font-size:  9pt; margin: 0px; padding: 0px; }
+
+#content { margin: 0px; text-align: left; padding: 0px; }
+
+#footer {
+    width: 100%; height: 40px;
+    border: 1px none #ccc; 
+    margin: 0px  0px 0px 0px; padding: 0px 0px 8px 0px;
+}
+
+#copyright { margin: 0px 12px 0px 11px; padding: 2px 0px; border-top: 1px solid #ddd; font-size: 8pt; }
+
+#topnav {
+    margin: 0px 0px 0px 0px;
+    padding: 0px 0px 0px 0px;
+    text-align: right;
+    font-size: 11px; font-weight: bold;
+}
+
+#topnav ul { margin: 5px 0px 0px 0px; padding: 0px; }
+#topnav ul li { list-style: none; display: text-indent: 0px; display: inline; padding-right: 10px;}
+#topnav a { color: #000; text-decoration: none;}
+#topnav a:hover { color: #a00;}
+
+#menubar {
+    margin: 0px 0px 0px 0px;
+    padding: 0px 0px 0px 0px;
+    border-bottom: 1px solid #a8a8a8;
+    border-top: 1px solid #a8a8a8;
+    background-color: #e8e8e8;
+    text-align: left;
+    font-size: 10px; font-weight: bold;
+}
+
+#text { width: 1100px; }
+
+#menubar ul { margin: 0px 10px; padding: 0px; }
+#menubar ul li { list-style: none; display: inline; text-indent: 0px; text-align: left; padding-right: 15px; }
+#menubar a { color: #666; }
+
+#popupmenu a { color: #aaa; }
+#popupmenu a:hover { color: #fff; }
+#popupmenu li:hover { background: #444; color: #eec; }
+#popupmenu li:hover ul { display: block; }
+#popupmenu ul { padding: 0px; margin: 0px; list-style: none; }
+#popupmenu ul li { padding: 0px 8px; float: left; position: relative; }
+
+#popupmenu li ul {
+    display: none;
+    position: absolute;
+    top: 10px;
+    left: 5px;
+    width: 150px;
+    margin-top: 10px;
+    border-top: 1px solid #888;
+    border-bottom: 1px solid #888;
+    padding-top: 3px;
+    padding-bottom: 4px;
+    background: #444;
+}
+
+#popupmenu li ul li {
+    display: block;
+    clear: both;
+    color: #aaa;
+}
+
+#popupmenu li ul li:hover { color: #aaa; }
+
+#toext { margin-top: 12px; margin-bottom: 12px; font-family: monospace; }
+
+.list-large {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.list-bold {
+  font-weight: bold;
+}
+
+
+.graphcell, .ifcell, .devicecell, .datacell { margin: 0px 0px 7px 0px; left; padding: 7px; border: 0px; background: #e8e8e8; float: left; }
+.ifcell { float: left; clear:right; background:none; }
+
+.datacell { clear: both; }
+.devicecell { margin: 2px auto; };
+
+
+.sidepane { clear: left; background:none;}
+.mainpane { float: none; clear: right; background:none; }
+
+.nofloat { clear: left; }
+
+.interface, .interface-admindown, a.interface-admindown, a.interface-admindown:visited, .interface-updown, a.interface-updown, a.interface-updown:visited, .interface-upup, a.interface-upup {
+	color: #555;
+}
+
+.interface-updown, a.interface-updown, a.interface-updown:visited {
+        color: #cc0000;
+}
+
+.interface-upup, a.interface-upup {        
+	color: #0000cc;
+}
+
+a.interface-upup:hover, a.interface-updown:hover, a.interface-admindown:hover {
+	color: #990099;
+}
+
+.interface-admindown, a.list-device-ignored, a.interface-admindown, a.interface-admindown:visited {
+        color: #999999;
+}
+
+
+### Stuff for DNS
+
+td {
+  text-decoration: none;
+  font-family: Verdana,Helvetica,sans-serif;
+  font-size: 12px;
+  font-weight: normal;
+}
+
+.left {
+  text-align: left;
+  margin: 1px;
+}
+
+.error {
+  text-decoration: none;
+  font-family: Verdana,Helvetica,sans-serif;
+  font-size: 12px;
+  color: red;
+  font-weight: normal;
+}
+
+select {
+    color: black;
+    text-decoration: none;
+    font-family: Verdana,Helvetica,sans-serif;
+    font-size: 10px;
+    font-weight: normal;
+}
+input {
+    color: black;
+    text-decoration: none;
+    font-family: Verdana,Helvetica,sans-serif;
+    font-size: 10px;
+    font-weight: bold;
+}
+
+## For Mail Admin
+
+.button {
+    border: 1px solid #aaaaaa;
+    color: #777777;
+    background: #dddddd;
+    padding: 3px 3px 3px 3px;
+    font-size: 11px;
+}
+
+.flat {
+        border: 1px solid #888888;
+}
+
+.error_msg {
+        color: #d01313;
+}
+
+.standout {
+    color: maroon;
+    padding: 3px 3px 3px 3px;
+    text-align: center;
+}
+
+.button:hover {
+    background: #A10925;
+    color: #FFFFFF;
+}
+
+#menu {
+    text-align: center;
+    width: 100%;
+    margin: 5px auto;
+    padding-top: 10px;
+}
+
+#menu ul li {
+    display: inline;
+    background: #efefef;
+    padding: 10px 5px 5px 5px;
+    margin-right: 3px;
+    border-top: 4px solid #aaaaaa;
+}
+
+#menu ul li:hover {
+    background:  #A10925; 
+    color: white;
+}
+
+#menu ul li a {
+    color: #888888;
+}
+
+#menu ul li a:hover {
+    color: #FFFFFF;
+}
+
+
+#main_menu, #edit_form {
+     width: 850px;
+     margin: 0px auto;
+
+}
+
+#main_menu table {
+    margin: 0 auto;
+    text-align: left;
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+
+#main_menu table td {
+    padding-left: 30px;
+    padding-bottom: 5px;
+}
+
+#main_menu a {
+    color: #888888;
+    padding-left: 8px;
+}
+
+#main_menu a:hover {
+    color: #CD6A6A;
+    text-decoration: none;
+    padding-left: 4px;
+    border-bottom: 1px solid #40B33C;
+    border-left: 4px solid #40B33C;
+}
+
+#edit_form table {
+    margin: 0 auto;
+    padding-top: 10px;
+    text-align: left;
+    width: 100%;
+    border: 1px solid #efefef;
+}
+
+#edit_form h3  {
+    text-align: center;
+    font-size: 12px;
+    margin: 0;
+    background: #cdcdcd;
+    border: 1px solid #bbb;
+    line-height: 25px;
+    color: #555555;
+}
+
+.hlp_center {
+    text-align: center;
+}
+
+.help_text{
+    background: #efefef;
+    border-left: 1px solid #bbbbbb;
+    border-right: 1px solid #bbbbbb;
+    text-align: center;
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+#overview, #admin_domains, #admin_virtual {
+    margin: auto;
+    background: #cdcdcd;
+    border: 0px solid #bbb;
+    padding: 0px 8px;
+
+}
+
+#overview h4, #overview P, #overview FORM, #admin_virtual h4, #admin_virtual P, #admin_virtual FORM {
+    display: inline;
+    padding-right: 20px;
+    line-height: 30px;
+}
+
+#nav_bar {
+    text-align: right;
+    width: 750px;
+    margin: 0 auto;
+}
+
+#alias_table, #mailbox_table, #overview_table, #log_table, #admin_table {
+    width: 100%;
+    margin: 0px auto;
+    border: 1px solid #efefef;
+}
+
+#alias_table .header, #mailbox_table .header, #overview_table .header, #log_table .header, #admin_table .header {
+    line-height: 20px;
+    background: #efefef;
+    color: black;
+}
+
+#alias_table .hilightoff, #mailbox_table .hilightoff, #overview_table .hilightoff, #log_table .hilightoff, #admin_table .hilighoff {
+    background: white;
+}
+
+#alias_table .hilighton, #mailbox_table .hilighton, #overview_table .hilighton, #log_table .hilighton, #admin_table .hilighton {
+    background: #ffdddd;
+}
+
+#alias_table h3, #mailbox_table h3, #overview_table h3, #log_table h3, #admin_table h3 {
+    background: silver;
+    text-align: left;
+    font-size: 12px;
+    font-weight: bold;
+    padding-left: 20px;
+    line-height: 25px;
+    margin: 0;
+}
+
+#top{
+                height:17px;
+                padding:2px 21px 0px 21px;
+                background:#163275;
+                font:normal 11px arial;
+		color: white;
+        }
+#top A {
+	color: #aaaaaa;
+}
+
+#center{
+                width:1200px;
+                margin:0px auto 0px auto;
+
+}
+
+#logo{
+                padding-left:21px;
+}
+
+.errorbox {
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+	border: 2px dashed #CC0000;
+	background-color: #FFCCCC;
+	padding: 5px;
+	font-size: small;
+	margin: 5px;
+}
+
+.messagebox {
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+	border: thin dashed #009900;
+	background-color: #ccffaa;
+	padding: 5px;
+	font-size: small;
+	margin: 5px;
+}
+
+
+/* Fancy menu */
+
+
+.menu2 { float:left; width:100%; font-family: Verdana, arial, sans-serif; font-weight: bold ; font-size: 11px; border:1px solid #aaaaaa;
+background:#ddd url(/images/menu2.gif) repeat-x;
+z-index: 9;
+}
+.menu2 ul {
+padding:0;margin:0;list-style-type:none;
+}
+.menu2 ul li {
+float:left; position:relative;
+}
+.menu2 ul li.group {display:block; text-indent:10px; background:#666; color:#cc0000; width:152px; padding:4px 0;}
+
+.menu2 ul li a, .menu2 ul li a:visited {
+float:left; display:block; text-decoration:none; color:#666; padding:0px 16px; line-height:25px; height:25px;
+}
+
+.menu2 ul li:hover {width:auto;}
+
+.menu2 ul li a:hover {background:#aaa url(/images/sub2a.gif); color:#356AA0;}
+
+.menu2 ul li:hover a {background:#aaa url(/images/sub2a.gif); color:#356AA0;}
+
+.menu2 ul li ul {
+display: none;
+}
+.menu2 table {
+margin:0; border-collapse:collapse; font-size:11px; position:absolute; top:0; left:0; font-size: 10px;
+}
+
+/* specific to non IE browsers */
+.menu2 ul li:hover ul {
+display:block; position:absolute;top:24px; background:#aaa; margin-top:1px; left:0; width:140px;
+}
+
+.menu2 ul li:hover ul.scroller {
+height:138px; width:172px; overflow:auto;}
+
+.menu2 ul li:hover ul.endstop {
+left:-90px;
+}
+.menu2 ul li:hover ul li ul {
+display: none;
+}
+.menu2 ul li:hover ul li a {
+display:block; background:#aaa; color:#fff;height:auto;line-height:15px;padding:4px 10px; width:120px;
+}
+.menu2 ul li:hover ul li a.drop {
+background:#888;
+}
+.menu2 ul li:hover ul li a:hover {
+color:#ff0; background: #888;
+}
+.menu2 ul li:hover ul li a:hover.drop {
+background: #888; color:#ff0;
+}
+.menu2 ul li:hover ul li:hover ul {
+display:block; position:absolute; left:153px; top:-70px; color:#000; left:152px; height:138px; width:172px; overflow:auto; background:#888;
+}
+.menu2 ul li:hover ul li:hover ul li a {background:#888;}
+.menu2 ul li:hover ul li:hover ul li.group {width:152px; padding:5px 0;}
+
+
+.menu2 ul li:hover ul li:hover ul.left {
+left:-172px;
+}
+.menu2 ul li:hover ul li:hover ul li a:hover {background:#666; color:#0ff;}
+
+/* specific to IE5.5 and IE6 browsers */
+.menu2 ul li a:hover ul {
+display:block;position:absolute;top:30px; t\op:29px; background:#aaa;left:0; marg\in-top:1px;
+}
+.menu2 ul li a:hover ul.scroller {
+height:138px; overflow:auto;}
+
+.menu2 ul li a:hover ul.endstop {
+left: -90px;
+}
+.menu2 ul li a:hover ul li a {
+display:block; color:#fff; height:1px; line-height:15px; padding:4px 16px; width:152px; w\idth:120px;
+}
+.menu2 ul li a:hover ul li a.drop {
+background:#888; padding-bottom:5px;
+}
+.menu2 ul li a:hover ul li a ul {
+visibility:hidden; position:absolute; height:0; width:0;
+}
+.menu2 ul li a:hover ul li a:hover {
+color:#ff0; background: #888;
+}
+.menu2 ul li a:hover ul li a:hover.drop {
+ background: #888; color:#ff0;
+}
+.menu2 ul li a:hover ul li a:hover ul {
+visibility:visible; position:absolute; top:-69px; t\op:-70px; color:#000; left:152px; height:138px; width:172px; overflow:auto; background:#888;
+}
+.menu2 ul li a:hover ul li a:hover ul.left { left:-170px; }
+
+.menu2 ul li a:hover ul li a:hover ul li a:hover {background:#666; color:#0ff;}
+
+.left {clear:both;}
+
+
+#### For fancy tabs
+
+.shadetabs {
+padding: 3px 3px;
+margin-left: 0;
+margin-top: 1px;
+margin-bottom: 0px;
+font-family: Verdana, arial, sans-serif;
+font-weight: bold;
+font-size: 12px;
+list-style-type: none;
+text-align: left; /*set to left, center, or right to align the menu as desired*/
+}
+
+.shadetabs li{
+display: inline;
+margin: 0;
+}
+
+
+.shadetabs li a{
+text-decoration: none;
+padding: 2px 7px;
+margin-right: 3px;
+border: 1px solid #aaa;
+color: #2d2b2b;
+background: white url(/images/menu2.gif) top left repeat-x;
+}
+
+.shadetabs li a:visited{
+color: #2d2b2b;
+}
+
+.shadetabs li a:hover{
+text-decoration: none;
+color: #cc0000;
+}
+
+.shadetabs li.selected{
+}
+
+.shadetabs li.selected a{ /*selected main tab style */
+  background-image: url(/images/shadeactive.gif);
+  border-bottom-color: white;
+}
+
+.shadetabs li.selected a:hover{ /*selected main tab style */
+  text-decoration: none;
+}
+
+.contentstyle{
+  border: 1px solid #aaaaaa;
+  width: 1175px;
+  margin-bottom: 1em;
+  padding: 10px;
+}
+