]> git.ipfire.org Git - ipfire.org.git/blobdiff - www/static/css/style.css
Website update.
[ipfire.org.git] / www / static / css / style.css
index dfefa2ee0b9da89177685888a8ef0b73c9b70daf..28e8a0129d06f3a5f4c63edc61c888c71e3f022c 100644 (file)
-
-/* This controls the width of the fluid width layouts */
-
-div.fluid {
-       width: 90% !important;
-}
-
-/* This controls the width of the fixed width layouts */
-div.fixed {
-       width: 980px !important;
-       margin: 0;
-}
-
-/* Basic Stuff */
-
-* {
-       margin: 0em;
-       padding: 0em;
-}
-html { overflow-y: scroll }
 body {
-  font-family: "Verdana", "Deja-Vu Sans", "Bitstream Vera Sans", sans-serif;
-  font-size: 0.9em;
-  background: #880400;
-  color: #585858;
-}
-
-h1,h2,h3,h4,h5,h6 {
-       font-weight: normal;
-       letter-spacing: -1px;
-       text-transform: lowercase;
-}
-
-h3,h4,h5,h6 {
-       color: #66000F;
-}
-
-h1 span {
-       font-weight: bold;
-}
-
-h3 span {
-       font-weight: bold;
-}
-
-h4 span {
-       font-weight: bold;
-}
-
-br.clear {
-       clear: both;
-}
-
-div.line {
-       border-top: 1px dotted #e1e1e1;
-       height: 0;
-       width: 100%;
-
-       margin-top: 1em;
-       margin-bottom: 0.8em;
-}
-
-img {
-       padding: 3px;
-       border: 0;
-}
-
-img.floatTL {
-       float: left;
-       margin-right: 1.5em;
-       margin-bottom: 1.5em;
-       margin-top: 0.5em;
-}
-
-img.floatTR {
-       float: right;
-       margin-left: 1.5em;
-       margin-bottom: 1.5em;
-       margin-top: 0.5em;
-}
-
-img.symbol {
-       float: left;
-       margin-bottom: 0em;
-       border: 0;
-}
-
-a {
-       text-decoration: underline;
-       color: #D90000;
-       border-style: none;
-}
-
-a:hover {
-       text-decoration: none;
-}
-
-ul.links {
-       /* list-style: none; */
-       padding-left: 1em;
-}
-
-ul.links li {
-       line-height: 1.5em;
-       font-size: 0.9em;
-       /* display: inline; */
-}
-
-ul.links li.first {
-}
-
-p {
-       line-height: 1.5em;
-}
-
-p.left {
-       float: left;
-}
-
-p.right {
-       float: right;
-}
-
-div.screenshots {
-       text-align: center;
-       margin-bottom: 1em;
-}
-
-div.screenshots img {
-       border: 1px dotted #e1e1e1;
-       padding: 0.5em;
-       margin-left: 1em;
-       margin-right: 1em;
-       vertical-align: text-top;
-}
-
-/* Header */
-
-#header {
-       width:100%;
-       height:102px;
-       background: url('../images/bg-menu99.png') repeat-x;
-}
-
-#header_inner {
-       position: relative;
-       width: 980px;
-       height:102px;
-       margin: 0 auto;
-}
-
-img.symbol {
-       margin: 0;
-       padding: 0;
-}
-
-/* Logo */
-
-#logo {
-       position: absolute;
-       top: 0;
-       float: left;
-}
-
-#header h1 {
-       float: left;
-       margin-left: 105px;
-       color: #eee;
-       font-size: 150%;
-}
-
-#header h2 {
-       float: left;
-       margin-left: 105px;
-       color: #E5CCD0;
-       font-size: 1.0em;
-       vertical-align: bottom;
-}
-
-/* Header Line's */
-#header_menu {
-       height: 37px;
-}
-
-#header_hostname {
-       height: 32px;
-}
-
-#header_slogan {
-       height: 31px;
-}
-
-/* Menu */
-
-#menu {
-       position: absolute;
-       left: 105px;
-       top: 0em;
-}
-
-#menu ul {
-       list-style: none;
-}
-
-#menu li {
-       float: left;
-}
-
-#menu li {
-       vertical-align: middle;
-       background: #333 url('../images/btn-break.png') center;
-}
-
-#menu li a {
-       margin-left: 1px; /*0.5em;*/
-       margin-right: 1px;
-       display: block;
-       padding: 10px 5px 0 8px;
-       height: 26px;
-       background: #333 url('../images/btn-empty.png') repeat-x center;
-       color: #ddd;
-       font-weight: bolder;
-       vertical-align: middle;
-       font-size: 0.8em;
-       text-decoration: none;
-}
-
-#menu li a.active {
-       background: #CA2F2F url('../images/btn-red2.png') repeat-x center;
-       color: #ddd;
-}
-
-#menu li a:hover {
-       background: #333 url('../images/btn-red2.png') repeat-x center;
-       color: #fff;
-}
-
-/* Main */
-
-#main_inner p {
-       text-align: justify;
-       margin-bottom: 0.5em;
-}
-
-#main_inner ul.list {
-       padding-left: 1.5em;
-       line-height: 1.5em;
-       text-align: justify;
-}
-
-#main_inner {
-       position: relative;
-       width: 950px;
-       margin: 0 auto;
-}
-
-#main_inner h3,h4 {
-       border-bottom: dotted 1px #E1E1E1;
-       position: relative;
-}
-
-#main_inner h3 {
-       font-size: 1.5em;
-       padding-bottom: 0.1em;
-       margin-bottom: 0.5em;
-}
-
-#main_inner h4 {
-       font-size: 1.2em;
-       padding-bottom: 0.175em;
-       margin-bottom: 0.25em;
-       margin-top: 0.95em;
-}
-
-#main_frame {
-       border: 0px;
-       border-collapse: collapse;
-       border-spacing: 0px;
-       margin: 0em;
-       padding: 0em;
-       width: 980px;
-       max-width: 980px;
-}
-
-#sh-tl {
-       background: url("../images/sh-tl.png") no-repeat right bottom;
-}
-
-#sh-top {
-       background: url("../images/sh-top.png") repeat-x bottom;
-}
-
-#sh-tr {
-       background: url("../images/sh-tr.png") no-repeat left bottom;
-}
-
-#sh-lft {
-       background: url("../images/sh-lft.png") repeat-y right;
-}
-
-#sh-rgt {
-       background: url("../images/sh-rgt.png") repeat-y left;
-}
-
-#sh-bl {
-       background: url("../images/sh-bl.png") no-repeat right top;
-}
-
-#sh-btn {
-       background: url("../images/sh-btn.png") repeat-x top;
-}
-
-#sh-br {
-       background: url("../images/sh-br.png") no-repeat left top;
-}
-
-#no-sh {
-       background-color: #fbfbfb;
-       width: 980px;
-}
-
-#sh-tl, #sh-top, #sh-tr, #sh-lft, #sh-rgt, #sh-bl, #sh-btn, #sh-br {
-  width: 16px;
-  height: 16px;
-  padding: 0px;
-  border-width: 0px;
-  border-style: none;
-}
-
-.banner {
-  border: 0;
-}
-
-.post {
-       margin-bottom: 40px;
-}
-
-.post .title {
-       text-transform: lowercase;
-       font-size: 1.5em;
-       font-weight: normal;
-       color: #606060;
-}
-
-.post .title a {
-       border: none;
-       color: #606060;
-}
-
-.post .meta {
-       padding-left: 2px;
-       padding-bottom: 2px;
-       text-align: left;
-       text-transform: lowercase;
-}
-
-.post .meta a {
-}
-
-.post .entry {
-       padding: 1.2em 1.2em;
-       border: 1px dotted #E4E4E4;
-       text-align: justify;
-}
-
-.post .entry ul {
-       padding-left: 1em;
-       padding-bottom: 0.5em;
-}
-
-.links {
-       padding-top: 20px;
-       text-transform: lowercase;
-}
-
-/* News */
-
-ul.news {
-       list-style: none;
-}
-
-/* Footer */
-
-#footer {
-       clear: both;
-       height: 26px;
-       color: #ddd;
-       text-align: center;
-       background: url("../images/ft.png") left top;
-       margin-top: 0em;
-       margin-bottom: 0em;
-       padding-top: 0.5em;
-       padding-bottom: 0.5em;
-       text-transform: lowercase;
-}
-
-.thumbnail {
-       position: relative;
-       z-index: 0;
-}
-
-.thumbnail:hover {
-       background-color: transparent;
-       z-index: 50;
-}
-
-.thumbnail span {
-       position: absolute;
-       background-color: #ffffe0;
-       padding: 5px;
-       left: -1000px;
-       border: 1px dashed gray;
-       visibility: hidden;
-       color: black;
-       text-decoration: none;
-}
-
-.thumbnail span img {
-       border-width: 0;
-       padding: 2px;
-}
-
-.thumbnail:hover span {
-       visibility: visible;
-       top: 0;
-       left: 60px;
-}
-
-a.feed {
-  margin-left: 3px;
-  padding: 0 0 0 19px;
-  background: url("../images/feed.png") no-repeat 0 50%;
-}
-
-/* LAYOUT - 2 COLUMNS */
-
-       /* Primary content */
-
-#columns2_primary {    
-       position: relative;
-       /* margin-right: 17em; */
-}
-
-#columns2_columnA {
        position: relative;
