/* viva-screen.css */
/* ##### Common Styles ##### */

body {
  color: black;
  background-color: white;
  font-family: verdana, helvetica, arial, sans-serif;
  font-size: 0.8em;
  margin: 0;
  padding: 0;
}

html > body {
  font-size: 0.8em;
}

.doNotDisplay {
  display: none !important;
}

/* ##### Header rules ##### */
/* rem: the #header contains both #topHeader and #subHeader - see definitions below */
#header {
width: 100%
}

/* ##### topHeader rules ##### */
/* this div is where the ViVA logo goes. The 100px height is to accomodate the 97px height of the logo - the background graphic to the right needs to be the same height as the .topHeader div, i.e.100px, or it will leave a white stripe at the bottom*/
.topHeader {
	width: 100%;
	height: 100px;
	}
/* applied as a class to the ViVA logo, (a .png rem, which is positioned within the .topHeader div in the headernav.html include), sets it in the top left of the screen */	
.logo {
	position: absolute;
	left: 0px;
	top: 0px;
}
/* applied as a class to the banner-background.jpg image (which is positioned within the .topHeader div in the headernav.html include), floats it right and gives it 100px height - matching the height of the div */
.banner-background {
	float: right;
	height: 100px;
	}
	
/* ##### subHeader rules ##### */
/* applied as a class, .subHeader styles the navigation area where the navigation buttons go [applied as class: exists within the #header div] */
.subHeader {
  color: white;
  background-color: #B37D00;
  font-size: 100%;
  text-align: center;
  margin: 0;
  padding: 0.5ex 0;
}
/* applied as a class, styles the links that act as the actual buttons. The rule beneath it styles the hover state of the link */
.subHeader a {
  color: white;
  background-color: #B37D00;
  text-decoration: none;
  font-size: 85%;
  font-weight: bold;
  margin: 0;
  padding: 0 1ex;
}
.subHeader a:hover {
  color: black;
  background-color: white;
}

/* ##### Left Side Bar rules ##### */
/* leftSideBar is where all submenus for the concert list, musicians list, guest artists list, news article list, newsletter list, supporters list etc will be displayed */
/* .leftSideBar sets the width in ems and floats the leftSideBar left; clears left div */
.leftSideBar {
  width: 12.5em;
  float: left;
  clear: left;
}
/* this styles h2's used as section headings in any leftSideBar */
.leftSideBar h2{
  color: rgb(64,64,64);
  background-color: #FFB200;
  font-size: 1em;
  font-weight: bold;
  margin: 0;
  padding: 0.8ex 1ex;
}
/* applied as a class, styles unordered lists in the leftSideBar */
.leftSideBar ul {
  list-style-type: none;
  list-style-position: outside;
  margin: 0 0 1em 0;
  padding: 0;
}
/* applied as a class, styles each list item in the leftSideBar */
.leftSideBar li {
  margin: 1ex;
  padding: 0 0 0 0.75ex;
  font-size: 0.85em;
}
/* applied as a class, styles any links in the leftSideBar */
.leftSideBar a {
  color: #B37D00;
  background-color: transparent;
  text-decoration: none;
}
/* styles the visited state of links in the leftSideBar */
.leftSideBar a:visited {
  color: #551A8B;
  background-color: transparent;
  text-decoration: none;
}
/* applied as a class, styles the hover state of links in the leftSideBar */
.leftSideBar a:hover {
  color: rgb(64,64,64);
  background-color: transparent;
  text-decoration: none;
}
/* applied as a class, styles any blocks of text in leftSideBar to look bit like a paragraph */
.leftSideBar .sideBarText {
  color: #B37D00;
  background-color: transparent;
  line-height: 1.25em;
  margin: 1ex 0.25ex 1.5em 0.75ex;
  padding: 0;
  display: block;
}
/* applied as a class, styles any links in .sideBarText 'paragraphs' within the leftSideBar */
.leftSideBar .sideBarText a {
  text-decoration: underline;
}
/* applied as a class, styles hover state of any links in .sideBarText 'paragraphs' within the leftSideBar */
.leftSideBar .sideBarText a:hover {
  text-decoration: none;
}

