/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body { 
  color: #000; 
  padding: 5px; width: 1024px; margin: 5px auto; }

/* STRUCTURE */

header { height: 100px; padding: 0 10px; }
#left { width: 220px; float: left; padding: 5px 5px; }

#center { width: 580px; /* Account for margins + border values */ float: left; padding: 5px 5px; margin: 0px 5px 5px 5px; }

#right { width: 184px; padding: 5px 5px; float: left; }
footer { clear: both; padding: 0 5px; }

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {  body { width: 94%; } 
#left { width: 31%; padding: 1% 4%; } 
#center { width: 51%; padding: 1% 4%; margin: 0px 0px 5px 5px; float: right;  } 
#right { clear: both; padding: 1% 4%; width: auto; float: none; }
 header, footer { padding: 1% 4%; } }

/* for 700px or less */
@media screen and (max-width: 600px) {  body { width: 94%; } 
#left { width: auto; float: none;  } 
#center { width: auto; float: none; margin-left: 0px;  } 
#right { width: auto; float: none; }
 }

/* for 480px or less */
@media screen and (max-width: 480px) {  body { width: 94%; } 
 header { height: auto; } 
#right { display: none; }
 }

#left { background: #eeeeee; }
#right { background: #ffffff; }
header, #left, #center, #right { margin-bottom: 5px; }

/* --- Typography --- */

html {
  padding: 2rem
  font-size: 22px
  font-weight: 100
  line-height: 1.5
  @media (max-width: 600px)
    font-size: 20px
  @media (max-width: 480px)
    font-size: 14px }
 
h1, h2, h3, h4, h5, h6, p, ul, ol {
  margin-top: 0
  margin-bottom: .7rem }
 
h1, h2, h3, h4, h5, h6 {
  margin-bottom: .4rem
  line-height: 1.0 }

h1, h3, h5 { font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; }
h2, h4, h6 { font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; }

p, dt, dd { font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; margin-bottom:1.0em; line-height:1.4em; }

li { font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; margin-bottom:0.4em; line-height:1.4em; }

.indexred { color: red; font-weight:bold; }
.em { font-size:100%; font-style: italic; }
.nowrap { white-space: nowrap; }

/* regimentalrogue header bars - three formats*/
/* header bar for site title page */

#header1 { padding-left: 15px; padding-bottom: 15px; padding-top: 35px; margin:0; text-align: left; background-image: url(rr_header_background.jpg); line-height: 1em; font-size: 50px; font-weight: bold; color: #ffcc00; }

/* header bar for subordinate pages */

#header1a {padding-left: 15px; padding-bottom: 15px; padding-top: 15px; margin:0; text-align: left; background-image: url(rr_header_background.jpg); background-size: auto;	line-height: 1em; font-size: 35px; font-weight: bold; color: #ffcc00; }

/* smaller regimental rogue header for 'rcr in the great war' pages */

#header1b { padding-left: 15px; padding-bottom: 15px; padding-top: 15px; text-align: left; background-image: url(rr_header_background.jpg); line-height: 1em; font-size: 24px; font-weight: bold; color: #ffcc00; }

/* header title link for all pages except index */

