/* ************* common ********** */
html>body {
font-size: 16px;  /* IE can't read this. Its here to please older version of safari which default to 14px */
font-size: 63%;  /* see explanation below  */
}

body{
    margin: 0 0 0 10px; 
    background: #fff;
    color:#333; /* centres the page for older browsers */
    font-family: Helvetica, Arial, sans-serif;
    font-size: 62.5%;  /* see explanation below  */
    }
    
    /*  The following hack confuses my validator (cse) - remove and replace after validation */
 /*\*//*/
body{
    font-size: 63%; 
    }
/**/    
    
/*
The the default font size for the majority of browsers is 16px.
62.5%, for convenience sake sets the primary body font sze to equivalent of 10px,
therefore making it easy to specify sizes in em. 1em = 10px, 1.1em = 11px and so on. 
I have then reset the overall font size to 12em in the #wrapper. Line heights do not seem to translate as consistently using this technique,
hence tho we want a line height of 16px, setting it at 1.4em seems to be alot nearer than the 1.6em that it theoretically should be..
Drawback is if user has adjusted their defualt settings. This will set font size to 62.5% of that, so it cant be 100% accurate, but it will at least be resizable in all browsers
the second rule is targetting ie5 mac which renders 62.5% incorrectly, and significantly smaller.
*/
    
    
a {color:#688e04; background: transparent; text-decoration: none;}
a:visited{ background: transparent; text-decoration: none;}
a:hover{background: transparent; text-decoration:underline; }
a:active{background: transparent; text-decoration: none;}    

img{border: 0;}
.fl{float: left;}
.fr{float: right;}

p {
margin: 5px 0 5px 0;
padding: 5px 0 5px 0;
}
hr{ /* maybe abandon this in favour of a contextual rule putting a border at the top of a paragraph? */
 margin: 10px 0 10px 0;
 color: #ccc;
 background-color: #ccc;
 padding: 0;
}

.pad{padding: 10px;}
    
    
    /* ************** primary layout  ********* */ 
    
    #wrapper{
    width: 752px;
    /*height: auto;*/
   font-size:1.2em;
    line-height: 1.4em;
    text-align: left;  /*  impotant! to reset the content text align left  */
    margin: 0 auto;  /* centres the page */
    /*display: block;*/
    }
    
    #header{
        width:752px;
        height: 103px;
       vertical-align: bottom;
    }
    
    #aq_logo{
   background-image: url(http://www.artquest.org.uk/artquest_id.gif);
    float: left;
   position: relative;
    top: 40px;
    height: 70px;
    width: 216px;
    }
    
    #header_nav{  /* aka sitesnav */
    float:right;
    position: relative;
    top: 40px;
    height: 70px;
    width: auto;
    }
    
    
    #main_nav{
     width: 170px;
     background: #fff;
     color:#333;
    float: left;
    }
    #contentcollumn{
	margin-top:0;
	margin-left: 10px;
	background: transparent;
	width: 572px;
	/* height: 170px;*/
    float: left;
	padding-top: 5px;    /* overflow:visible;  ie5 mac fix? */
    }
    
    
#subheader{
	background-color:#FFFFFF;
	width: 572px;
	height: 113px;
	float: left;
	border: 1px solid #666666;
}    
    
    
#main_content{
margin-top: 10px;
    background-color: transparent;
    width: 572px;
    float: left;
}
/* ***** articles in the main content col. **** */
.article_box{
	/* background: #eaeaea;*/
 margin-bottom:10px;
	border: 1px solid #666666;
}    
.article_box p{ 
padding: 0;
margin: 0 0 20px 0;
border: 0;
}    


/* main content area sub collumns */
#content_l{  /* content col: left */
float: left;
background:#eaeaea;
width: 390px;
}


#content_r{
float: right;
width: 170px;
}
    
/* main content area (full width) */
#content {
float: left;
background:#eaeaea; 
width: 572px;
}


#content_r .info{ /* contextual rule to remove the top margin from the info box when in right hand col */
margin-top:0px;
}

.footer{
	font-size: 0.9em;
	background:#fff;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 0px;
	padding-left: 0;
 /*  clear: both;
   float: none; just for good measure..*/
}

    /* ************** end primary layout  ********* */ 
    
/* ************* header sites nav ***************** */
a#sitesnav_1 {
  background-image: url(http://www.artquest.org.uk/artquest_onoff.gif);
  background-repeat: no-repeat;
  background-position:top left;
 /* display: table;*/
  float: left;
}
a#sitesnav_1:hover, a#sitesnav_1:focus {
  background-image: url(http://www.artquest.org.uk/artquest_onoff.gif);
  background-repeat: no-repeat;
  background-position:top right;
/*  display: table;*/
  float: left;
}

