@charset "utf-8";

/* CSS Document */



/* Overall features */

body {

	background-color: #ecede9;

}



/* Set all content to be in centre of the page */

.header, .topnav, .columns, .footer {

	float: none;

	margin: 0 auto;

	padding: 0;

	max-width: 3000px;

}

/* On smaller devices, make sure there is still some whitespace */

@media (max-width: 1333px) {

    .header, .topnav, .columns, .footer {

		max-width: 90%;

    }

}



/* Site header */

.header {

  background-color: #525252;

  padding-bottom: 20px;

  position: relative;

}

.topnav {

  overflow: visible;

  background: #232222;

  height: 37px;

  padding: 0;

}

.searchbar {

  position: absolute;

  bottom: 0;

  right: 0;

  width: 600px;

  padding: 50px 20px 0 0;

}

/* Change searchbar position on small devices */

@media (max-width: 980px) {

	.header {

	  padding-bottom: 65px;

	}

    .searchbar {

	  left: 0;

	  right: auto;

	  padding: 0;

    }

}

/* Ensure that global table styles don't affect searchbar */

.searchbar td {

	padding: 0;

}

.searchbar table {

	border: none;

}



/* Top navigation menu */

.topnav ul {

  list-style: none;

  padding: 0;

  margin: 0;

}

/* Drop-down elements */

.topnav ul li {

  display: block;

  position: relative;

  float: left;

  border: 0px outset #FFFFFF;

  border-right: 0px outset #000000;

  border-bottom: 0px outset #000000;

  background-color: #333333;

  padding: 0;

}

/* Links in drop-downs */

.topnav ul li a {

  font-size: 14px;

  display: block;

  height: 35px;

  line-height: 35px;

  padding: 0 1em;

  text-decoration: none;

  white-space: nowrap;

  color: #F1F1F1;

}

/* Hide dropdowns */

.topnav li ul { 

  display: none; 

  visibility: hidden;

  opacity: 0;

  z-index: 100;

  -webkit-transition: opacity 0.5s;

  transition: opacity 0.5s;

}

/* Change colour on hover */

.topnav ul li a:hover {

  background: #DB8C30; 

}



/* Display the dropdown on hover*/

.topnav li:hover > ul {

  display: block;

  visibility: visible;

  position: absolute;

  opacity: 1;

}

.topnav li:hover li {

  float: none;

}

.topnav li ul li {

  border-top: 0;

}

/* Display second level dropdowns to the right */

.topnav ul ul ul {

  left: 100%;

  top: 0;

}

/* Reduce size of arrows on dropdown button */

.topnav .arrow {

	font-size: 11px;

    line-height: 0%;

	margin-left: 5px;

}



/*Main content columns */

.content-col, .side-col {

	background-color: #FFFFFF;

	padding: 0 1%;

	margin: 0;

	float: left;

	border-bottom: 2px solid #cccccc;

}

/* Set column widths */

.content-col {

	width: 90%;

	margin-right: 2%;

}

.side-col {

	width: 22%;

}

/* Responsive layout - makes the columns stack on top of each other instead of next to each other on small screens*/

@media (max-width: 600px) {

    .content-col, .side-col {

        width: 100%;

		margin-bottom: 2em;

    }

}



/*Main content columns */

/* Set up columns as a table */

.columns {

	margin-top: 2em;

	display: table;

	width: 100%;

}

.col {

	display: table-cell;

}

/* Spacing columns */

.col.side {

	background-color: rgba(0,0,0,0.00);

}

/* Clear floats after the columns */

.columns:after {

    content: "";

    display: table;

    clear: both;

}

/* Responsive layout - makes the columns stack on top of each other instead of next to each other on small screens*/

@media (max-width: 600px) {

    .column.side, .column.middle {

		display: block;

        width: 100%;

    }

}



/* Site footer */

.footer {

	background-color: #F7941E;

	text-align: center;

	color: #484848;

	font-size: 11px;

	margin-top: 3em;

	padding: 0.5em;

}