@charset "utf-8";
/* CSS Document */
body {
	font-size: 1em;
	font-family: cambria, serif;
	background-color: #f8f8f8;
	margin: 0;
	padding: 0;
	color: #535353;
}

/* ~~ ==== ELEMENTS ==== ~~ */

dl { 
	padding: 0;
	margin: 0;
}

ul {
    list-style-type:disc; color:#0045aa;

}
li span {
  color: #535353; /* text color */
}

a img { border: none; }


/* ~~ ==== LINKS ==== ~~ */

a:link {
	color:#353535;
	text-decoration: none; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
	color: #353535;
	text-decoration: none;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	color: #6f6f6f;
	text-decoration: none; }
	
	.txtlnk:hover { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	color: #6f6f6f;
	text-decoration: none;
	 background-image: url('images/linkbg.png');
     background-repeat: no-repeat;
     background-position: 50% 50%;  }

@font-face {
    font-family: "Oswald";
    src: url(https://louisenarey.co.uk/OSWALD-REGULAR.otf) format("opentype");
}

@font-face {
    font-family: "Source Sans Semi";
    src: url(SourceSansPro-Semibold.otf) format("opentype");
}

@font-face {
    font-family: "Source Sans Black";
    src: url(SOURCESANSPRO-BLACK.otf) format("opentype");
}

h1 {
	color: #353535;
	text-transform: normal;
	font-family: "Oswald", Calibri, Arial, Verdana, Helvetica, sans-serif;
	font-size: 1.6em;
	font-weight: normal;
	 text-align: center;
	 letter-spacing: 2px;
	margin: 0px 0px 0px 0px;
	padding: 8px 8px 8px 8px;
	background-image:url(none);
	}

h2 {
	color: #353535;
	font-family: "Oswald", Calibri, Arial, Verdana, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-align: center;
	margin: 0px 0px 0px 0px;
	padding: 8px 0px 4px 0px;
 
}

h3 {
	font-size: 0.8em;
	font-family: cambria, serif;
	font-weight: normal;
	margin: 0;
	padding: 0;
	color: #535353;
	text-align: center;
	margin: 0px 0px 0px 0px;
	padding: 8px 0px 8px 0px;
 
}

p {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	padding-right: 0px;
	padding-left: 0px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
	margin: 0px 0px 0px 0px;
	padding: 8px 8px 8px 8px;;
	text-align:center;

}

p.cl {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	padding-right: 0px;
	padding-left: 0px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
	margin: 0px 0px 0px 0px;
	padding: 8px 8px 8px 8px;;
	text-align:left;

}

/* ~~ Header ~~ */

.headercontainer {
	background-color: #f8f8f8;
	width: 100%;
	margin: 0 auto;
	padding-bottom: 0px;
	position:relative;
}

.header {
	background-color: #f8f8f8;
	width: 60%;
	max-width: 1000px;
	overflow:hidden;
	min-width: 200px;
	margin: 0 auto;
	padding-top: 10px;
		padding-bottom: 10px;
}

.logo{
	width: 100%;
	float: left;
	margin: 0 auto;
	padding: 0px 0 0px 0;
			
}

/* ~~ Menu ~~ */
.menu {width: 100%
		margin: 0 auto;
		background-color: #f8f8f8;
		padding: 0;
	 	
}
	

/* Add a black background color to the top navigation */
.menunav {
    background-color: #f8f8f8;
    overflow: hidden;
	margin: 0 auto;
}

/* Style the links inside the navigation bar */
.menunav a {
    float: left;
    display: block;
    color: #6f6f6f;
	font-family: "Oswald", Calibri, Arial, Verdana, Helvetica, sans-serif;
	 font-weight:normal;
	 text-transform: uppercase;
	 letter-spacing: 2px;
    text-align: center;
    padding: 8px 8px;
    text-decoration: none;
    font-size: 1.1em;
	
}

.table {
	display: table;   /* Allow the centering to work */
	margin: 0 auto;
}

/* Change the color of links on hover */
 .menunav a:hover {
 color: #535353;
 border-bottom: 0px #0045aa;
 background-image: url('images/menubg.gif');
     background-repeat: no-repeat;
     background-position: 50% 50%; 

}

/* Add an active class to highlight the current page */
.active {
    background-color: #535353;
	color: #0045aa;
	border-bottom: solid 4px #0045aa;
}

/* Hide the link that should open and close the topnav on small screens */
 .menunav .icon {
    display: none;
} 

.contentcontainer {
	background-color: #fff;
	width: 100%;
    overflow: auto;
	margin: 0 auto;
	padding: 0px;
}
.content {
	padding: 10px 0 10px 0;
	background-color: #fff;
	width: 60%;
	overflow: auto;
	max-width: 900px;
	min-width: 200px;
	margin: 0 auto; 
}

.content2 {
	padding: 0px;
	width: 100%;
	margin: 0 auto;
	display: block;
}

.mobile {
	padding: 0px;
	width: 100%;
	margin: 0 auto;
	display: none; 
}

.folio {
	padding: 0px;
	background-color: #fff;
	width: 41.5%;
	float: left;
	margin: 0 auto; 
}
.folio2 {
	padding: 0px;
	background-color: #fff;
	width: 28.3%;
	float: left;
	margin: 0 auto; 
}

.folio3 {
	padding: 0px;
	background-color: #fff;
	width: 56.5%;
	float: left;
	margin: 0 auto; 
}

.padborder {padding: 8px;}

div.rollover img:not(.rollover) {display: none;}
div.rollover:hover img:not(.rollover) {display: inline;}
div.rollover:hover img.rollover {display: none;}

.foliosmll {
	padding: 0px;
	background-color: #fff;
	width: 50%;
	float: left;
	margin: 0 auto; 
}

.foliotext {
	padding: 0px 0 15px 0;
	background-color: #fff;
	width: 100%;
	float: left;
	margin: 0 auto; 
}


.footer {
    background-color: #f8f8f8;
    bottom: 0;
    min-height: 50px;
    width: 100%;
}

}


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .menunav a:not(:first-child) {display: none;}
  .menunav a.icon {
    float: right;
    display: block;
  }
  .table {
	display: inline;
	margin: 0 auto;}

}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
    .menunav a:not(:first-child) {display: none;}
  .menunav a.icon {
    float: right;
    display: block;
  }
  .table {
	display: inline;
	margin: 0 auto;
}

.menunav a:hover {
 color: #535353;
 border-bottom: 0px #0045aa;
 background-image: none;
}
  
  .menunav.responsive {position: relative;}
  .menunav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .menunav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .menunav.collapse {
  display: block;
}

.content, .header {
	width: 100%;
	min-width: 200px;
}


.content2 {display: none;}
.mobile {display: block;}
}

@media screen and (max-width: 400px) {

.padborder {padding: 6px;}
.content {paggin: 5px 0 5px 0;}
}