/* ##### Right Side Bar rules##### */
/* rightSideBar is where the Latest News, Resources and Accessibility links will be displayed */
/* applied as a class, .rightSideBar sets the width in ems and floats the rightSideBar right; clears right div */
.rightSideBar {
  width: 13em;
  margin: 2ex 0.75ex 0 0;
  padding: 0;
  float: right;
  clear: right;
  border: 1px solid #B37D00;
}
/* applied as a class, sets a margin for the rightSideBar */
[class~="rightSideBar"] {
  margin-right: 1.5ex;
}
/* this styles all h2's used as section headings in any rightSideBar */
.rightSideBar h2 {
  color: rgb(64,64,64);
  background-color: #FFB200;
  font-size: 1em;
  font-weight: bold;
   margin: 1.25ex 1ex;
  padding: 0.9ex 1ex;
}
/* applied as a class, syles any links in the rightSideBar */
.rightSideBar a {
  color: #B37D00;
  background-color: transparent;
  text-decoration: underline;
}
/* styles the visited state of links in the rightSideBar */
.rightSideBar a:visited {
  color: #551A8B;
  background-color: transparent;
  text-decoration: underline;
}
/* applied as a class, styles the hover state of any links in the rightSideBar */
.rightSideBar a:hover {
  text-decoration: none;
}
/* applied as a class, styles selected text in the rightSideBar to have a line-height of 1.5em */
.rightSideBar .sideBarText {
  line-height: 1.5em;
  font-size: 0.85em;
  margin: 0;
  padding: 0 2ex 1em 2ex;
}

/* ##### Main Copy rules ##### */
/* the #main-copy div sits between the .leftSideBar [floated left] and the .rightSideBar [floated right]. Its width is not specified, allowing it to expand to fill the space between the two sidebars. Borders and padding keep it away from the sidebar content */
#main-copy {
  color: black;
  background-color: white;
  text-align: justify;
  line-height: 1.5em;
  margin: 0 0 0 12.5em;
  padding: 0.5ex 15em 1em 1em;
  border-left: 1px solid #FFB200;
}
/* this styles h1 headings within the #main-copy div - these have a 1px line at the top but this can be removed for any individual h1 by using the instruction <h1 style="border-top: none; padding-top: 0;" >..... </h1> at the point where that h1 occurs on the html page itself */
#main-copy h1 {
  color: #B37D00;
  background-color: transparent;
  font-family: arial, verdana, helvetica, sans-serif;
  font-size: 175%;
  font-weight: bold;
  font-style: italic;
  text-align: left;
  margin: 1.5em 0 0 0;
  padding: 1.0em 0 0 0;
  border-top: 1px solid #FFB200;
}

/* this styles h2 headings within the #main-copy div - these have a ipx line at the top but this can be removed for any individual h2 by using the instruction <h2 style="border-top: none; padding-top: 0;" >..... </h2> at the point where that h2 occurs on the html page itself */
#main-copy h2 {
  color: #B37D00;
  background-color: transparent;
  font-family: arial, verdana, helvetica, sans-serif;
  font-size: 110%;
  font-weight: bold;
  font-style: italic;
  text-align: left;
  margin: 1em 0 0 0;
  padding: 1em 0 0 0;
  border-top: 1px solid #FFB200;
}

/* this styles h3 headings within the #main-copy div - these have a 1px line at the top, but this can be removed for any individual h3 by using the instruction <h3 style="border-top: none; padding-top: 0;" >..... </h3> at the point where that h3 occurs on the html page itself */
#main-copy h3 {
  color: #B37D00;
  background-color: transparent;
  font-family: arial, verdana, helvetica, sans-serif;
  font-size: 100%;
  font-weight: bold;
  font-style: italic;
  text-align: left;
  margin: 1em 0 -0.7em 0;
  padding: 1em 0 0 0;
  border-top: 1px solid #FFB200;
}

