/*

	Theme Name: Barebones
	Author: James Young
	Website: http://www.welcomebrand.co.uk
	Twitter: @welcomebrand
	Version: 2.0
	Description: A stripped down, style free (well, nearly!) minimal WordPress theme for developing on top of.
	
	CONTENTS
	-------------
	- Global resets
	- Global typography & layout rules
	- Page styles
	- Post styles 
	- General bits 
	
	- Media queries
	
*/

/* 01 START : Global reset styles */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent}article,aside,dialog,figure,footer,header,hgroup,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;border:0;vertical-align:baseline;background:transparent}ins,mark{background:#333;color:#fff;text-decoration:none}mark{padding:0 .2em;}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}::-moz-selection,::-webkit-selection,::selection {text-shadow:none;background:#333;color:#fff;}.cf:before,.cf:after{content:"";display:table;}.cf:after{clear:both;}.cf{zoom:1;}[type=submit]{cursor:pointer;}
/* 01 END : Global reset styles */

/* START : Global rules */
* { 
	-webkit-box-sizing:  border-box; 
	-moz-box-sizing: border-box; 
	box-sizing:  border-box; 
	}

html {
	font-size: 100%; /* Set a 16px base size */
	}

body {
	margin: 0 auto;
	font-size: 16px;
	font-size: 1rem;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Set vertical rhythm */
h1,h2,h3,h4,h5,h6,hgroup,ul,ol,dd,p,figure,pre,table,fieldset,hr {
    margin-bottom: 24px;
	margin-bottom: 1.5rem; /* 24px equivalent/fallback */
	}	

h1, h2, h3, h4, h5, h6 {
	line-height: normal;
	}	

blockquote { }
	blockquote cite { }

p { }	

a {
	color: #2c2863;
}	
	a:hover { }	

img, 
a img {
	max-width: 100%;
	}

figure { }
	figcaption { }

.alignleft,
.alignright {
	/* left and right float triggered on bigger screens */
	float: none;
	}

nav, article {
	width: 800px;
	margin: 0 auto;
}

ul#menu-main {
	border-radius: 5px;
	background: #2dd9cb;
	line-height: 44px;
	height: 44px;
}

ul#menu-main > li {
	width: 156px;
	float: left;
}

ul#menu-main > li > a {
	width: 156px;
	border-left: 1px solid white;
	text-align: middle;
	line-height: 44px;
	color: white;
	text-decoration: none;
	font-weight: bold;
	text-align: center;
	display: block;
}

ul#menu-main > li > a:hover,
ul#menu-main > li.current-menu-item > a,
*:not(.page-id-45) ul#menu-main > li.current-menu-parent > a {
	background: white;
	color: #2dd9cb;
}

ul#menu-main > li:first-child > a {
	border: 0;
}

ul.sub-menu {
	display: none;
	width: 800px;
	margin-left: -100px;
}

.menu-item-54 ul.sub-menu {
	margin-left: -250px;
}

ul.sub-menu > li {
	float: left;
}

ul.sub-menu > li > a {
	line-height: 32px;
	color: #2c2863;
	font-weight: bold;
	text-decoration: none;
	padding: 0 10px;
	margin: 10px;
	border-radius: 5px;
	text-align: center;
	display: block;
}

ul.sub-menu > li.current-menu-item > a {
	background: #2c2863;
	color: white;
}

ul#menu-main > li.current-menu-item > ul.sub-menu,
ul#menu-main > li.current-menu-parent > ul.sub-menu {
	display: block;
}

div.gallery {
	display: none;
}

article {
	clear: both;
	margin-bottom: 20px;
}

h1 {
	font-size: 20px;
	color: #2c2863;
}

h3 {
	font-size: 16px;
	color: #2c2863;
}

article ul {
	list-style: square;
	margin-left: 20px;
}

article ol {
	margin-left: 20px;
	line-height: 1.5em;
}

article ul.ticks {
	width: 30%;
	display: inline-block;
	list-style: none;
	vertical-align: top;
}

article ul.ticks > li {
	background: url('assets/img/tick.png') no-repeat left center;
	line-height: 26px;
	padding: 0 0 0 30px;
}

div#full {
	width: 800px;
	margin: 6px auto 3px auto;
	position: relative;
}

div#full img {
	width: 800px;
}

div#show {
	overflow-x: auto;
	width: 800px;
	margin: 0 auto 10px auto;
	height: 160px;
	white-space: nowrap;
}

div#show img {
	border: 3px solid white;
	border-radius: 3px;
}

div#show img.selected {
	border: 3px solid #2dd9cb;
}

.left, .right {
	line-height: 300px;
	font-size: 50px;
	font-weight: bold;
	color: white;
	display: none;
	width: 50%;
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;
	vertical-align: middle;
}

.right {
	left: 50%;
	text-align: right;
}

div#full:hover .left,
div#full:hover .right {
	display: block;
}

footer {
	width: 800px;
	margin: 40px auto;
	font-size: 0.75em;
	color: #808080;
}

/* END : Global rules */



/* START : Page styles */

/* END : Page styles */



/* START : Post styles */

/* END : Post styles */



/* START : General bits */

/* END : General bits */


/* START : Media Queries */

	/* I've added some arbitrary breakpoints to get you started, you don't have to use these - you can remove, edit or add to them however you like. They're just a guide. */

/* 480px equivalent breakpoint */
@media only screen and (min-width: 30em) { 
}

/* 600px equivalent breakpoint */
@media only screen and (min-width: 37.5em) { 
}

/* 768px equivalent breakpoint */
@media only screen and (min-width: 48em) { 
.alignleft,
.alignright {
	float: left;
	display: inline;	
	}

	.alignright {
		float: right;
	}
}

/* 1024px equivalent breakpoint */
@media only screen and (min-width: 64em) { 
}

/* 1260px equivalent breakpoint */
@media only screen and (min-width: 78.75em) { 
}
/* END : Media Queries */


/* PRINT STYLES */

@media print {
	/* If you're going to have a print stylesheet, now's the time */
}