a.headerlink { color: #ffcc00; text-decoration: none; }
a.headerlink:visited { color: #ffcc00; text-decoration: none; }
a.headerlink:hover { color: #ffcc00; text-decoration: none; }

/* sub-title header for 'rcr in the great war' pages */

#headerrcr { height: 34px; color: #FFD700; font-size: 1.7em; background-color: #000033; font-weight: bold; padding: 15px 0px 5px 0px; text-align: center; border-top: 2px solid #ffd700; border-bottom: 2px solid #ffd700; }
 
/* breadcrumb navigation header */

	#header2 { height: 18px; padding-left: 25px; font-size: .80em; color: #FFFFFF; background-color: #000000; font-weight: normal; border-color: #000000; text-align: left; }

	#header2 ul { margin: 0; }
	#header2 a { text-decoration: none; padding: 2 0 2 0; }
	#header2 a:hover { color: #000000; font-style: bold; background-color: #ffffff; text-decoration: none; }

/* breadcrumb list formatting */
 
	.crumbs { list-style-type: none; }
	.crumbs li { display: inline; }
	.crumbs a { margin:0; padding: 0; }
 	.crumbs a:link { padding: 0; color: white; text-decoration: none; }
	.crumbs a:visited { padding: 0; color: white; text-decoration: none; }
 
/* left column menu area */

		#leftcol ul { margin: 0px; padding: 10px; line-height: 10px; } li { padding-bottom:15px; }

	/* left hand menu area horizontal line */
		.hrmenu { color: #bbbb88; background-color: #bbbb88; width: 80%; height: 1px; }
 
	/* links in right-hand main menu */
		#menu a { }
		a.menuitem { padding-bottom:15px; text-decoration: none; }
		a.menuitem:hover { color: #000000; text-decoration: underline; }
		a.menuitem { color: #000000; font-variant: normal; text-transform: none; font-weight: normal; text-align: left; } 
		a.menuitem:visited { text-decoration: italic; color: #331462; }

	/* share this box in left menu */

		div.sharethis { width: auto; border: 2px #8b9dc3 solid; margin: 10px; padding: 3px; background-color: #f7f7f7; }
		div.sharethis p { text-align: left; color: #3b5998; font-weight: bold; text-decoration: none; text-indent: 5px; } 
 
	/* quick links menu formatting */
		li.menuq { margin-bottom:2.0em; }
		a.menuq { color: #000066; text-align: left; text-transform: none; font-weight: normal; text-decoration: none; }
		a.menuq:hover { color: #000066; text-decoration: underline; }
		a.menuq:visited { color: #331462; text-align: left; margin-left: 1em; }

/* single column middle formatting */
	#middle { position:relative; line-height: 1.4em; background-color: white; font-size:100%; padding-top:10px 0 10px 10px; width:auto;  
		/* for IE5/WIN */ voice-family: "\"}\""; voice-family:inherit; width:95%; 
		/* actual value */ margin:5px; padding:5px; z-index:99; 
			}

/* splitting the "middle" div  */
	#middle-r { position:relative; top:-5px; right:-10px; float:right; width:40%;  
		/* for IE5/WIN */ voice-family: "\"}\""; voice-family:inherit; width:40%; 
		/* actual value */ margin:5px; padding:5px; z-index:99;
	font-size:90%;  color:#000000;
	line-height: 1.4em; background-color: white; 
	border-left-width: 1px; border-left-style: solid; border-left-color: #999966; }

/* OLD MIDDLE-R FORMATING ---> float: right; width: 40%; border-left-style: solid; border-left-color: #cccc99; border-left-width: 1px; padding-left:10px; margin-left:10px; } */
 
	#middle-l { position:relative; line-height: 1.4em; background-color: white; font-size:100%;  color:#000000; padding-top:10px; padding-left:10px; padding-right:10px; 
		/* for IE5/WIN */ voice-family: "\"}\""; voice-family:inherit; width:55%; 
		/* actual value */ margin:5px; padding:5px; z-index:99; 
			}

/* OLD MIDDLE-L FORMATTING ---> top: 0; width: auto; padding-left:10px; padding-right:10px; } */


/* must find these again */

	#middle-b { margin-left: 0%; margin-right: 0%; width: auto; font-size: 100%; 
			border-left-style: solid; border-left-color: #cccc99; border-left-width: 1px; 
			border-right-style: solid; border-right-color: #cccc99; border-right-width: 1px; }
 
	#middle2 { margin-left: 225px; width: auto;  }
 
/* when the page has left column navigation only */
	#middle3 { margin-left: 225px; width: auto;  }
 
/* main content link formatting */


a.linkitem { font-size: 100%; font-weight:600; color: #0000b2; text-decoration: none; }
a.linkitem:visited { font-size: 100%; color: #331462; font-style: italic; }
a.linkitem:hover { color: #000066; border-top: #cc0000 1px dotted; border-bottom: #000000 1px dotted; }
 
 
a.tinylink { color: #000000; text-align: left; text-decoration: none; }
a.tinylink:visited { color: #331462; font-style: italic; }
a.tinylink:hover {  border-top: #000000 1px dotted; border-bottom: #000000 1px dotted; }
 
/* footnote styling for three levels of indent */

	.footnote { font-size: 80%; }
	p.footnote { padding-left: 30px; }
	.footnote2 { font-size: 80%; }
	p.footnote2 { padding-left: 45px; }
	.footnote3 { font-size: 80%; }
	p.footnote3 { padding-left: 60px; }

/* small text styling */
 
.smallish { font-size: 85%; }

/* quote styling for three levels of indent (left and right) */
 
.quote { font-size: 100%; font-style: italic; margin-left: 5%; margin-right: 5%; width: auto; }
.quote2 { font-size: 100%; font-style: italic; margin-left: 8%; margin-right: 8%; width: auto; }
.quote3 { font-size: 100%; font-style: italic; margin-left: 10%; margin-right: 10%; width: auto; }

dt { margin-left: 5%; }
dd { font-size: 100%; margin-top: 5px; margin-bottom: 15px; width: auto; }

 
.menutitle { font-size: 100%; font-style: italic; font-weight: bold; }
 
.centre { text-align: center; }
 
.subpara { margin-left: 8%; } 
.subsubpara { margin-left: 15%; }
 
.blocktext { font-size: 100%; color: Black; background-color: #cccc99; margin-left: 5px; margin-right: 5px; padding:15px; }
 
span.emphasis { font-size: 100%; font-weight: bold; font-style: none; }
span.noemph { font-size: 75%; font-weight: normal; font-style: none; }
 
span.centre { text-align: center; }

span.indent10 { margin-left: 3%; }
span.indent20 { margin-left: 5%; }
span.indent50 { margin-left: 10%; }
span.indent100 { margin-left: 15%; }
 
/* pullquote formatting */

.pullquote {
float: right; margin-left: 5px;
padding:15px; width: 260px;
margin-top: 15px; margin-bottom: 25px;
border-top-width: 15px; border-bottom-width: 25px;
border-top-style: solid; border-bottom-style: solid;
border-top-color: #333300; border-bottom-color: #333300;
background-color: #cccc99;

font-size: 1.2em; color: #000000; text-align: left; line-height: 1.4em;
font-family: Baskerville, ‘Times New Roman’, Times, serif; 
font-weight: normal;
}

div.pullquote p {
font-size: 1.2em; color: #000000; text-align: left; line-height: 1.5em;
font-family: Baskerville, ‘Times New Roman’, Times, serif; 
font-weight: normal;
}

.pullquotesource { font-style: italic; width: auto; margin-left:15px; margin-right:5px; }
 
/* battle honour name formatting*/
.bh { font-size: 120%; font-weight: bold; text-align: center; color: red; font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; }
.bhe { font-size: 120%; font-weight: bold; text-align: center; color: red; background-color: #FFd700; font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; }
.bh_left { font-size: 100%; text-align: left; }
 
/* indenting text */
.indent10 { margin-left: 10px; }
.indent20 { font-size: 100%; margin-left: 20px; }
.indent50 { font-size: 100%; margin-left: 50px; }
.indent75 { font-size: 100%; margin-left: 75px; }
.indent90 { font-size: 100%; margin-left: 90px; }
.indent100 { font-size: 100%; margin-left: 100px; }
.indent150 { font-size: 100%; margin-left: 150px; }
 
/* ordered list upper roman numerals */
.uproman { list-style-type: upper-roman; }
 
/* minimalist table styles */
table, td, th { border: 1px solid #000000; border-collapse:collapse; margin:0; padding:0; }
table { border: 1px; }
 
td,th { padding:.2em .4em; vertical-align:top; }
thead th { font-weight:bold; vertical-align:center; border-bottom:1px solid #000000; margin-bottom:5px; text-align: center; background-color: khaki; }
tbody th,td { border-right:1px solid #000000; }
tbody td,tbody th { padding: 1px 2px; }
tbody th { border-left:1px solid #000000; }
tfoot td,tfoot th { margin-top:5px; border:none; border-top:1px solid #000000; }
 
table a:link { color:#000066; }
table a:visited { color:#330066; }
table a:hover { text-decoration:none; }
table a:active { color:#000000; }
 
/* to centre a table */
table.center { 	margin-left:auto; margin-right:auto; }
 
/* figures floated within content div */
div.figureright { float: right; margin: 0.3em; padding: 0.3em; }
div.figureright p { text-align: center; font-style: italic; font-size: smaller; text-indent: 0; color: #000000; }

div.figureleft { float: left; margin: 0.3em; padding: 0.3em; }
div.figureleft p { text-align: center; font-style: italic; font-size: smaller; text-indent: 0; color: #000000; }
 
.figureleft200 { float: left; width: 200px; border: 1px #0000b2 solid; margin: 0.3em; padding: 0.3em; background-color: #ffffff; }
div.figureleft200 p { text-align: left;  font-style: italic; font-size: smaller; text-indent: 0; color: #000000; } 

.figureright200 { float: right; width: 200px; text-align: centre; }
div.figureright200 p { text-align: left; font-style: italic; font-size: smaller; text-indent: 0; color: #000000; } 
 
div.figureright200bh { float: right; width: 200px; border: 1px #0000b2 solid; background-color: #ffffff; margin: 0.3em; padding: 0.3em; text-align: center; }
 
div.figureright125 { float: right; width: 125px; border: 1px #0000b2 solid; margin: 0.3em; padding: 0.3em; background-color: #ffffff; }
div.figureright125 p { text-align: center; font-style: italic; font-size: smaller; text-indent: 0; color: #000000; } 

div.figureright210 p { text-align: center; font-style: italic; font-size:80% color: #000000; }
div.figureright210 { border: 1px #0000b2 solid; background-color: #ffffff; float: right; width: 210px; margin: 0.2em; padding: 0.2em; text-align: center; }
 
div.figureright250 p { text-align: left; font-style: italic; font-size: 100%; text-indent: 0; color: #000000; } 
div.figureright250 { float: right; width: 250px; border: 1px #0000b2 solid; background-color: #ffffff; margin: 0.3em; padding: 0.3em; text-align: center; }
 
div.figureright160 p { text-align: center; font-style: italic; font-size:80% color: #000000; }
div.figureright160 { float: right; width: 160px; border: 1px #0000b2 solid; background-color: #ffffff; margin: 0.2em; padding: 0.2em; text-align: center; }

div.figureright175 {
  float: right;
  width: 185px;
  margin-right: 0.3em;
  margin-left: 1.5em;
  padding: 0.3em;
  background-color: white;

}
 
div.figureright260 p { text-align: center; font-style: italic; font-size:80% color: #000000; }
div.figureright260 { border: 1px #0000b2 solid; background-color: #ffffff; float: right; width: 260px; margin: 0.2em; padding: 0.2em; text-align: center; }
 
/* 610 px wide centred image div with caption area, used for rcr great war medal pics, etc. see fitzwalter for example  */
div.figurecenterwide { border: 1px #0000b2 solid; width: 90%; padding: 0.2em; margin-left:auto; margin-right:auto; background-color: #ffffff; text-align: center; } 
div.figurecenterwide p { text-align: center; font-style: italic; font-size:80% padding-bottom: 1em; color: #000000; }

/* 610 px wide centred TEXT div with caption area, used for rcr great war medal pics, etc. see research ww1 soldiers for example  */
div.textboxcenterwide { border: 1px #0000b2 solid; width: 90%; padding: 0.2em; margin-left:auto; margin-right:auto; background-color: #ffffff; } 
div.textboxcenterwide p { text-align: left; font-size: 80%; font-style: italic; color: #000000; }

/* 450 px wide centred image div with caption area, used for rcr great war medal pics, etc. see fitzwalter for example  */
div.figurecenter450wide { border: 1px #0000b2 solid; width: 450px; padding: 0.2em; margin-left:auto; margin-right:auto; background-color: #ffffff; text-align: center; } 
div.figurecenter450wide p { text-align: center; font-style: italic; font-size:80% padding-bottom: 1em; color: #000000; }
 
/* 310 px wide centred image div with caption area, used for rcr great war medal pics, etc. see 1883 badges for example  */
div.figurecenter300wide { border: 1px #0000b2 solid; width: 310px; padding: 0.2em; margin-left:auto; margin-right:auto; background-color: #ffffff; text-align: center; } 
div.figurecenter300wide p { text-align: center; font-style: italic; font-size:80% padding-bottom: 1em; color: #000000; }

/* 160 px wide centred image div with caption area, used for seely-smith  */
div.figurecenter160wide { border: 1px #0000b2 solid; width: 160px; padding: 0.2em; margin-left:auto; margin-right:auto; background-color: #ffffff; text-align: center; } 
div.figurecenter160wide p { text-align: center; font-style: italic; font-size:80% padding-bottom: 1em; color: #000000; }

/* faking a right hand column in the centre div */

div.fauxrightcol p { text-align: left; }
div.fauxrightcol { border-left: 2px #bbbb88 solid; float: right; width: 250px; margin-left: 10px; padding: 0 10px 20px 10px; text-align: left; }serif

/* styling for quote box (qbox) */
.qbox { display:block }
 
.qbox * { display:block; height:1px; overflow:hidden; font-size:.01em; background:#cccc99 }
.qbox1 { margin-left:3px; margin-right:3px; padding-left:1px; padding-right:1px; border-left:1px solid #ffffbb; border-right:1px solid #ffffbb; background:#cccc99 }
.qbox2 { margin-left:1px; margin-right:1px; padding-right:1px; padding-left:1px; border-left:1px solid #ffffbb; border-right:1px solid #ffffbb; background:#cccc99 }
.qbox3 { margin-left:1px; margin-right:1px; border-left:1px solid #ffffbb; border-right:1px solid #ffffbb; }
.qbox4 { border-left:1px solid #ffffbb; border-right:1px solid #eeeedd }
.qbox5 { border-left:1px solid #ffffbb; border-right:1px solid #eeeedd }
.qboxfg { background:#cccc99; padding:5px; }

 
/* formatting for war diary nav block */
#diarynav { float: right; width: 100px; border: 2px #998444 solid; margin:5px; padding:10px; background-color: #ffffff; font-size: .75em; }
 
/*  great war table formatting  */
th { }
tr.gw1 td { background-color: #ffffff; color: black; }



/* bits and pieces that may not be needed after redesign */
 
	.column-in { margin:0; padding: 10px 10px 10px 10px; }
	.cleaner { clear:both; height:1px; font-size:1px; border:none; margin:0; padding:0; background:transparent; }

	/* main content area */
		#main1 { margin:0; padding:0; background: white; width: 100%; }
		#main2 { margin:0; padding:0; background: white; width: 100%; }

/* right hand column */

	#right li { color: #000000; font-variant: normal; text-transform: none; font-weight: normal; text-align: left; margin-left: -5px; }