sites/rochesterbanquets.com/httpdocs/main.css

   1 /*
   2 http://www.cita.uiuc.edu/html-best-practices/text/separators.php
   3 Web Accessibility Best Practices: Separators
   4 */
   5
   6 /*
   7 CSS-file for Strictly CSS two column layout 2006
   8 http://www.strictlycss.com
   9 Developed by Eivind Savio
  10 */
  11 * /*Set's border, padding and margin to 0 for all values*/
  12 {
  13 padding: 0;
  14 margin: 0;
  15 border: 0;
  16 }
  17 body, html {
  18 color: #000;
  19 font-family: Arial, Tahoma, Verdana, sans-serif;
  20 background-color: #eee;
  21 text-align: center; /*** Centers the design in old IE versions ***/
  22 }
  23 body {
  24 font-size: 11pt;
  25 }
  26 p {padding: 7px 0 7px 0;}
  27
  28 a {
  29 color: #000099;
  30 }
  31 a:hover{
  32 color: #0000FF;
  33 text-decoration: none;
  34 }
  35
  36 hr {
  37 color: #800000;
  38 background-color: #800000;
  39 height: 4px;
  40 margin: 10px;
  41 margin-top: 4px;
  42 }
  43
  44 h1, h2, h3 {
  45 font-weight: bold;
  46 color: #800000;
  47 }
  48 h1, h2 {
  49 font-family: "Monotype Corsiva";
  50 }
  51 h1 {
  52 font-size: 2.5em;
  53 }
  54 h2 {
  55 font-size: 1.9em;
  56 margin: 10px;
  57 margin-bottom: 10px;
  58 }
  59 h3 {
  60 font-size: 10.5pt;
  61 margin: 10px;
  62 margin-bottom: 0px;
  63 font-family: "Arial";
  64 }
  65 h1 a, #header h2{
  66 color: #fff;
  67 }
  68 .clear { clear: both; }
  69 #mainContainer {
  70 width: 800px;
  71 margin: 0 auto; /*** Centers the design ***/
  72 min-height: 300px;
  73 background: #fff;
  74 text-align: left; /*** Because we centered the text in body we have to move the text back to left aligning ***/
  75 }
  76 * html #mainContainer {
  77 height: 300px; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
  78 }
  79 /**************************
  80 HEADER
  81 **************************/
  82 #header {
  83 margin-top: 25px; /*** Make some space for the header menu ***/
  84 background: #FFF;
  85 padding: 10px;
  86 height: 126px;
  87 border-bottom: 4px solid #800000;
  88 }
  89 /**************************
  90 CONTENT AND COLUMNS
  91 **************************/
  92 .outer {
  93 padding-left: 165px;
  94 }
  95 * html .outer {
  96 /*** No need for hacking IE on this layout ***/
  97 }
  98 .inner {
  99 width: 635px; /*** This width is for non-IE browsers. Mozilla makes this necessary. Be sure to check your layout in different browsers if you changes this value. Especially IE7 seems to create a horisontal scroll if this value is set too large ***/
 100 }
 101 * html .inner {
 102 width: 100%;
 103 }
 104 /*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
 105 div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid
 106 blowing the layout apart. IE gets the original 100% width as in the Livingstone layout.
 107 ***/
 108 .float-wrap {
 109 float: left;
 110 width: 800px;
 111 margin-left: -165px; /*** Same length as .outer padding-left but with negative value ***/
 112 }
 113 * html .float-wrap {
 114 /*** No need for hacking IE on this layout ***/
 115 }
 116 #content {
 117 float: right;
 118 width: 640px;
 119 background: #fff;
 120 }
 121 * html #content {
 122 position: relative; /*** IE needs this  ***/
 123 }
 124 .contentWrap{
 125 padding: 5px;
 126 border-left: 4px solid #800000;
 127 }
 128 .contentWrap ol, .contentWrap ul {
 129 margin: 3px 0 5px 0;
 130 list-style: none;
 131 font-family: Garamond;
 132 font-size: 11pt;
 133 }
 134 .contentWrap li {
 135 padding-bottom: 2px;
 136 margin: 8px;
 137 }
 138 .contentWrap p {
 139 margin: 10px;
 140 margin-top: 0px;
 141 margin-bottom: 6px;
 142 }
 143 /**************************
 144 LEFT COLUMN
 145 **************************/
 146 /*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left,
 147 div.left is carried over into the proper position.
 148 ***/
 149 #left {
 150 float: left;
 151 width: 150px;
 152 background: #fff;
 153 min-height: 250px;
 154 padding: 5px;
 155 }
 156 * html #left {
 157 position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
 158 height: 250px;
 159 }
 160 #left ul {
 161 list-style: none;
 162 padding-bottom: 4px;
 163 }
 164 #left li {
 165 padding-bottom: 2px;
 166 }
 167
 168 /*************************
 169 RIGHT COLUMN
 170 **************************/
 171 #right {
 172 margin: -120px 0 0 -800px; /*** Moves the right column to the top of the page. This is now our top menu above the header ***/
 173 float: left;
 174 width: 790px;
 175 background: #cfc;
 176 padding: 5px;
 177 height: 40px;
 178 }
 179 * html #right {
 180 position: relative; /*** IE needs this. ***/
 181 margin-top: -125px; /***Since IE is threating padding different than other browsers we need to move it a little bit more ***/
 182 }
 183 #right ul {
 184 float: right;
 185 list-style: none;
 186 }
 187 #right li {
 188 display: inline; /*** Making the links horisontal aligned ***/
 189 padding-right: 15px;
 190 }
 191 /**************************
 192 FOOTER
 193 **************************/
 194 #footer {
 195 width: 800px;
 196 margin: 0 auto; /*** Since the footer is outside the #mainContainer we also need to center the footer ***/
 197 text-align: center;
 198 background-color: #fff;
 199 }
 200 #footer ul {
 201         list-style: none;
 202         margin: 0;
 203         padding: 0;
 204         padding: .5em;
 205 }
 206
 207 #footer li {
 208         margin: 0;
 209         padding: 0;
 210         display: inline;
 211 }
 212
 213 #footer a {
 214    margin: 0;
 215    padding: 0;
 216    padding-left: .5em;
 217    padding-right: .5em;
 218    text-decoration: none;
 219    border-left: solid 2px #800000;
 220    font-size: medium;
 221 }
 222
 223 #footer ul a.first {
 224   border-left: none;
 225 }