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