/* this id styles links within the #main-copy div */
#main-copy a {
  color: #B37D00;
  background-color: transparent;
  text-decoration: underline;
}
/* styles the visited state of links in the #main-copy div */
#main-copy a:visited {
  color: #551A8B;
  background-color: transparent;
  text-decoration: underline;
}
/* styles the hover state of links within the #main-copy div */
#main-copy a:hover {
  text-decoration: none;
}
/* applied as a class, styles the 'Images from the project...' text which precedes each gallery */
#main-copy .more {
  color: #B37D00;
  background-color: transparent;
  font-weight: bold;
  text-decoration: none;
  text-align: left;
}
/* styles (within main-copy div) a horizontal line 2px tall, 98% of the width of the middle column, in the ViVA colour */
#main-copy hr {
  color: #B37D00;
  background-color: #B37D00;
  border: 0;
  width: 98%;
  height: 2px;
}
/* when applied as a class, styles a list to not display the bullet point default, and displays hard against the left edge of the display space. Note - use of <br /> to seperate lists made using this clsss is necessary. Used on contacts-page.html */
.noliststyle {
	list-style-type: none;
	margin: 0;
	padding: 0;
	}
/* when applied as a class, styles any bulleted list so that the default indent is replaced by a smaller 1em indent*/
.bulletliststyle {	
	margin: 1em;
	padding: 0;
	}
/* styles all list items within #main-copy area so that text is left justified (rather than fully justified by default); this prevents display problems at low screen resolutions*/
#main-copy li {
	text-align: left;
	}
	
/* when applied as a class, styles a person's name to bold and coloured. Useful to highlight names which do not have a link associated with them [names that have links are also coloured, but underlined, and change to black in the hover state, rem] */	
.names {
  color: #B37D00;
  background-color: transparent;
  }
  
/* when applied as a class, styles text to match the Derby LIVE colour. */	
.derbylive {
  color: #FF0099;
  background-color: transparent;
  font-weight: bold;
  }
  
/* when applied as a class, styles text to be black, large and bold - used for teasers beneath the main artwork or picture on homepage */	
.teaser {
  color: #000000;
  background-color: transparent;
  font-family: arial, verdana, helvetica, sans-serif;
  font-size: 150%;
  font-weight: bold;
  text-align: left;
  line-height: 1.1em;
  margin: 1em 0 -0.7em 0;
  padding: 1em 0 0 0;
  }
  
/* when applied as a class, styles a person's name to match the size and font of the teaser text, but in the ViVA colour*/	
.teasernames {
  color: #B37D00;
  background-color: transparent;
  font-family: arial, verdana, helvetica, sans-serif;
  font-size: 150%;
  font-weight: bold;
  line-height: 1.1em;
  }

/* when applied as a class, styles text to be black, large and bold - used for smaller teasers after the main teaser on the homepage */	
.teasersmall {
  color: #000000;
  background-color: transparent;
  font-family: arial, verdana, helvetica, sans-serif;
  font-size: 115%;
  font-weight: bold;
  text-align: left;
  line-height: 1.1em;
  margin: 1em 0 -0.7em 0;
  padding: 1em 0 0 0;
  }
  
/* when applied as a class, styles a person's name to match the size and font of the teasersmall text, and in the ViVA colour*/	
.teasersmallnames {
  color: #B37D00;
  background-color: transparent;
  font-family: arial, verdana, helvetica, sans-serif;
  font-size: 115%;
  font-weight: bold;
  line-height: 1.1em;
  }

/*this class gives a centred quote in bold, with a 25px margin left and right. Used mostly on the Education pages for participant quotes, but can be used anywhere. See code - rem that &quot; is used to add quotation marks and that the .author-details rule has been applied as a span to the actual author's name which follows each quote*/
.centred-quote {
	font-weight: bold;
	margin-right: 25px;
	margin-left: 25px;
}

/*this class is best used for giving a left-justified quote in bold. Used mostly on concert pages for participant quotes, but can be used anywhere. See code - rem that &quot; is used to add quotation marks*/
.bold {
	font-weight: bold;
} 
  
/*this class italicises text*/
.italicise {
	font-style: italic;
}

