/*############################################################################*/
/* Screen-based layout of 1st Policy website - Andy Rushton 2007 */

/* different browsers have different default margins for various elements - take control */

*
{
  margin: 0;
}

/*= Layout ===================================================================*/

/*
Center the design on the screen. This is done by simply using auto-margins.

Then layout using a header, then three columns, then a footer. I use
three-column floated layout: CSS Mastery p140. In this, floats are used to
place the columns and a gutter is left by making the columns add up to 10px
less than 100%. This leaves room for buggy browsers to make slight placement
errors without messing up the layout.
*/

body
{
  /* give the wrapper a border top & bottom - this doesn't work if I put a
  margin on the wrapper, but it does if I put padding inside the body */
  padding: 10px 0 20px 0;
  font-family: Verdana,Tahoma,Arial,Helvetica,sans-serif;
  font-size: small;
  /* force scrollbars to appear if the window is smaller than this CSS Mastery p136 */
  min-width: 820px;
}

#wrapper
{
  width: 820px;
  /* auto margins on the sides centers the wrapper in the window*/
  margin: 0 auto;
  position: relative;
  padding: 0;
}

#header
{
  /* by using a placement, this becomes the enclosing box for the contents */
  position: relative;
  /* header is full width */
  width: 100%;
}

/* side menu is left column within wrapper */
#menu
{
  width: 160px;
  float: left;
  position: relative;
}

/* content is right column within wrapper and contains the right two columns */
#content
{
  width: 640px;
  float: right;
}

/* main is left column within content */
#main
{
  width: 440px;
  float: left;
  position: relative;
}

/* secondary is right column within content */
/* Note: not ideal - the right column is a fixed width */
#secondary
{
  width: 180px;
  float: right;
  position: relative;
  padding-top: 10px;
}

/* footer is full width */
#footer
{
  clear: both;
  width: 100%;
  position: relative;
}

/*----------------------------------------------------------------------------*/
/*
   Navigation - all navigation menus are implemented as lists.

   Horizontal menus are implemented using the techniques explained in CSS
   Mastery p91 but with my own tweaks.

   Vertical menus are simpler and just styled to look prettier than the
   standard. */

/* common styles for navigation menus */

ul.nav a:link, ul.nav a:visited
{
  border-bottom: 1px dotted;
}

ul.nav a:active, ul.nav a:hover
{
  border-bottom: 1px solid;
}

/* the main navigation contains all the important links */

#mainnav
{
  margin: 10px 0 0 20px;
  padding: 0;
  list-style: none;
}

#mainnav li
{
  margin: 0;
  padding: 6px 0px;
}

#mainnav a
{
  text-decoration: none;
  font-weight: normal;
}

/* The featured links navigation is below the main navigation in the same column */

#pfeatured
{
  margin: 30px 10px 3px 20px;
}

#featured
{
  margin: 0 0 0 20px;
  padding: 0;
  list-style: none;
}

#featured li
{
  margin: 0;
  padding: 10px 0px;
}

#featured a
{
  text-decoration: none;
  font-weight: normal;
}

/* the 'other' navigation bar is for low-importance links and is laid out horizontally */

