@charset "utf-8";
/* 
      ___           ___          _____    
     /  /\         /__/\        /  /::\   
    /  /::\       _\_ \:\      /  /:/\:\  
   /  /:/\:\     /__/\ \:\    /  /:/  \:\ 
  /  /:/~/:/    _\_ \:\ \:\  /__/:/ \__\:|
 /__/:/ /:/___ /__/\ \:\ \:\ \  \:\ /  /:/
 \  \:\/:::::/ \  \:\ \:\/:/  \  \:\  /:/ 
  \  \::/~~~~   \  \:\ \::/    \  \:\/:/  
   \  \:\        \  \:\/:/      \  \::/   
    \  \:\        \  \::/        \__\/    
     \__\/         \__\/                  
           jack@rightwebdesign.co.uk
*/

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, sub, sup, tt, var,
    u, i, center, strong, b, 
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 1em;
        line-height: 1.375em;
        font: inherit;
        font-weight: normal;
		Vertical-align: baseline;
		font-family: lora, helvetica, arial, serif;
        list-style: none;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	body {
		line-height: 1;
	}
    blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after, 
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	/* Other stuff and things */
	article ol {
		list-style: decimal;
        padding-left: 30px;
	}
    article ul {
		list-style: disc;
        padding-left: 20px;
	}
    article li {
        margin-bottom: 3px;
    }
    em, i {
        font-style: italic;
    }
    strong, b {
	    font-weight: bold;
    }
	
    /* Main basic layout */

	.content {
		width: 1184px;
		margin-left: 8px;
		margin-right: 8px;
		margin: auto;
		overflow: hidden;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
	}
    .box { 
		-moz-box-sizing: border-box; 
		box-sizing: border-box; 
		float: left; 
	}
	.right { 
        float: right; 
    }
	.end {
		content: "."; 
	    visibility: hidden; 
	    display: block; 
	    height: 0; 
	    clear: both;
	}
	.b1 { width: 6.25%; }
	.b2 { width: 12.5%; }
	.b3 { width: 18.75%; }
	.b4 { width: 25%; }
	.b5 { width: 31.25%; }
	.b6 { width: 37.5%; }
	.b7 { width: 43.75%; }
	.b8 { width: 50%; }
	.b9 { width: 56.25%; }
	.b10 { width: 62.5%; }
	.b11 { width: 68.75%; }
	.b12 { width: 75%; }
	.b13 { width: 81.25%; }
	.b14 { width: 87.5%; }
	.b15 { width: 93.75%; }
	.b16 { width: 100%; }
	.third { width: 33.333%; }
	.twothird { width: 66.666%; }

    /* Media queries for responsive design layout. 
       Not indented like the rest because */
	
@media only screen and (max-width: 1199px) {
 .content { width: 944px; }
}
@media only screen and (min-width: 850px) and (max-width: 1024px) and (orientation: landscape) {
 .content { width: 850px; }
}
@media only screen and (min-width: 850px) and (max-width: 1024px) and (orientation: portrait) {
 .content { width: 850px; }
}
@media only screen and (min-width: 767px) and (max-width: 849px) {
 .content {  width: 750px; }	
}
@media only screen and (max-width: 767px) {
 .content  { width: 100%; padding: 0 7px; }
 .b1, .b2, .b3, .b4, .b5, .b6, 
 .b7, .b8, .b9, .b10, .b11, 
 .b12, .b13, .b14, .b15, .b16, 
 .third, .twothird { width: 100%; }
}