-       float: left;
-       padding: 1em 0.5em 0.5em 1em;
-       width: 710px;
-}
-
-#columns2_secondary {  
-       float: right;
-}
-       
-#columns2_columnB
-{
-       width: 12.0em;
-       float: left;
-       padding: 0em 1em 0.5em 1em;
-       border-left: dotted 1px #E1E1E1;
-}
-
-#columns2_columnB ul {
-       margin-left: 1em;
-}
-
-#columns2_columnB ul li {
-       margin-bottom: 0.2em;
-}
-
-#columns1_primary {
-       position: relative;
-}
-       
-#columns1_columnA {
-       position: relative;
-       padding: 1em 1em 0.5em 1em;
-       border: 1px solid white;
-}
-
-/* Tabs */
-.ui-tabs {
-       padding: .2em;
-       zoom: 1;
-}
-.ui-tabs .ui-tabs-nav {
-       list-style: none;
-       position: relative;
-       padding: .2em .2em 0;
-}
-.ui-tabs .ui-tabs-nav li {
-       position: relative;
-       float: left;
-       border-bottom-width: 0 !important;
-       margin: 0 .2em -1px 0;
-       padding: 0;
-}
-.ui-tabs .ui-tabs-nav li a {
-       float: left;
-       text-decoration: none;
-       padding: .5em .3em;
-}
-.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
-       padding-bottom: 1px;
-       border-bottom-width: 0;
-}
-.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a {
-       cursor: text;
-}
-.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
-       cursor: pointer;
-} /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
-.ui-tabs .ui-tabs-panel {
-       padding: 1em 0.6em;
-       display: block;
-       border-width: 0;
-       background: none;
-}
-.ui-tabs .ui-tabs-hide {
-       display: none !important;
-}
-/* Component containers */
-.ui-widget-content {
-    border: 1px solid #999/*{borderColorContent}*/;
-       background: #F5F5F5/*{bgColorContent}*/ 50%/*{bgContentXPos}*/ url(../images/ui-bg_flat_75_f5f5f5_40x100.png)/*{bgImgUrlDefault}*/50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/;
-       color: #222222/*{fcContent}*/;
-}
-.ui-widget-content a {
-       color: #222222/*{fcContent}*/;
-}
-.ui-widget-header {
-       border: 1px solid #aaaaaa/*{borderColorHeader}*/;
-       background: #cccccc/*{bgColorHeader}*/ url(/../images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/;
-       color: #222222/*{fcHeader}*/;
-       font-weight: bold;
-}
-.ui-widget-header a {
-       color: #222222/*{fcHeader}*/;
-}
-/* Interaction states */
-.ui-state-default, .ui-widget-content .ui-state-default {
-       border: 1px solid #d3d3d3/*{borderColorDefault}*/;
-       background: #e6e6e6/*{bgColorDefault}*/ url(../images/ui-bg_glass_75_e6e6e6_1x400.png)/*{bgImgUrlDefault}*/ 50%/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/;
-       font-weight: normal/*{fwDefault}*/;
-       color: #555555/*{fcDefault}*/;
-       outline: none;
-}
-.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
-       color: #555555/*{fcDefault}*/;
-       text-decoration: none;
-       outline: none;
-}
-.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus {
-       border: 1px solid #999999/*{borderColorHover}*/;
-       background: #dadada/*{bgColorHover}*/ url(../images/ui-bg_glass_75_dadada_1x400.png)/*{bgImgUrlHover}*/ 50%/*{bgHoverXPos}*/ 50%/*{bgHoverYPos}*/ repeat-x/*{bgHoverRepeat}*/;
-       font-weight: normal/*{fwDefault}*/;
-       color: #212121/*{fcHover}*/;
-       outline: none;
-}
-.ui-state-hover a, .ui-state-hover a:hover {
-       color: #212121/*{fcHover}*/;
-       text-decoration: none;
-       outline: none;
-}
-.ui-state-active, .ui-widget-content .ui-state-active {
-       border: 1px solid #aaaaaa/*{borderColorActive}*/;
-       background: #F5F5F5/*{bgColorActive}*/ 50%/*{bgActiveXPos}*/ 50%/*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/;
-       font-weight: normal/*{fwDefault}*/;
-       color: #212121/*{fcActive}*/;
-       outline: none;
-}
-.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
-       color: #212121/*{fcActive}*/;
-       outline: none;
-       text-decoration: none;
-}
-/* Layout helpers */
-.ui-helper-clearfix:after {
-       content: ".";
-       display: block;
-       height: 0;
-       clear: both;
-       visibility: hidden;
-}
-.ui-helper-clearfix {
-       display: inline-block;
-}
-/* required comment for clearfix to work in Opera \*/
-* html .ui-helper-clearfix {
-       height:1%;
-}
-.ui-helper-clearfix {
-       display:block;
-}
-/* end clearfix */
-.ui-helper-zfix {
-       width: 100%;
-       height: 100%;
-       top: 0;
-       left: 0;
-       position: absolute;
-       opacity: 0;
-       filter:Alpha(Opacity=0);
-}
-
-/* alternate */
-.odd {
-       background-color: #F9F9F9;
-}
-.even { 
-       background-color: #F1F1F1;
-}
-
-#screenshots {
-       background-color: #444;
-       padding: 10px;
-       width: 520px;
-}
-#screenshots ul { list-style: none; }
-#screenshots ul li { display: inline; }
-#screenshots ul img {
-       border: 5px solid #3e3e3e;
-       border-width: 5px 5px 20px;
-}
-#screenshots ul a:hover img {
-       border: 5px solid #fff;
-       border-width: 5px 5px 20px;
-       color: #fff;
-}
-#screenshots ul a:hover { color: #fff; }
-
-#jquery-overlay {
-       position: absolute;
-       top: 0;
-       left: 0;
-       z-index: 90;
-       width: 100%;
-       height: 500px;
-}
-#jquery-lightbox {
-       position: absolute;
-       top: 0;
-       left: 0;
-       width: 100%;
-       z-index: 100;
-       text-align: center;
-       line-height: 0;
-}
-#jquery-lightbox a img { border: none; }
-#lightbox-container-image-box {
-       position: relative;
-       background-color: #fff;
-       width: 250px;
-       height: 250px;
-       margin: 0 auto;
-}
-#lightbox-container-image { padding: 10px; }
-#lightbox-loading {
-       position: absolute;
-       top: 40%;
-       left: 0%;
-       height: 25%;
-       width: 100%;
-       text-align: center;
-       line-height: 0;
-}
-#lightbox-nav {
-       position: absolute;
-       top: 0;
-       left: 0;
-       height: 100%;
-       width: 100%;
-       z-index: 10;
-}
-#lightbox-container-image-box > #lightbox-nav { left: 0; }
-#lightbox-nav a { outline: none;}
-#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
-       width: 49%;
-       height: 100%;
-       zoom: 1;
-       display: block;
-}
-#lightbox-nav-btnPrev { 
-       left: 0; 
-       float: left;
-}
-#lightbox-nav-btnNext { 
-       right: 0; 
-       float: right;
-}
-#lightbox-container-image-data-box {
-       font: 10px Verdana, Helvetica, sans-serif;
-       background-color: #fff;
-       margin: 0 auto;
-       line-height: 1.4em;
-       overflow: auto;
-       width: 100%;
-       padding: 0 10px 0;
-}
-#lightbox-container-image-data {
-       padding: 0 10px; 
-       color: #666; 
-}
-#lightbox-container-image-data #lightbox-image-details { 
-       width: 70%; 
-       float: left; 
-       text-align: left; 
-}      
-#lightbox-image-details-caption { font-weight: bold; }
-#lightbox-image-details-currentNumber {
-       display: block; 
-       clear: left; 
-       padding-bottom: 1.0em;  
-}                      
-#lightbox-secNav-btnClose {
-       width: 66px; 
-       float: right;
-       padding-bottom: 0.7em;  
-}
-
-/* IPFire Download Button */
-.button {
-    background: url(../images/buttons/download_core_96x320.png);
-    background-repeat: no-repeat;
-    background-position: right;
-    width: 700px;
-    height: 96px;
-}
-.button a, .button a:link, .button  a:visited {
-       color:#333;
-       text-decoration:none;
-}
-.button a:hover {
-       text-decoration: underline;
-}
-.button_text {
-       color:#333; 
-       font-size: 20px !important;
-       text-shadow: #666 1px 2px 2px;
-    padding: 51px 0px 0px 430px;
-}
-
-/* CeBIT Button */
-.cebit_button {
-    background: url(../images/buttons/cebit_96x320.png);
-    background-repeat: no-repeat;
-    background-position: right;
-    width: 700px;
-    height: 96px;
-}
-.cebit_button a, .cebit_button a:link, .cebit_button  a:visited {
-       color:#333;
-       text-decoration:none;
-}
-.cebit_button a:hover {
-       text-decoration: underline;
-}
-.cebit_button_text {
-       color:#333; 
-       font-size: 20px !important;
-       text-shadow: #666 1px 2px 2px;
-    padding: 51px 0px 0px 465px;
-}
-
-/* Public Relations linklists */
-.pr_li {
-    padding: 0px 0px 0px 20px;
-       line-height: 1.2em;  
-}
-
-div.bigdownload {
-       margin-top: 50px;
-       margin-left: 100px;
-       padding-top: 15px;
-       background: url(../images/download_button.png) no-repeat;
-       height: 84px;
-       width: 255px;
-       text-align: center;
-}
-
-div.bigdownload a {
-       color: white;
-       font-size: 1.3em;
-       font-weight: bold;
-       text-decoration: none;
-}
-
-div.bigdownload a:hover {
-       text-decoration: underline;
-}
-
-table.download {
-       width: 660px;
-       margin-left: 75px;
-}
-
-table.download td.icon {
-       width: 50px;
-}
-
-table.download td.link {
-       width: 180px;
-}
-
-table.download-torrents {
-       margin-bottom: 25px;
-       margin-left: 50px;
-       margin-top: 25px;
-       width: 600px;
-}
-
-table.download-torrents tr {
-       height: 24px;
-}
-
-table.download-torrents th {
-       text-align: left;
-}
-
-table.download-torrents th.peers, td.peers {
-       text-align: right;
-}
-
-table.download-torrents th.seeds, td.seeds {
-       text-align: right;
-}
-
-table.download-torrents th.peers,td.peers {
-       padding-left: 5px;
-}
-
-table.tracker-peerlist {
-       width: 85%;
-}
-
-table.tracker-peerlist th {
-       text-align: left;
-}
-
-table.download-torrents td {
-       padding: 1em;
-}
-
-table.tracker-peerlist td.ip {
-       text-align: right;
-       padding-right: 1em;
-}
-
-table.download-mirrors {
-       margin-bottom: 25px;
-       margin-left: 15px;
-       margin-top: 25px;
-       width: 700px;
-}
-
-table.download-mirrors tr {
-       height: 32px;
-}
-
-table.download-mirrors tr.legend {
-       text-align: right;
-}
-
-table.download-mirrors td {
-       padding-left: 10px;
-       padding-right: 10px;
-}
-
-/*
-table.download-mirrors tr.unreachable, td.unreachable {
-       border: 1px solid #f55;
-       background-color: #f99;
-}
-*/
-
-table.download-mirrors tr.ok, td.ok {
-       border: 1px solid #5f5;
-       background-color: #9f9;
-}
-
-table.download-mirrors tr.outdated, td.outdated {
-       border: 1px solid #55f;
-       background-color: #99f;
-}
-
-table.download-mirrors td.latency {
-       width: 70px;
-       text-align: right;
-}
-
-ul.sources li {
-       font-family: courier;
-       list-style-type: none;
-}
-
-table.mirrors {
-       /* border: 1px solid #606060; */
-}
-
-table.mirrors tr {
-       line-height: 2em;
-}
-
-table.mirrors td {
-       padding-left: 0.5em;
-       padding-right: 0.5em;
-}
-
-table.mirrors td.hostname {
-       text-align: right;
-       padding-left: 2em;
-       width: 10em;
-}
-
-table.mirrors td.down {
-       border: 1px solid #ff8888;
-       background-color: #ff9999;
-}
-
-table.mirrors td.outofsync {
-       border: 1px solid #ffffaa;
-       background-color: #ffff99;
-}
-
-table.mirrors td.up {
-       border: 1px solid #88ff88;
-       background-color: #aaffaa;
-}
-
-table.blocks {
-       width: 100%;
-       border: 1px solid #E4E4E4;
-}
-
-table.blocks td.block {
-       width: 33%;
-       padding: 1.5em;
-       vertical-align: top;
-}
-
-table.blocks td.block p {
-       text-align: justify;
-}
-
-table.blocks td.block span {
-       text-align: center;
-       font-size: 1.2em;
-}
-
-table.blocks td.block1,td.block3 {
+       padding-top: 50px;
+
+       /* SVG as background image (IE9/Chrome/Safari/Opera) */ 
+       background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2ODQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTAwJSIgeTE9IjEwMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMDAwMDAwIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjODgwNDAwIiBvZmZzZXQ9IjU3JSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c2ODQpIiAvPgo8L3N2Zz4=);
+
+       background-image: linear-gradient(
+               bottom,
+               #000000 0%,
+               #880400 57%
+       );
+       background-image: -o-linear-gradient(
+               bottom,
+               #000000 0%,
+               #880400 57%
+       );
+       background-image: -moz-linear-gradient(
+               bottom,
+               #000000 0%,
+               #880400 57%
+       );
+       background-image: -webkit-linear-gradient(
+               bottom,
+               #000000 0%,
+               #880400 57
+       );
+       background-image: -ms-linear-gradient(
+               bottom,
+               #000000 0%,
+               #880400 57%
+       );
+       background-image: -webkit-gradient(
+               linear,
+               left bottom,
+               left top,
+               color-stop(0, #000000),
+               color-stop(0.57, #880400)
+       );
+       background-attachment: fixed;
+}
+
+.container-body {
        background-color: white;
-}
-
-table.blocks td.block2 {
-       background-color: #f5f5f5;
-}
-
-table.fireinfo {
-       width: 45em;
-       margin-left: 1.5em;
-}
-
-table.fireinfo td.key {
-       width: 12.5em;
-}
-
-table.fireinfo td.value {
-       width: 32.5em;
-}
-
-table.cpufeatures tr {
-       line-height: 1.2em;
-}
-
-table.cpufeatures td {
-       padding-left: 0.1em;
-       padding-right: 0.1em;
-}
-
-table.cpufeatures td.enabled {
-       border: 1px solid #88ff88;
-       background-color: #aaffaa;
-}
-
-table.cpufeatures td.disabled {
-       border: 1px solid #ff8888;
-       background-color: #ff9999;
-}
-
-table.stats {
-       width: 45em;
-       margin-left: 1.5em;
-}
-
-table.stats td.key {
-       width: 12.5em;
-}
-
-table.stats td.value {
-       width: 2.5em;
-       text-align: right;
-}
 
-table.stats td.bar {
-       width: 30em;
+       padding-top: 10px;
+       padding-left: 15px;
+       padding-right: 15px;
+       padding-bottom: 10px;
 }
 
-table.stats td.bar p {
-       background-color: #880400;
+table.table-fireinfo td.bar {
+       width: 70%;
 }
 
-table.dial-in {
-       border: 2px solid #e1e1e1;
-       margin-left: 2em;
+table.table-fireinfo td.key {
+       width: 20%;
 }
 
-table.dial-in td {
-       border: 1px solid #e1e1e1;
+table.table-fireinfo td.val {
+       width: 10%;
 }