@font-face {
    font-family: dogood;  
    src: url(assets/fonts/JUSTDOGOOD-ITALIC.ttf);  
}

@font-face {
    font-family: deadstock;  
    src: url(assets/fonts/DeadStock-Demo.ttf);  
}


/* standardised box sizing across browsers */
* {
    box-sizing: border-box;
}
/* This rule resets a core set of elements so that they will appear consistent across browsers*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, ul, li{
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
}
/* now follows reset of same elements as required by particular website */

/* The body is the outermost layout component and contains the visible page content.*/
body {
	background-color: #efe9e9;
	color: #000000;
	font-family: Georgia;
	font-size: 1em;
	margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
	padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
	text-align: center;
	line-height:1.6em;
}
/* This is a wrapper for the complete page content. It is common to use the wrapper to constrain the width of the page content*/
#ux_wrapper {
	position:relative;
	margin-left: auto;
	margin-right: auto;
	text-align: left; /* Redefines the text alignment defined by the body element. */
	width: 960px;
	top:10px;
}
/* This is a wrapper for the page content, not including the footer. This allows interesting styling of the borders and seperation of the page content from externals in the footer, such as web designer, funding icons etc*/
#ux_container {
    width:100%;
    border:2px solid #F5ECCE;
    }
#ux_pageheader {
	position:relative;
    padding:0px;
    height:200px;
    background-color:#2f7eb9;
    border-radius: 25px;
    }
#ux_pageheader h1{
	font-family: "dogood";
	font-size:6em;
	text-align:center;
	padding-top:50px;
	padding-bottom:20px;
	color:#efe9e9;

}
#ux_pageheader h2{
	font-family: "deadstock";
	font-size:3em;
	text-align:center;
	padding-top:40px;
	padding-bottom:20px;
	color:#efe9e9;
}
#ux_pageheader p{
	text-align:center;
	color:#efe9e9;
}
#ux_main{
	width:960px;
	background-color:rgba(255,255,255,0.95);
}
#ux_contentblock {
    float:left;
    width:620px;
    padding:1px;
    font-size:1em;
    text-align:justify;
    }
#ux_menu {
	float:left;
	background:url('assets/img/site/menu_bg.jpg') repeat-x;
	font-size:1em;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	letter-spacing: 2px;
	text-transform: uppercase;
	border-top:1px solid #F5ECCE;
	border-bottom:3px solid #F5ECCE;
	height:40px;
	width: 100%;
}
/* menu tabs */
#ux_menu li a {
	color:#F5ECCE;
	font-family: Arial, 'Trebuchet MS', Tahoma, verdana, sans-serif;
	font-weight:bold;
	text-decoration:none;
	/*color: #1A2342;*/
}
#ux_menu li a:hover {
	background-color:#3B0B0B;
	text-decoration:underline;
}
#ux_menu li  a.current_page {
	text-decoration:underline;
}
/*dropdown*/
	#ux_menu  ul {list-style:none outside none;margin-right:0px;margin-left:20px;}
	#ux_menu  ul li {display: block;position: relative;float:left;padding:8px 15px 0px 0px;border-right:2px white;}
	#ux_menu  li ul {display: none;margin-left:0px;}
	#ux_menu  li:hover ul {display: block; list-style:none;position: absolute;background-color:#4e2323;}
	#ux_menu  li:hover ul li {display:block;width:100%;padding:5px 5px 0px 5px; white-space: nowrap;}

/* end dropdown */
/* end menu tabs */

#ux_content {
    float:left;
    width:580px;
    padding:20px;
    text-align:left;
    }

#ux_content h1{
	font-family: "arial";
	font-size:2em;
	text-align:center;
	padding-top:10px;
	padding-bottom:10px;

}
#ux_content h3{
	padding-top:10px;
}


#ux_content p{
	text-align:justify;
}

#ux_sidebar {
    float:right;
    width:260px;
    padding:10px;
    background-color:#2f7eb9;
    text-align:center;
    color:#efe9e9;
    border-radius: 25px;
    }

#ux_sidebar h3{
	padding-top:10px;
	text-align:center;    
}

#ux_sidebar a{
	color:#efe9e9;
}

#ux_sidebar ul{
	padding-left:10px;
	}
#ux_sidebar li{
	padding-left:10px;
}
#ux_sidebar img{
	width:200px;
}


#ux_backtotop {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100px;
  border: 3px solid #73AD21;
  background-color:#2f7eb9;
  color:white;  
}

#ux_backtotop a{
	color:white;
}