a#sitesnav_2 {
  background-image: url(http://www.artquest.org.uk/qa_onoff.gif);
  background-repeat: no-repeat;
  background-position:top left;
/*  display: table;*/
  float: left;
}
a#sitesnav_2:hover, a#sitesnav_2:focus {
  background-image: url(http://www.artquest.org.uk/qa_onoff.gif);
  background-repeat: no-repeat;
  background-position:top right;
  /*display: table;*/
  float: left;
}


a#sitesnav_3 {
  background-image: url(http://www.artquest.org.uk/artlaw_onoff.gif);
  background-repeat: no-repeat;
  background-position:top left;
/*  display: table;*/
  float: left;
}
a#sitesnav_3:hover, a#sitesnav_3:focus {
  background-image: url(http://www.artquest.org.uk/artlaw_onoff.gif);
  background-repeat: no-repeat;
  background-position:top right;
/*  display: table;*/
  float: left;
}
a#sitesnav_4 {
  background-image: url(http://www.artquest.org.uk/artroute_onoff.gif);
  background-repeat: no-repeat;
  background-position:top left;
/*  display: table;*/
  float: left;
}
a#sitesnav_4:hover, a#sitesnav_4:focus {
  background-image: url(http://www.artquest.org.uk/artroute_onoff.gif);
  background-repeat: no-repeat;
  background-position:top right;
/*  display: table;*/
  float: left;
}

/* ct: for artelier logo */
a#sitesnav_5 {
  background-image: url(http://www.artquest.org.uk/artelier_onoff.gif);
  background-repeat: no-repeat;
  background-position:top left;
/*  display: table;*/
  float: left;
}
a#sitesnav_5:hover, a#sitesnav_5:focus {
  background-image: url(http://www.artquest.org.uk/artelier_onoff.gif);
  background-repeat: no-repeat;
  background-position:top right;
/*  display: table;*/
  float: left;
}

/*  header sites nav ends */    
    
    
/* ******************** main navigation ****************** */    
    
/* I have rebuilt the nav from the ground up due to some 
weird display tick from IE6 win that came when a 3rd 
level nested list was introduced. */
/*     new menu styles:   */
     
#navcontainer ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
width: 100%;
}/*
#navcontainer li
{
margin: 0px;
padding: 0px;
line-height: 20px;
}
#navcontainer ul li a
{
display: block;
width: 160px;
padding-left: 10px;
color: #fff;
background-color: #333;
border-bottom: 1px solid #fff;
}
#navcontainer ul li a:link, #navcontainer ul li a:visited
{
color: #E2E2F5;
text-decoration: none;
}
#navcontainer ul li a:hover
{
background-color: #688e04;
color: #fff;
}

/*  second tier  */
/*
#navcontainer ul ul li a
{
display: block;
padding-left: 25px;
width: 145px;
}

#navcontainer ul ul li a:link, #navcontainer ul ul li a:visited
{
color: #333;
background-color: #b3c681;
text-decoration: none;
}

#navcontainer ul ul li a:hover
{
color: #fff;
background-color: #688e04;
}

    
    
    /*  third tier  */
  /*  
#navcontainer ul ul ul li a
{
display: block;
padding-left: 25px;
width: 145px;
background-color: #6565AB;
}

#navcontainer ul ul ul li a:link, #navcontainer ul ul ul li a:visited
{
color: #333;
background-color: #e3e9d2;
text-decoration: none;
border-bottom: 0px solid #fff;
}

#navcontainer ul ul ul li a:hover
{
background-color: #e3e9d2;
color: #688e04;
}


/* selected states *//*
#navcontainer ul li a#active
{
color: #fff;
background-color: #688e04;
}
*/


/* *************** main navigation ends ******************  */

/* *** subsubnav in article pages  you are here link style ** */
/* looks really poor in bold in every browser at this point size */
/*
.subsub{
 font-weight: bold;
}   */
#subsubcurrent {color: #333; background-color: transparent; /*font-weight: bold*/  }
#subsubcurrent a{color:#333; text-decoration: none; background-color: transparent;}
#subsubcurrent a:visited{text-decoration: none; background-color: transparent;}
#subsubcurrent a:hover{text-decoration:underline; background-color: transparent; }
#subsubcurrent a:active{ text-decoration: none; background-color: transparent;}

/* ******************** Typography, links etc.. ************** */
/*
h1 { 
    font-size: 2.2em;   
    line-height: 1.2em;     
    font-weight: bold;
    padding: 0;
    margin: 0;
    border: 0; 
        }
*/
h1 {
    margin: 0px; padding: 0px; overflow: hidden; height: 0px;
}

h2{
        font-size: 1.9em;
        font-weight: bold;
        line-height: 1.2em;
        padding: 0;
        margin: 0;
        border: 0;
    }
    
    
h3{
font-weight: bold;
padding: 0;
margin: 0;
border: 0;
}
    
    
    
.white{
    color: #fff;
    background-color: transparent;
    }
    
.black{
    color: #333;
     background-color: transparent;
    }
    
