/* $Id:changeme.css 178 2010-11-21 15:25:46Z ian $ */

body {
 background-color: #FFF;
 color: #000;
 font: 62.5%;
 font-family: Verdana,Helvetica,Arial,sans-serif;
 text-align: center;
 line-height: 1.3em;
}

table {
 border-collapse: collapse;
 border-spacing: 0;
}

/* This is the default style - change at will - SUGGEST A STYLE */
ul {
 margin-left: 20px; /* indented from side */
 margin-bottom:20px; /* space after */
}

/* This is the default style - change at will - SUGGEST A STYLE */
ol {
 margin-left: 20px; /* indented from side */
 margin-bottom:20px; /* space after */
}

a {
 color: #000; /* default value */
}

a:visited {
 color: #666; /* default value */
}

/* HEADERS ----------------------------------------------------------------------------------------------------------------------------- */
h1 {
 color: #333; /* COLOUR CHANGE */ /* replace H tags colour with your own */
 /* default margins = margin:0.5em 0 1em 0;for h tags:in this order:top,right,bottom,left */
}

h2 {
 color: #000; /* COLOUR CHANGE */
}

h3 {
 color: #0e6789; /* COLOUR CHANGE */
 /* default margins = margin:0.5em 0;for h tags:in this order:top/bottom,right/left */
}

h4 {
 color: #0082c0; /* COLOUR CHANGE */
}

/* LAYOUT - generic use =------------------------------------------------------------------------------------------------------------------------ */
/* larger text - this is arbitrarily large - I made it for TCU */
.large {
 font-size:1.4em;
 margin-top: 20px;
 display: block;
}

hr {
 color: #bfbfbf;
 background-color: #bfbfbf;
}

hr.thick {
 height: 3px;
 color: #666;
 background-color: #666;
}

/* thicker separator line - change colour if desired for greater emphasis */
/* comment out and suggest ways to use this class */
/* LINKS ------------------------ default link style */
a,a:link,a:visited,a:active {
 color: #0e6789; /* COLOUR CHANGE */
}

a:hover {
 text-decoration: underline;
 color: #000; /* COLOUR CHANGE */
}

a h4 {
 color: #0082c0;
}

/* COLOUR CHANGE */
a:hover h4 {
 text-decoration: underline;
}

a#skipNav:active,a#skipNav:focus {
 color: #000;
}

/* Colour for skipnav link when tabbed / clicked - is white to hide it ohterwise */
.more a,.more a:link,.more a:visited,.more a:active {
 color: #000;
}

/* IMAGE PATHS + THEME / COLOUR CHANGES -- change to match your site structure --------------------------------------------------------------------- */
#arc {
 background: #696767 url(../images/header_arc.gif) no-repeat;
}

#navbar {/* the main nav bar */
 background-color:#0d73a1; /* COLOUR CHANGE - replace Background colour with your colour that matches the graphic */
}

#navbar p a {/* links in navbar */
 color:#FFF; /* COLOUR CHANGE - MAKE SURE CONTRAST IS VERY HIGH */
 padding:0 10px 0 8px; /* default */
 border-right:2px solid #FFF; /* COLOUR CHANGE (the bars in between) - MAKE SURE CONTRAST IS VERY HIGH */
}

.menu li li a {/* sub menu styling - positions the arrow graphic in a bit more */
 background-image:url(../images/triangle_right.gif);
}

/*
.nav_top {
 background-image: url(../images/corner_nav_top.gif);
}

.nav_bottom {
 background-image: url(../images/corner_nav_bottom.gif);
}
*/

.main_top {
 background-image: url(../images/corner_main_top.gif);
}

.photo_top {
 background-image: url(../images/corner_photo_top.gif);
}

.photo_bottom {
 background-image: url(../images/corner_photo_bottom.gif);
}

.icon_top {
 background-image: url(../images/corner_icon_top.gif);
}

.icon_bottom {
 background-image: url(../images/corner_icon_bottom.gif);
}

.photo_long {
 background-image: url(../images/corner_photo_long.gif);
}

/* ------------ SPLASH PAGE ------------*/
#splash {
 background-image: url(../images/header_arc.gif); /* re-uses HEADER ARC image no need to change */
 border-color:#0d73a1; /* COLOUR CHANGE this is a colour that matches your site *** make sure to make a header ARC image to match if changing it */
 border-bottom-color:#0d73a1; /* COLOUR CHANGE this is a colour that matches the MAIN NAVIGATION BAR */
}

#splash .two_cols {
 background-image: url(../images/splash_line.gif); /* this line matches the outline of the border above - Graphic in file:Splash_Master.psd */
}

#splash h2 a {
 color: #000; /* COLOUR CHANGE language links - match if you like */
}

.two_cols {
 background-image: url(../images/two_cols.gif);
}

/* PATH CHANGE */
.three_cols {
 background-image: url(../images/three_cols.gif);
}

/* PATH CHANGE */
#searchBox {/* search box */
 background-color:#fff; /* COLOUR CHANGE */
 border:1px solid #1d2d44;
}

#submit {/* submit button */
 background-color:#1d2d44;
 width: 28px;
 height: 28px;
 border: 0;
 color: #fff; /* COLOUR CHANGE */
 vertical-align:top;
}

#banner {/* holds flash banner or static banner */
 border-bottom:4px solid #0e6789;
 overflow: hidden;
 height: 185px; /* COLOUR CHANGE - this is the colour stripe under the flash banner */
}

.leftnav .header {
 background: #333 url(../images/arc_right_main.gif) no-repeat; /* COLOUR CHANGE header BG image match #colour to bottom half of arc graphic */
}

.leftnav .header a {
 color: #fff; /* Link in Navigational Header */
}

