www/style.css

   1 /* Css originally by mejobloggs  Design by Aran @ stuio7designs.com  Please email me if you use this, as I would love to see how it is being used, also you can join my linkshare to help you with your google ranking */
   2
   3 body {
   4         font-family: trebuchet ms, verdana, arial, tahoma;
   5         font-size: 90%;
   6         color: #555
   7         background-color: white;
   8         line-height: 180%;
   9         margin: 0;
  10         padding: 0;
  11         text-align: center;
  12 }
  13
  14 /* Set the page width here */
  15 #menu-top, #header, #wrapper-content, #wrapper-footer {
  16         width: 85%;
  17         margin: 0 auto;
  18         text-align: left;
  19 }
  20
  21 #menu-top {
  22         background: white url('images/bg02-white-right.png') no-repeat right top;
  23         overflow: hidden;
  24 }
  25
  26 #menu-top ul {
  27         background: transparent url('images/bg02-white-left.png') no-repeat left top;
  28         margin:0;
  29         padding: 1em 0 0 0;
  30         list-style: none;
  31         font-size: 85%;
  32         float: left;
  33         padding-left: 20px;
  34 }
  35
  36 #menu-top li {
  37         display: inline;
  38         float: left;
  39 }
  40
  41 #menu-top a {
  42         float: left;
  43         background:url(images/menuleft.png) no-repeat left top;
  44         margin:0;
  45         padding:0 0 0 4px;
  46         text-decoration:none;
  47         line-height: 1.5em;
  48 }
  49
  50 #menu-top a span {
  51         background: transparent url(images/menuright.png) no-repeat right top;
  52         padding:5px 15px 4px 6px;
  53         color:#5b8fbe;
  54         display: block;
  55         float: left;
  56         cursor: pointer; /* IE doesnt display the hand when you roll over the link for some reason. This fixes it */
  57 }
  58
  59 #menu-top a:hover { background-position:0% -42px; }
  60 #menu-top a:hover span {        background-position:100% -42px; }
  61
  62 #wrapper-header {       background: transparent url('images/bg.png') top center repeat-x; }
  63
  64 #header { background: #eee url('images/banner_mountains.jpg') no-repeat center top; }
  65
  66 #wrapper-header2 { background: transparent url('images/bg02-blue-left.png') top left no-repeat; }
  67
  68 #wrapper-header3 { background: transparent url('images/bg02-blue-right.png') top right no-repeat; }
  69
  70 #header h1 {
  71         margin: 0 20px;
  72         padding: 0;
  73         height: 192px;
  74         line-height: 2em;
  75         color: #777;
  76         font-size: 400%;
  77 }
  78
  79 #wrapper-content { background: white url('images/bg02-white-left.png') no-repeat left top; }
  80
  81 * html #wrapper-content { height: 1%; }
  82
  83 #content {
  84         background: transparent url('images/bg02-white-right.png') no-repeat right top;
  85         padding: 5px 245px 5px 40px;
  86 }
  87
  88 #wrapper-menu-page {
  89         float: right;
  90         width:180px;
  91         margin: 20px 30px 3em 2em;
  92         background: transparent url('images/menu.png') no-repeat;
  93         text-align: center;
  94         line-height: 140%;
  95         font-family:"Lucida Grande","Lucida Sans Unicode",arial,sans-serif;
  96 }
  97
  98 * html #wrapper-menu-page { margin-right: 15px; }
  99
 100 #menu-page { padding-top: 5px; }
 101
 102 #menu-page ul {
 103         margin: 0;
 104         padding: 0;
 105         list-style: none;
 106         font-size: 90%;
 107 }
 108
 109 #menu-page h3 {
 110         font-size: 75%;
 111         text-transform: uppercase;
 112         margin: 1em 0 0.3em 0;
 113         color: #5b8fbe;
 114         font-weight: normal;
 115         letter-spacing: 0.15em;
 116 }
 117
 118 #menu-page a:link, #menu-page a:visited { color: #555; }
 119 #menu-page a:hover { color: #5b8fbe; }
 120
 121 #wrapper-footer {
 122         margin-top: 1em;
 123         text-align: center;
 124 }
 125
 126 #footer {
 127         margin: 0 20px;
 128         background-color: #e5f0fc;
 129         border: 1px solid #ccc;
 130         border-bottom: 0;
 131         clear: both;
 132 }
 133
 134 h2 { font-size: 110%; }
 135 h3 { font-size: 100%; }
 136
 137 a:link, a:visited { color: #5b8fbe; text-decoration: none; }
 138 a:hover{ color: #666; text-decoration: none; }