#othernav
{
  position: absolute;
  right: 20px;
  bottom: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#othernav li
{
  display: block;
  padding: 0;
  margin: 0 0 3px 20px;
  float: left;
}

#othernav a
{
  text-decoration: none;
  font-weight: normal;
}

/*----------------------------------------------------------------------------*/
/* Layout of the main content */

h1
{
  margin: 10px 10px 10px 0px;
  font-size: large;
  font-weight: bold;
}

h2
{
  margin: 10px 10px 10px 0px;
  font-size: medium;
  font-weight: bold;
}

h3
{
  margin: 10px 10px 10px 0px;
  font-size: small;
  font-weight: bold;
}

p
{
  margin: 10px 20px 10px 0px;
  text-align: justify;
}

p.links
{
  padding: 0;
  margin: 0;
  text-align: left;
}

#main p
{
  margin: 10px 0px 10px 0px;
}

/* dummy wrapper paragraph for images to meet the HTML standard */
.pwrapper
{
  margin: 0;
  border: 0;
  padding: 0;
}

/*----------------------------------------------------------------------------*/
/* Images */

/* remove all link-related decoration around images used as links to declutter the design */
/* also set up the default settings for all images */

img
{
  padding: 0;
  border: 0;
  margin: 0;
  text-decoration: none;
}

/* .callcentre is the callcentre image on the home page - set to stretch to the width of the column */

.callcentre
{
  margin: 0;
  width: 100%
}

/* .logo is the 1st Policy Logo image  - 100px high */

.logo
{
  margin: 20px 0 20px 20px;
}

/* .button is the Get Quote button  - 80px high*/

.button
{
  position: absolute;
  top: 30px;
  right: 20px;
}

/* .member is a logo of a membership organisation */

.member
{
  margin: 10px 20px 20px 20px;
}

/* .validator is a logo for a validating organisation */

.validator
{
  margin: 10px 20px 20px 20px;
}

/*----------------------------------------------------------------------------*/
/* Tables */

/* General - see CSS Mastery p116 */

table
{
  border-collapse: collapse;
  margin: 10px 10px 10px 0px;
}

th, td
{
  text-align: left;
  padding: 0.1em 0.2em;
}

caption
{
  font-weight: bold;
  text-align : left;
}

/* Specific to Buy a Policy page */

#buytable
{
  width: 98%;
  font-size: small;
}

#buytable th
{
}

#buytable tr
{
  border-bottom: 1px solid #8fb5da;
}

/*----------------------------------------------------------------------------*/
/* Forms - CSS Mastery p120 */

form
{
  font-size: small;
}

form div
{
  clear: both;
}

form p
{
}

label
{
  float: left;
  width: 35%;
}

input.money
{
  width: 30%;
}

input.wide
{
  width: 50%;
}

select.wide
{
  width: 50%;
}

button
{
  margin-left: 35%;
}

input
{
  margin: 0;
  padding: 1px 3px;
}

select
{
  margin: 0;
  padding: 0;
}

option
{
}

textarea
{
  margin: 0;
  width: 98%;
  height: 15em;
}


/*----------------------------------------------------------------------------*/
/* Special credit to me  */

.design
{
  position: absolute;
  margin: 0;
  padding: 0;
  bottom: -20px;
  left: 1px;
  font-size: xx-small;
}

.design a:link, p.design a:visited
{
  text-decoration: none;
}

.design a:hover, .design a:active
{
  text-decoration: none;
}

/*----------------------------------------------------------------------------*/
/* Address */

address
{
  font-style: normal;
}

/*============================================================================*/
/* Colour scheme */

body
{
  color: #000000;
  background-color: #ffffff;
/*  background-color: #d6d6d6; */
}

#wrapper
{
  border: 1px solid #dddddd;
  color: #000000;
  background-color: #ffffff;
}

#menu
{
/*  border: 1px solid #8fb5da; */
}

table
{
  background-color: #ffffff;
}

thead
{
  background-color: #8fb5da;
}

h1, h2
{
  color: #6f95ba;
  background-color: #ffffff;
}

a:link, a:visited
{
  color: black;
  border-color: #8fb5da;
}

a:active, a:hover
{
  color: #8fb5da;
  border-color: #8fb5da;
}

input:focus, textarea:focus, select:focus
{
  background-color: #dfe7ff;
}

.highlight
{
  color: #6f95ba;
}

.error
{
  color: #ff0000;
}

.warning
{
  color: #cd4d4d;
}

/*============================================================================*/
/* Debugging */

/*
body
{
}

div
{
  border: 1px solid blue;
}

form
{
  border: 1px solid blue;
}

p
{
}

#wrapper
{
}

#header
{
  background-color: #ffd6d6;
}

#menu
{
  background-color: #d6ffd6;
}

#content
{
  background-color: #d6d6ff;
}

#main
{
  background-color: #ffffd6;
}

#secondary
{
  background-color: #d6ffff;
}

#footer
{
  background-color: #ffd6d6;
}
*/

/*----------------------------------------------------------------------------*/