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     margin-bottom: 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   #content {
  70     padding: 0 1em;
  71   }
  72   @media all and ( max-width:640px ){ #content { padding:0; } }
  73
  74 /* Main Header */
  75
  76   #header {
  77     position:     absolute;
  78     top:        0;
  79     left:       0;
  80     height:       2em; /* 60px */
  81     width:        100%;
  82     line-height:      2;   /* 60px */
  83     background-color:   #000;
  84     z-index:      1000;
  85
  86     background-color:   #1f3c5a; /* For browsers without gradient support */
  87     filter:       progid:DXImageTransform.Microsoft.gradient(startColorstr='#032044', endColorstr='#1f3c5a'); /* IE */
  88     background:     -webkit-gradient(linear,left top,left bottom,from(#032044),to(#1f3c5a)); /* Webkit */
  89     background:     -moz-linear-gradient(top, #032044, #1f3c5a); /* Firefox >= 3.6 */
  90   }
  91   @media all and ( max-width:640px ){
  92     #header {
  93       height:     2.5em; /* 60px */
  94       line-height:    2.5;   /* 60px */
  95     }
  96   }
  97
  98   body > #header.fixed {
  99     position:     fixed;
 100   }
 101
 102   #header a {
 103     color:        #fff;
 104     white-space:      nowrap;
 105   }
 106
 107   #header a:hover {
 108     color:        #aaf;
 109   }
 110
 111   #header, .navigation {
 112     opacity:      0.925;
 113   }
 114
 115 /* Outer Container (Positionining) */
 116
 117   #outer {
 118     position:     absolute;
 119     top:        0;
 120     left:       0;
 121     width:        100%;
 122     min-height:     100%;
 123     height:       auto !important;
 124     height:       100%;
 125     background-color:   #fff;
 126   }
 127
 128 /* Grey Side Bars */
 129
 130   #outer .left_bar, #outer .right_bar {
 131     display:      none;
 132   }
 133
 134   #outer > .left_bar.display, #outer > .right_bar.display {
 135     display:      block;
 136     position:     absolute;
 137     top:        0;
 138     width:        10%;
 139     height:       100%;
 140     background-color:   #ddd;
 141   }
 142   #outer > .left_bar  { left: 0; }
 143   #outer > .right_bar { right:  0; }
 144
 145   @media all and ( max-width:640px ){
 146     #outer > .left_bar.display, #outer > .right_bar.display { display: none; }
 147   }
 148
 149 /* Navigation */
 150
 151   .navigation {
 152     margin-top:     6em;
 153     padding:      0 0 0.5em 0;
 154     width:        100%;
 155     text-align:     center;
 156     list-style:     none;
 157     background-color:   #1f3c5a;
 158     z-index:      1000;
 159   }
 160
 161   .navigation li {
 162     display:      inline;
 163     font-size:      1.2em;
 164     padding:      0 0.3em;
 165   }
 166
 167   .navigation li a         { color: #fff; }
 168   .navigation li a:hover   { color: #aaf; }
 169   .navigation li a:visited { color: #aaf; }
 170   .navigation li a:visited:hover { color: #fff; }
 171
 172   #outer > .navigation.fixed {
 173     position:     fixed;
 174     top:        0;
 175     left:       0;
 176   }
 177
 178   #outer > .navigation.spacer {
 179     visibility:     hidden;
 180   }
 181
 182 /* Search Field */
 183   .navigation li.search, .navigation form {
 184     display:          inline;
 185     padding-top:      4px;
 186   }
 187   .navigation .search_field_container.roundit .search_field {
 188     border:       0;
 189     padding:      0;
 190     margin:       0;
 191   }
 192   .navigation .search_field_container.roundit {
 193     background-color:   #fff;
 194     -moz-border-radius:   1em;
 195     -webkit-border-radius:    1em;
 196     padding:      0.1em 1em;
 197     font-size:      1.2em;
 198   }
 199   .navigation .search_field_container {
 200     cursor:       text;
 201   }
 202
 203 /* Main content */
 204
 205   #inner {
 206     z-index:      1000;
 207     width:        80%;
 208     min-width:      50%;
 209     max-width:      65em;
 210     padding:      0.71429em 0 1.42857em 0;
 211     margin:       0 auto;
 212     font-size:      1.4em; /* 14px */
 213     line-height:      2;     /* 28px */
 214     background-color:   #fff;
 215   }
 216   /* Remove side padding on thin windows (phones?) */
 217     @media all and ( max-width:640px ){
 218       #inner { width: auto; }
 219     }
 220
 221 /* Branding */
 222   #branding {
 223     display:      block;
 224     visibility:     hidden;
 225     width:        80%;
 226     margin:       -1.42857em auto 1.42857em auto;
 227     overflow:     hidden;
 228     border:       0;
 229     outline:      0;
 230   }
 231
 232 /* Footer */
 233   #footer {
 234     position:     absolute;
 235     bottom:       0;
 236     left:       0;
 237     height:       1.4em;  /* 14px */
 238     width:        100%;
 239     z-index:      1000;
 240     line-height:      1.4;    /* 14px */
 241     text-align:     center;
 242     text-align:     center;
 243   }
 244
 245   #footer, #footer a {
 246     color:        #999;
 247   }
 248
 249   #footer:hover, #footer:hover a { color: #444; }
 250   #footer a:hover { color: #000; }
 251
 252 /* Some docbook elements */
 253
 254   .docbook_filename, .docbook_emphasis, .docbook_function {
 255     font-style:        italic;
 256   }
 257   .docbook_option, .docbook_command {
 258     font-weight:      bold;
 259   }
 260   .docbook_literal {
 261     font-family:      monospace;
 262   }
 263   .docbook_literallayout {
 264     background-color:   #e8e8d0;
 265   }
 266   .docbook_literallayout pre {
 267     padding:      1em;
 268     margin-bottom:      1em;
 269   }