/* Sections
-----------------------------------------------
- Notes
- Base
- Class & ID specific overrides
- Images (design)
- Images (classes for articles)
- Layout
- Menu
- Colours
- Comments

Notes at bottom of page
*/


/* base
----------------------------------------------- */

body {
   background-attachment: fixed;
   background-color: #ffffff;
   background-position: center;
   background-repeat: no-repeat;
   border-style: none;
   color: #555555;
   font-family: sans-serif;
   font-size: medium;
   font-style: normal;
   font-weight: normal;
   height: 100%;
   margin: 0px;
   padding: 0px;
   /* See 'colour' section for background image */
   }


p, q, blockquote {
   border-style: none;
   line-height: 1.5em;
   margin: 0px;
   margin-bottom: 1em;
   margin-top: 1em;
   padding: 0px;
   }

q, blockquote {
   font-style: italic;
   padding: 0px 20px;   /* 10px left and right */
   }

h1, h2, h3 {
   border-style: none;
   font-weight: bold;
   line-height: 1.5em;
   margin: 0px;
   padding: 0px;
   }

h1 {font-size: 3em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1em;}

li {line-height: 1.5em;}

a {
   color: #555555;
   text-decoration: none;
   }

ins {
   color: #ff0000;
   text-decoration: underline;
   }

#content table {
   border-collapse: collapse;    /* This is used to get rid of
                                    gaps between cells */
   margin: 5px;
   padding: 0px;
   width: 98%;
   }

#content td, #content th {
   border-style: solid;
   border-width: thin;
   color: #000000;
   padding: 5px;
   }

#adverts {
   text-align: center;
   }

hr {                  /* Horizontal rule - used as a divider */
   border: none;
   background-color: #eeeeee; /* Gecko uses this for hr colour */
   color: #eeeeee;            /*    IE uses this for hr colour */
   height: 2px;      /* Need to set this in Safari & IE
                        FF correclty uses the 2px default */
   text-align: center;
   width: 80%;
   }

/* Class & ID specific overrides
----------------------------------------------- */

#content a {
   color: #0000ff;
   text-decoration: underline;
   }

#content ul li {
   list-style-type: circle;
   }

#content ol li {
   list-style-type: decimal;
   }

.article, .article hr {
   overflow: auto;
   /* This is applied to the article form to ensure that different
      articles do not run into each other when they contain an
      image that is larger than the text*/
   }

#head h1 {   /* Remove unnecessary gap for header image */
   font-size: medium;
   line-height: 1em;
   }

h1.navigation {
   /* Allow hidden title for menus to help screen readers */
   color: #ffffff;
   font-size: 0em;
   line-height: 0em;
   margin-bottom: 0em;
   }

.updated {
   text-align: right;
   }

#error {
   color: #ff0000;
   }

/* The following styles are copied (and slightly adjusted) from
the CofE site to remove the need to link to their stylesheet
whilst trying to mimick their style as closly as possible */

#cofe-rss-box {
   border: 1px;
   border-color: #A891C0;
   border-style: solid;
   float: right;
   font-size: 90%;
   margin: 5px;
   padding: 0px;
   width: 200px;
   }

#cofe-rss-box h2 {
   background-color: #8452B5;
   background-image: url(/images/design/default_title.gif);
   background-repeat: no-repeat;
   font-size: 120%;
   line-height: 1em;
   margin: 0px;
   padding: 5px;
   }

#cofe-rss-box h2 a {
   color: white;
   text-decoration: none;
   }

#cofe-rss-box h2 a:hover {
   color: white;
   text-decoration: underline;
   }

#cofe-rss-box ul {
   margin: 0px;
   padding: 0px;
   color: #333333;
   }

#cofe-rss-box ul li {
   list-style-type: none;
   margin: 0px;
   border-top: 1px solid #A891C0;
   padding: 0.5em;
   }

#iewarning {
   border-color: red;
   border-style: solid;
   border-width: thin;
   color: red;
   font-weight: bold;
   padding: 5px;
   }


/* Images (design)
----------------------------------------------- */

img {
   border-style: none;
   }

#googlemap {
   /* apply to to the googlemap (to match article images) */
   border-style: solid;
   border-color: #aaaaaa;
   border-width: 1px;
   margin: 5px;
   padding: 5px;
   }

.head_line {
   background-repeat: repeat-x;
   margin: 10px 0px;         /* top & bottom 10px */
   padding: 0px;
   /* See 'colour' section for background image */
   }

#rss img {
   vertical-align: middle;
   }

#foot img {
   height: 32px;
   }

#advert_left {
   left: 20px;
   position: absolute;
   top: 0px;
   }

#advert_right {
   position: absolute;
   right: 20px;
   top: 20px;
   }

#alpha_course img {
   width: 75px;
   }


/* Images (classes for articles)
----------------------------------------------- */

/* Properties for all article images defined above */

.article img {
   /* Apply a border to all article images */
   border-style: solid;
   border-color: #aaaaaa;
   border-width: 1px;
   margin: 5px;
   margin-bottom: 0.5em;
   margin-top: 0.5em;
   padding: 5px;
   }

img.noborder {border-style: none;}

/*note that img_centre has to be applied to a p tag*/
/*e.g. <p class="img_centre"><img class="h200"...>,/p>*/

