body		{background-color: #e5e5e5;
			background-image:url('tiling_orpgsoc.jpg');
			background-size: 33%;
			background-blend-mode:overlay;}

div.centpos	{width: 80%;
			 margin-left: 10%; margin-right: 10%;
			 position: relative;} /*This is a positioning class for the elements on the page - main, header, footer, and menu */
			 
/*--- HEADER --- */

#header		{background-color: #DBBDA0;
			height: fit-content;
			border-style: solid solid hidden solid;
			border-width:2px;
			border-color:#333333;
			}

/*This styles the standard H1 tag within the header to create the 'OURPGSoc' title */
#header h1			{font-family: Century Gothic, CenturyGothic, Apple Gothic, sans-serif; font-size: calc(20px + 6vw); font-variant: small-caps;
			color: #4F7964;
			padding: 0; margin: 0 0 0 10px;
			text-shadow:1px 1px 2px #444444;}
			
#header	a	{font-weight: bold; text-decoration: none; padding: 0; margin: 0; background: none;}

#header a:link, #header a:visited	{color: #4F7964; background: none;}

#header a:hover, #header a:active	{color: #FFFFFF; background: none;}
			
/*This styles the standard H2 tag within the header to create the 'Oxford University Role Playing Game Society' subtitle. */
#header h2			{font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif; font-size: calc(2px + 3vw); font-variant: small-caps;
			color: #ececec; padding: 10px 0 0 10px; margin: 0;
			text-shadow:1px 1px 1px #444444;}

/*This creates the coloured first letter effect on the subtitle using the standard BOLD tag*/
/*#header	b	{color: #227D4F; font-style: normal;}*/	

#header img	{height: 100%;
			object-fit: contain;
			position:absolute;
			right:0px;
			top:0px;}

/*--- END OF HEADER ---*/

/*--- MENU ---*/

#menu		{background-color: #DBBDA0;}

/* This removes bullets from the list and sets the font, background etc for the menu. */
#menu ul	{list-style-type: none;
			margin: 0; padding: 0; width: 100%;
			font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif; background-color: #DBBDA0; font-variant: small-caps;
			float: left;
			border-style:hidden solid hidden solid;
			border-width:2px;
			border-color:#333333;
			font-size:calc(5px + 1.2vw);}

/* This arranges the list items horizontally instead of vertically. */			
#menu li	{display: block; float: left;
		}
/* This styles the first item on each list (the header) with different colours but the same dimensions as the links that follow (the border width is how it is lining up, don't change it!) */
#menu li.first	{padding: 4px; border-style: solid; border-color: #DBBDA0;
						border-width: 0px 0px 2px 0px;
						width: 6em; color: #000000; background-color: #FFFFFF;}

/* This sets all the basic style qualities for the link boxes in the menu - border, text colour, padding etc.*/						
#menu a		{display: block; 
			text-decoration:none; padding: 4px; 
			border-style: solid; border-color: #DBBDA0;
			border-width: 0px 1px 2px 1px;}

/* TEMPORARY COLOUR CHANGE FOR SITE COMPLETION */

#menu a.temp	{background-color:#00E6E1;}
			
/* This gives the menu items their green background. */
#menu a:link, #menu a:visited	{background-color:#4F7964;color:#FFFFFF;}

/* This gives the menu items the white background when you hover over or click them. */
#menu a:hover, #menu a:active	{background-color:#FFFFFF;color:#000000;}
	
/*--- END OF MENU ---*/

/*--- MAIN CONTENT ---*/

#main		{background-color: #FFFFFF;
			 clear: both; padding-bottom: 2em;
			 font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
			border-style:hidden solid hidden solid;
			border-width:2px;
			border-color:#333333;}
			 
#main	h2	{font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif; font-size: 1.5em;
			 padding-top: 10px; padding-left: 10px;  font-variant: small-caps;}

#main	h3	{font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif; font-size: 1.25em;
			padding-top: 5px; padding-left: 10px; font-variant: small-caps;}

#main	h4	{font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif; font-size: 1em;
			padding-left: 2em; padding-right: 2em; padding-top: 5px; margin-bottom: 0px;}

#main	p	{
			padding-left: 2em; padding-right: 2em; padding-top: 0.5em; padding-bottom: 0.5em; margin: 0;
			clear: both;}
			
#main ul		{list-style-type: circle;
			padding-left: 2em; margin-left: 1.5em;}

#main	hr	{border: 1px solid #5C1320;
			width: 80%;}
			
#main	a	{font-weight: bold; text-decoration: none; background: none;}

#main a:link	{color: #227D4F; background: none;}

#main a:visited {color: #87B69B; background: none;}

#main a:hover, #main a:active	{color: #00411E; text-decoration: underline; background: none;}

/*--- END OF MAIN CONTENT ---*/


/*--- ARCHIVE Embedded Google Doc Formatting ---*/

#archive	{padding: 0; margin: 30px; border: 2px solid #5C1320;
			width: 90%; height: 500px;}

/*--- end of archive ---*/

/*--- Some special styling for the Committee List to avoid using tables (it's a definition list instead) */

dl	{list-style-type: none;
			margin-left: 50px;
			clear: both;}

dl dt		{font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif; background-color: #4F7964; 
			padding: 5px; margin: 2px;
			float: left; clear: left;
			}

dl dd		{font-family: Century Gothic, CenturyGothic, ApplieGothic, sans-serif; background-color: #EEEEEE;
			padding: 5px;  margin: 2px;
			float: left; }
			
dl.comm	dt	{font-variant: small-caps;
			height: 1em; width: 20em;
			}

dl.comm	dd	{height: 1em; width: 20em;}

dl.lists	dt	{font-weight: bold;
			height: 1em; width: 6em;}

dl.lists	dd	{height: 1em; width: 25em;}

/*--- End Committee List Style ---*/


/*--- FOOTER ---*/

#footer		{background-color: #DBBDA0;
			border-style:hidden solid solid solid;
			border-width:2px;
			border-color:#333333;}

#footer	p	{font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif; color: #000000; font-size: 0.75em;
			padding-left: 2em; padding-right: 2em; padding-top: 0.5em; padding-bottom: 0.5em; margin: 0;}

#footer	a	{font-weight: bold; text-decoration: none;}

#footer a:link	{color: #227D4F;}

#footer a:visited {color: #87B69B;}

#footer a:hover, #footer a:active	{color: #ffffff; text-decoration: underline;}


/*--- END OF FOOTER ---*/