/* COLOUR CHANGE header BG image match #colour to bottom half of arc graphic */
.leftnav .mycolour .header {
 border-color: #ffffff;
 background-color: #44560C;
 background-image: url(../images/arc_left_mycolour.gif);
}

/* COLOUR CHANGE update font to contrast w BG color (above in .leftnav .mycolour .header) */
/*.leftnav .mycolour .header a {
 color: #fff;
}

*/
.menu a {
 padding: 8px 4px 10px 24px; /* this creates the size of the menu item box - last value is the distance of the text from the side */
 border-bottom:1px dotted #666;
 background: #f7f7ef url(../images/triangle_right.gif) no-repeat 12px 13px;
}

.menu a:link,.menu a:visited,.menu a:active {/*color:#333 optional COLOUR CHANGE */
}

.menu a:hover {/*color:#000 optional COLOUR CHANGE */
}

/* MENU - Current item colour - USE to DESIGNATE THE CURRENT PAGE - add this id to the appropriate li in the menu */
#current {
 background-color: #f9ecaa;
}

.row .header {/* attributes for all header bars */
 border-top-color:#b1b9c3;
 border-bottom-color: #94add1;
 background-color: #e5e5e5; /* COLOUR CHANGE the background colour to your site's colour scheme */
 background-image:url(../images/arc_right_grey.gif); /* CHANGE PATH to match your site structure */
 color:#333; /* color for all row headers */
}

/* EXTRA CLASS FOR MULTIPLE COLOURED HEADER BARS - uncomment to use
- USE:If you want to have multiple colours of title bars - you may need this class - if the colours contrast a lot the MORE link will also change - use this class to change it
------------------------------------------------------------------------ */
/*.mycoloured .header .more a,.mycoloured .header .more a:link,.mycoloured .header .more a:active,.mycoloured .header h2 {
 color: #fff;
}

.mycoloured .header {
 border-top-color: #3888ac;
 border-bottom-color: #0d73a1;
 background: #0d73a1 url(../images/arc_right_main.gif) no-repeat;
}

*/
.mycolour {
 background-color: #0d73a1;
}

/* COLOUR CHANGE this is a colour that matches your site *** make sure to make a header ARC image to match if changing it */
#right_column .mycolour .header {
 border-top: 3px solid #3888ac;
 border-bottom: 1px solid #0d73a1;
 background: #0d73a1 url(../images/arc_right_main_darkteal.gif) no-repeat;
}

.leftnav .mycolour .header a {
 color: #fff;
}

.mycolour .header h2 {
 color: #FFF !important;
}

.more a,.more2 a,.more a:active,.more2 a:active {
 color: #0d73a1;
}

.more a:hover,.more2 a:hover {
 color: #23d7f7;
}

.more a:visited,.more2 a:visited {
 color: #0d73a1;
}

.box {/* v2.1 class */
 background-color:#f8f6d7;
 border-bottom: 1px solid #666;
}

.box table td {
 border-top: 1px dotted #666;
}

.photolink .text {
 color: #fff; /* set colour of link text under photos here */
}

#right_column ul li {
 color: #000; /* text colour for lists in content area */
}

.date {
 color: #000; /* CHANGE COLOUR OF NEWS DATES here */
}

/* ------ GRID - ------------ */

/* GRID BOX SIZES (reference)
- when nesting grid elements inside each other (as opposed to stacking them inline) use .nomargin to remove the margin of the last nested column in a set
REASON:each grid element is given a right-margin automatically. If you nest two or more grid pieces inside another the redundant margin breaks the layout
- use the class "showmethegrid" on the wrapper and it will show the image that makes up the grid.
- count the # of pink columns under the area you wish to use for layout
- give your div a class of "grid_#" where # is the number of pink columns you wish to span.
- each grid size has a PLUS size "grid_#plus" which is the # of pink columns PLUS the white column at the end. Also called the "gutter",and is always 20px wide
- sizes of the grid pieces are denoted below - to calculate the size of a grid_#plus add 20px to the grid_# below (examples for the first three are shown in parentheses)
.grid1 - 40px
(.grid_1plus - 60px)
.grid2 - 100px
(.grid_2plus - 120px)
.grid3 - 160px (1/4 right_column)
(.grid_3plus 180px)
.grid4 - 220px (1/3 right_column)
.grid5 - 280px
.grid6 - 340px (1/2 right_column)
.grid7 - 400px
.grid8 - 460px (2/3 right_column)
.grid9 - 520px
.grid10 - 580px (3/4 right_column)
.grid11 - 640px
.grid12 - 700px (whole right_column)
.grid13 - 760px
.grid14 - 820px
.grid15 - 880px
.grid16 - 960px
*/

/* --- ACCESSIBILITY ---- ncs EDITED nov4/09 (updated due to bug) use to hide h1s or h2s you don't want visible to the sighted but read by screen readers*/
h1.accessible,h2.accessible {
 position: absolute;
 left: -10000px;
 top: auto;
 width: 1px;
 height: 1px;
 overflow: hidden;
}

.paddingTop {
 padding: 10px 0 0 0;
}

#wrapper #splash .button a {
 background-color: #FFF;
}

/* --- Add the class .showmethegrid to the wrapper to see the grid ---*/
#wrapper.showmethegrid {
 background: #fff url(../images/nav_pluscols.gif) repeat-y;
 background-position: bottom left;
 padding-right: 0;
}

#right_column.showmethegrid {
 background: #fff url(../images/gridhelper_rightcolumnonly_12cols.gif) repeat-y;
 background-position: bottom left;
 padding-right: 0;
}

/* ------ GRID - ------------ */
#right_column .news ul li {
 list-style-type: none;
 margin: 0;
 padding: 0 5px;
}