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, .nav {
 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   .nav {
 152     position:       relative;
 153     top:            0;
 154     left:           0;
 155     margin-top:     6em;
 156     padding:      0 0 0.5em 0;
 157     width:        100%;
 158     text-align:     center;
 159     list-style:     none;
 160     background-color:   #1f3c5a;
 161     z-index:      1000;
 162   }
 163
 164   .nav li {
 165     display:      inline;
 166     font-size:      1.2em;
 167     padding:      0 0.3em;
 168   }
 169
 170   .nav li a         { color: #fff; }
 171   .nav li a:hover   { color: #aaf; }
 172   .nav li a:visited { color: #aaf; }
 173   .nav li a:visited:hover { color: #fff; }
 174
 175   #outer > #nav_float {
 176     position:     fixed;
 177     top:        0;
 178     left:       0;
 179     width:      100%;
 180     display:    none;
 181     margin-top: 0;
 182   }
 183
 184 /* Search Field */
 185   .nav li.search, .nav form {
 186     display:          inline;
 187     padding-top:      4px;
 188   }
 189   .nav .search_field_container.roundit .search_field {
 190     border:       0;
 191     padding:      0;
 192     margin:       0;
 193   }
 194   .nav .search_field_container.roundit {
 195     background-color:   #fff;
 196     -moz-border-radius:   1em;
 197     -webkit-border-radius:    1em;
 198     padding:      0.1em 1em;
 199     font-size:      1.2em;
 200   }
 201   .nav .search_field_container {
 202     cursor:       text;
 203   }
 204
 205 /* Main content */
 206
 207   #inner {
 208     z-index:      1000;
 209     width:        80%;
 210     min-width:      50%;
 211     max-width:      65em;
 212     padding:      0.71429em 0 1.42857em 0;
 213     margin:       0 auto;
 214     font-size:      1.4em; /* 14px */
 215     line-height:      2;     /* 28px */
 216     background-color:   #fff;
 217   }
 218   /* Remove side padding on thin windows (phones?) */
 219     @media all and ( max-width:640px ){
 220       #inner { width: auto; }
 221     }
 222
 223 /* Branding */
 224   #branding {
 225     display:      block;
 226     visibility:     hidden;
 227     width:        80%;
 228     margin:       -1.42857em auto 1.42857em auto;
 229     overflow:     hidden;
 230     border:       0;
 231     outline:      0;
 232   }
 233
 234 /* Footer */
 235   #footer {
 236     position:     absolute;
 237     bottom:       0;
 238     left:       0;
 239     height:       1.4em;  /* 14px */
 240     width:        100%;
 241     z-index:      1000;
 242     line-height:      1.4;    /* 14px */
 243     text-align:     center;
 244     text-align:     center;
 245   }
 246
 247   #footer, #footer a {
 248     color:        #999;
 249   }
 250
 251   #footer:hover, #footer:hover a { color: #444; }
 252   #footer a:hover { color: #000; }
 253
 254 /* Some docbook elements */
 255
 256   .docbook_filename, .docbook_emphasis, .docbook_function {
 257     font-style:        italic;
 258   }
 259   .docbook_option, .docbook_command {
 260     font-weight:      bold;
 261   }
 262   .docbook_literal {
 263     font-family:      monospace;
 264   }
 265   .docbook_literallayout {
 266     background-color:   #e8e8d0;
 267   }
 268   .docbook_literallayout pre {
 269     padding:      1em;
 270     margin-bottom:      1em;
 271   }