/* ***  styles for the left hand side bar search box etc *** */    
.sidebar_l{
 padding: 6px 6px 6px 6px;
 margin-top: 10px;
}    
    
.searchbox{
color: #fff;
font-size: .96em;
background-color: #999;
}    
/* link to the advanced search page */
 a.advanced_srch{ color: #fff; text-decoration: none; background-color: transparent; }
 a.advanced_srch:visited{text-decoration: none; background-color: transparent;}
 a.advanced_srch:hover{text-decoration: underline; background-color: transparent; }
 a.advanced_srch:active{text-decoration: none; background-color: transparent;}
    
form{
    margin: 0;
    padding: 0;
}

.input{
    height: 14px;
    width: 75px;
    display: inline;
    margin: 0 3px 0 3px;
}
.go{
    border: 1px solid #fff;
    color: #fff;
    background-color: #999;
    padding: 1px;
}
        
    

.align_r{
    text-align: right;
    margin: 0;
    padding: 0;
}

/* ****** styles the "more info boxes" ***** */ 
.info{
    border: 1px solid #333;
    margin-top: 10px;
}
    
.infotitle {
    border-bottom: 1px solid #333;
    padding: 6px 6px 6px 6px;
    font-weight: bold;  /* consider making an appropriate h4 rule instead ? */
}    

.infotitle-inner {
    border-bottom: 1px solid #333;
    border-top: 1px solid #333;
    padding: 6px 6px 6px 6px;
    font-weight: bold;    
}
    
.infocontainer{
padding: 6px 6px 6px 6px;    
}    


/* ***** A - Z list link styles **** */
/* A - Z  links  */
ul#aztop, ul#azbottom {
font-size: .8em;
font-weight: bold;
margin: 0;
padding: 0;
white-space: nowrap; 
}
#aztop li, #azbottom li {
display: inline;
list-style-type: none;
}
#aztop a, #azbottom a { padding:2px; }
#aztop a:link, #azbottom a:link, #aztop a:visited, #azbottom a:visited {
color:#688e04;
background-color: transparent;
text-decoration: none;
}
#aztop a:hover, #azbottom a:hover {
color: #fff;
background-color:#688e04;
text-decoration: none;
}

#aztop a:active, #azbottom a:active {
color: #fff;
background-color:#688e04;
text-decoration: none;
}

#aztop #azcurrent, #azbottom #azcurrent_b {
color: #fff;
background-color:#688e04;
text-decoration: none;
}
.bigarrow{ /* styles the arrow size in the search results 'next page' link to make it bigger than the default */
    font-size: 1.3em;
}

/* ** eletter box on homepage ** */
.e_letter{
height:14px;
width: 80px;
margin: 0 3px 0 3px;
}

/* **** advanced search  styles **** */    
.adv_srch{
   color: #fff;
    background-color: #999;
    width: auto;
    padding-left: 85px; /*width of left column containing the label elements*/
}    
.adv_srch p{
padding: 5px 0 5px 0;
}    
.cssform label{
float: left;
margin-left: -85px; /*width of left column*/
width: 75px; /*width of labels. Should be smaller than left column (85px) to create some right margin*/
}
.cssform input[type="text"]{ /* width of text boxes. IE6 does not understand this attribute */
width: 180px;
}


/* *** accessibility skip nav. I only set this up on the homepage ** */
 #skip a, #skip a:hover, #skip a:visited
{
background-color: transparent;
position:absolute;
left:0;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}
 
#skip a:active
{
background-color: transparent;
position:static;
width:auto;
height:auto;
}

/* columns for form elements - same as university site */
.fe1 {
    float: left;
    width: 275px;
}

hr.staff {
 border: 0;
 text-align: center;
 clear: both;
 margin: 0;
 padding: 0;
}

.artquest_id {
   font-size: 0.9em;
}

iframe {
 width: 552px !important;
}

.boxsize {
 margin-bottom: 0.7em;
}
.glossymenu{
	margin: 5px 0;
	padding: 0;
	width: 168px;
	border-bottom-width: 1px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
}

.glossymenu a.menuitem{
/*background: black url(glossyback.gif) repeat-x bottom left;
font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;*/
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;
}


.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
/*color: white;*/
}

.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
right: 5px;
border: none;
}

.glossymenu a.menuitem:hover{
/*background-image: url(glossyback2.gif);*/
}

.glossymenu div.submenu{ /*DIV that contains each sub menu*/
	background-color: #F9F9F9;
}

.glossymenu div.submenu ul{ /*UL of each sub menu*/
	list-style-type: none;
	margin: 0;
	padding: 5px;
	position: relative;
	left: 5px;
}

.glossymenu div.submenu ul li{
border-bottom: 1px/* solid blue*/;
}

.glossymenu div.submenu ul li a{
display: block;
/*font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: black;*/
text-decoration: none;
padding: 2px 0;
padding-left: 10px;
}

.glossymenu div.submenu ul li a:hover{
/*background: #DFDCCB;*/
colorz: white;
}