/* ##### Paragraph text rule ##### */
/* styles all default paragraph text */
p {
  text-align: left;
  margin: 1em 0 1.5em 0;
  padding: 0;
}
/* styles any Definition Term - see viva-print.css sheet for dl [Definition List] settings */
dt {
  font-weight: bold;
  margin: 0;
  padding: 0 0 0.5ex 0;
}
/* styles any Definition Description [used beneath a Definition Term] */
dd {
  margin: 0 0 1.5em 1.5em;
  padding: 0;
}


/* ##### Image placement rules ##### */
/*the following three class rules can be used to float images left or right or not at all. Note - in left or right floats, any para text will wrap around the image, but specifying image-float-none makes any text go beneath the photo instead of wrapping */
/*this first rule will float an image left and cause paragraph text to wrap round it; the padding-top 3px stops the image looking too high when next to a paragraph of text*/
.image-float-left {
	float: left;
	margin-right: 20px;
	margin-bottom: 7px;
	padding-top: 3px;
}
/*this second rule will float the image right and cause paragraph text to wrap round it; the padding-top 3px stops the image looking too high when next to a paragraph of text*/
.image-float-right {
	float: right;
	display:block;
	margin-bottom: 7px;
	margin-left: 20px;
	margin-right: 10px;
	padding-top: 3px;
}
/*this third rule specifies no float, but then gives a margin around the image - used to centrally position images in the rightSideBar area */
.image-float-none {
	float: none;
	margin-bottom: 0.5em;
	margin-left: 2em;
	margin-right: 1em;
	padding-top: 1px;
}
/* this rule is necessary to prevent validation errors under Strict 1.0 which does not allow the property 'Border="0"' to be applied to images such as the Adobe button. It tells all images to display without any border. */
img {
	border-style: none;
}

/* ##### Gallery rules ##### */
/*start of the #album css rules for education-page.html. Nb - the #gallery div is nested within the #main-copy div on that page. Based on Simplest Photo Gallery by Stu Nichols of CSS Play */

#gallery {position:relative; width:400px; height: 330px;}
#thumbs {width:125px; float:left;}
#thumbs a {display:block; float:left; margin:0 0 5px 5px; width:50px; height:50px; border:1px solid #000;}
#thumbs a img {width:50px; height:50px; border:0;}
#thumbs a:hover {border-color:#ddd;}
#thumbs a:hover img {position:absolute; width:auto; height:auto; left:135px; top:0; border:1px solid #333;}

/* start of feedbackform.shtml styling rules */
form.contact fieldset {   
  border: 2px solid #FFB200;   
  padding: 10px; 
}  

form.contact legend {   
  font-weight: bold;   
  font-size: small;   
  color: #B37D00;   
  padding: 5px; 
}

form.contact {   
  padding: 0;   
  margin: 0;   
  margin-top: -15px;
  line-height: 150%;
}

form.contact label {
  font-weight: bold;
  font-size: small;
  color: #000000;
}

form.contact label.fixedwidth {   
  display: block;   
  width: 240px;   
}

form.contact .buttonarea input {   
  background: #FFB200;
  color: black;   
  font-weight: bold;   
  padding: 5px;   
  border: 1px solid white; 
}

form.contact .buttonarea   {
  text-align: center;   
  padding: 4px;   
  background-color: #B37D00; 
}
/*end of feedbackform.shtml styling rules*/

/* ##### Footer rules ##### */
/* this div wraps the whole footer area; not specifying a width means it uses 100% screen width by default */
#footer {
  color: white;
  background-color: #B37D00;
  font-size: 92%;
  text-align: center;
  line-height: 1.25em;
  margin: 0;
  padding: 1em 4mm 1em 4mm;
  clear: both;
}
/* this div is for the lower part of the footer that contains the copyright information */
#footer div {
  margin: 0;
  padding: 0 0 1ex 0;
}
/* this styles any links within the #footer div */
#footer a {
  color: black;
  background-color: transparent;
  text-decoration: underline;
  font-weight: bold;
}
/* this styles the hover state of any links within the #footer div */
#footer a:hover {
  text-decoration: none;
}