templates/web/common.css

   1 /* Reset CSS */
   2         html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}body{line-height:1.5;}table{border-collapse:separate;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}table,td,th{vertical-align:middle;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}a img{border:none;}
   3
   4 /* Fonts */
   5
   6         body {
   7                 font-size:                    62.5%;
   8                 font-family:                Verdana, Arial, Helvetica, Sans-Serif;
   9         }
  10
  11 /* Header Defaults */
  12
  13         h1, h2, h3, h4, h5, h6 { font-family:serif; line-height:1.7; font-weight: bold; }
  14         h1 { font-size: 3.0em; text-align: center; }
  15         h2 { font-size: 2.2em; text-align: center; }
  16         h3 { font-size: 1.7em; }
  17         h4 { font-size: 1.5em; }
  18         h5 { font-size: 1.3em; }
  19         h6 { font-size: 1.1em; }
  20
  21 /* Shrink header sizes on thin windows (phones?) */
  22         @media all and ( max-width:640px ){
  23                 h1 { font-size: 2.4em; }
  24                 h2 { font-size: 1.4em; }
  25                 h3 { font-size: 1.25em;  }
  26                 h4 { font-size: 1.2em; }
  27                 h5 { font-size: 1.15em;  }
  28                 h6 { font-size: 1.1em; }
  29         }
  30
  31 /* Anchor Defaults */
  32
  33         a         { color: #037094; }
  34         a:visited { color: #335024; }
  35         a:hover, a:visited:hover { color: #000; }
  36
  37 /* Some more Defaults */
  38
  39         html, body {
  40                 height:                         100%;
  41                 background-color:               #fff;
  42         }
  43         .hidden {
  44                 display:                        none;
  45         }
  46         #inner ul, #inner ol {
  47                 padding:                        0 0 1em 4em;
  48         }
  49         #inner p, #inner pre {
  50                 padding:                        0 0 1em 1em;
  51         }
  52         #inner pre {
  53                 font-family:                    monospace;
  54                 white-space:                    pre-wrap;       /* css-3 */
  55                 white-space:                    -moz-pre-wrap;  /* Mozilla, since 1999 */
  56                 white-space:                    -pre-wrap;      /* Opera 4-6 */
  57                 white-space:                    -o-pre-wrap;    /* Opera 7 */
  58                 word-wrap:                      break-word;     /* Internet Explorer 5.5+ */
  59         }
  60         #inner > * {
  61                 padding-left:                   1em;
  62                 padding-right:                  1em;
  63         }
  64         @media all and ( max-width:640px ){ #inner > * { padding:0; } }
  65
  66 /* Main Header */
  67
  68         #header {
  69                 position:                       absolute;
  70                 top:                            0;
  71                 left:                           0;
  72                 height:                         2em; /* 60px */
  73                 width:                          100%;
  74                 line-height:                    2;   /* 60px */
  75                 background-color:               #000;
  76                 z-index:                        1000;
  77
  78                 background-color:               #1f3c5a; /* For browsers without gradient support */
  79                 filter:                         progid:DXImageTransform.Microsoft.gradient(startColorstr='#032044', endColorstr='#1f3c5a'); /* IE */
  80                 background:                     -webkit-gradient(linear,left top,left bottom,from(#032044),to(#1f3c5a)); /* Webkit */
  81                 background:                     -moz-linear-gradient(top, #032044, #1f3c5a); /* Firefox >= 3.6 */
  82         }
  83         @media all and ( max-width:640px ){
  84                 #header {
  85                         height:                 2.5em; /* 60px */
  86                         line-height:            2.5;   /* 60px */
  87                 }
  88         }
  89
  90         body > #header.fixed {
  91                 position:                       fixed;
  92         }
  93
  94         #header a {
  95                 color:                          #fff;
  96                 white-space:                    nowrap;
  97         }
  98
  99         #header a:hover {
 100                 color:                          #aaf;
 101         }
 102
 103         #header, .navigation {
 104                 opacity:                        0.925;
 105         }
 106
 107 /* Outer Container (Positionining) */
 108
 109         #outer {
 110                 position:                       absolute;
 111                 top:                            0;
 112                 left:                           0;
 113                 width:                          100%;
 114                 min-height:                     100%;
 115                 height:                         auto !important;
 116                 height:                         100%;
 117                 background-color:               #fff;
 118         }
 119
 120 /* Grey Side Bars */
 121
 122         #outer .left_bar, #outer .right_bar {
 123                 display:                        none;
 124         }
 125
 126         #outer > .left_bar.display, #outer > .right_bar.display {
 127                 display:                        block;
 128                 position:                       absolute;
 129                 top:                            0;
 130                 width:                          10%;
 131                 height:                         100%;
 132                 background-color:               #ddd;
 133         }
 134         #outer > .left_bar  { left:     0; }
 135         #outer > .right_bar { right:    0; }
 136
 137         @media all and ( max-width:640px ){
 138                 #outer > .left_bar.display, #outer > .right_bar.display { display: none; }
 139         }
 140
 141 /* Navigation */
 142
 143         .navigation {
 144                 margin-top:                     6em;
 145                 padding:                        0 0 0.5em 0;
 146                 width:                          100%;
 147                 text-align:                     center;
 148                 list-style:                     none;
 149                 background-color:               #1f3c5a;
 150                 z-index:                        1000;
 151         }
 152
 153         .navigation li {
 154                 display:                        inline;
 155                 font-size:                      1.2em;
 156                 padding:                        0 0.3em;
 157         }
 158
 159         .navigation li a         { color: #fff; }
 160         .navigation li a:hover   { color: #aaf; }
 161         .navigation li a:visited { color: #aaf; }
 162         .navigation li a:visited:hover { color: #fff; }
 163
 164         #outer > .navigation.fixed {
 165                 position:                       fixed;
 166                 top:                            0;
 167                 left:                           0;
 168         }
 169
 170         #outer > .navigation.spacer {
 171                 visibility:                     hidden;
 172         }
 173
 174 /* Search Field */
 175         .navigation li.search, .navigation form {
 176                 display:                        block;
 177                 padding-top:                    4px;
 178         }
 179         .navigation .search_field_container.roundit .search_field {
 180                 border:                         0;
 181                 padding:                        0;
 182                 margin:                         0;
 183         }
 184         .navigation .search_field_container.roundit {
 185                 background-color:               #fff;
 186                 -moz-border-radius:             1em;
 187                 -webkit-border-radius:          1em;
 188                 padding:                        0.1em 1em;
 189                 font-size:                      1.2em;
 190         }
 191         .navigation .search_field_container {
 192                 cursor:                         text;
 193         }
 194
 195 /* Main content */
 196
 197         #inner {
 198                 z-index:                        1000;
 199                 width:                          80%;
 200                 min-width:                      50%;
 201                 max-width:                      65em;
 202                 padding:                        0.71429em 0 1.42857em 0;
 203                 margin:                         0 auto;
 204                 font-size:                      1.4em; /* 14px */
 205                 line-height:                    2;     /* 28px */
 206                 background-color:               #fff;
 207         }
 208         /* Remove side padding on thin windows (phones?) */
 209                 @media all and ( max-width:640px ){
 210                         #inner { width: auto; }
 211                 }
 212
 213 /* Branding */
 214         #branding {
 215                 display:                        block;
 216                 visibility:                     hidden;
 217                 width:                          80%;
 218                 margin:                         -1.42857em auto 1.42857em auto;
 219                 overflow:                       hidden;
 220                 border:                         0;
 221                 outline:                        0;
 222         }
 223
 224 /* Footer */
 225         #footer {
 226                 position:                       absolute;
 227                 bottom:                         0;
 228                 left:                           0;
 229                 height:                         1.4em;  /* 14px */
 230                 width:                          100%;
 231                 z-index:                        1000;
 232                 line-height:                    1.4;    /* 14px */
 233                 text-align:                     center;
 234                 text-align:                     center;
 235         }
 236
 237         #footer, #footer a {
 238                 color:                          #999;
 239         }
 240
 241         #footer:hover, #footer:hover a { color: #444; }
 242         #footer a:hover { color: #000; }
 243
 244 /* Some docbook elements */
 245
 246         .docbook_filename, .docbook_emphasis, .docbook_function {
 247                 font-style:                  italic;
 248         }
 249         .docbook_option, .docbook_command {
 250                 font-weight:                    bold;
 251         }
 252         .docbook_literal {
 253                 font-family:                    monospace;
 254         }
 255         .docbook_literallayout {
 256                 background-color:               #e8e8d0;
 257         }
 258         .docbook_literallayout pre {
 259                 padding:                        1em;
 260                 margin-bottom:                  1em;
 261         }