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