.img_left   {float: left;}
.img_right  {float: right;}
.img_centre {float: none; text-align: center;}
.img_vmid   {vertical-align: middle;}


/* layout
----------------------------------------------- */

#accessibility, #access_keys {
   height: 1px;
   overflow: hidden;
/* position: absolute;
   left: -10000px;   this is traditional solution, but
                     causes problem with IE7 */
   top: auto;
   width: 1px;
   }

#container {
   margin: 20px;     /* required to prevent horizontal scrollbar */
   min-width: 740px;
   padding: 0px;
   }

#head {
   height: 72px;
   margin: 0px;
   padding: 0px;
   text-align: center;
   }

#sidebar-1, #sidebar-2 {
   margin: 0px;
   padding: 0px;
   text-align: left;
   width: 150px;
   }

#sidebar-1 {
   float: left;
   }

#sidebar-2 {
   float: right;
   }

#content {
   margin: 0px 170px;      /* left & right 170px */
   padding: 0px;
   }

#gallery {       /* comparable to content - gallery section*/
   margin: 0px 170px;      /* left & right 170px */
   padding: 0px;
   }

#foot {
   clear: both;      /* make sure that the footer is at the very
                        bottom of the page */
   margin: 0px;
   margin-top: 10px;
   padding: 0px;
   font-size: xx-small;
   font-weight: lighter;
   text-align: center;
   }


/* Menu
----------------------------------------------- */

.menu {
   border-style: none;
   color: #555555;      /*defines text colour */
   }

.menu ul {
   list-style-type: none;
   margin: 0px;
   padding: 0px;
   text-align: center;
   text-decoration: none;
   }

.menu ul ul {
   display: none;             /* Hide submenu for buttons */
   list-style-type: circle;
   margin: 0px 0px 0px 20px;  /* Margin-left 20px */
   padding: 0px;
   text-align: left;
   }

.menu li {
   background-color: transparent;
   background-repeat: no-repeat;
   font-weight: bolder;
   /* See 'colour' section for background image */
   }

.menu li li {
   font-weight: normal;
   }

.menu .current ul ul {
   display: block;      /* Display submenu for selected section */
   }

.menu a {           /* needed to expand link to cover full button */
   display: block;  /* This is the line that does the work */
   line-height: 32px;
   min-height: 32px;  /* Used to center text... honest */
   min-width: 150px;
   }

.menu li li a {
   line-height: 1.5em;
   min-height: 1.5em;
   min-width: 130px;
   }

.menu .current a,
.menu .current .current a {
   color: #ff0000;      /* Set selected section & button to red */
   }

.menu .current li li a {
   color: #555555;      /* Set non-selected list items to grey */
   }

#menu_extended {
   vertical-align: middle;
   text-align: center;
   }


/* Colours (background images)
----------------------------------------------- */

/* Set the colour of the page based upon the body class */
body.green {
   background-image: url(/images/design/cofe_logo_1_green.gif);}
body.purple {
   background-image: url(/images/design/cofe_logo_2_purple.gif);}
body.orange {
   background-image: url(/images/design/cofe_logo_3_orange.gif);}
body.pink {
   background-image: url(/images/design/cofe_logo_4_pink.gif);}
body.turquoise {
   background-image: url(/images/design/cofe_logo_5_turquoise.gif);}
body.blue {
   background-image: url(/images/design/cofe_logo_6_blue.gif);}


/* Set the colour of the divider based upon the body class*/
body.green .head_line {
   background-image: url(/images/design/horsep_1_green.gif);}
body.purple .head_line {
   background-image: url(/images/design/horsep_2_purple.gif);}
body.orange .head_line {
   background-image: url(/images/design/horsep_3_orange.gif);}
body.pink .head_line {
   background-image: url(/images/design/horsep_4_pink.gif);}
body.turquoise .head_line {
   background-image: url(/images/design/horsep_5_turquoise.gif);}
body.blue .head_line {
   background-image: url(/images/design/horsep_6_blue.gif);}


/* Set the colour of the button based upon its class*/
.menu .green {
   background-image: url(/images/design/btn_1_green.gif);}
.menu .purple {
   background-image: url(/images/design/btn_2_purple.gif);}
.menu .orange {
   background-image: url(/images/design/btn_3_orange.gif);}
.menu .pink {
   background-image: url(/images/design/btn_4_pink.gif);}
.menu .turquoise {
   background-image: url(/images/design/btn_5_turquoise.gif);}
.menu .blue {
   background-image: url(/images/design/btn_6_blue.gif);}


/* comments
----------------------------------------------- */

.comment_time {
   font-size: x-small;
   }

.comment_data {
   position: absolute;
   left: 300px;
   }

#enter_comment {
   overflow: auto;
   vertical-align: top;
   }

#enter_comment textarea {
   min-width: 300px;
   width: 80%;
   }

.comments_error {
   color: #000000;
   background-color: #fff4f4 
   }

div#cpreview {
   background-color: #f1f1f1;
   border: 2px solid #ddd;
   color: #000000;
   }


/* Notes
-----------------------------------------------

Format of margin & padding shorthand property

define 1 value  = margin: top/right/bottom/left;
define 2 values = margin: top/bottom  left/right;
define 3 values = margin: top  right/left  bottom;
define 4 values = margin: top  right  bottom  left;

--

Remember that relative URLs in CSS are relative to the CSS file, not the html page.

*/