@import url(http://fonts.googleapis.com/css?family=Noto+Sans);

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, strong, sub, sup, tt, var,
b, u, i, center,
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: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* End of reset code */

/* 
Default CSS which applies if no media queries match
Note that this example is Mobile First 
i.e. assume it is a mobile device unless
a larger screen is detected 
*/


*, *::before, *::after {
/* 
This box-sizing model includes border and padding in the overall width
which makes it easier to achieve responsive layouts
*/
  box-sizing: border-box;
}

/* Class that can be used to force a newline by clearing floats (left & right)*/
.newline{
	clear:both;
}

html {
  min-height: 100%;
  padding: 0;
}


body {
  color: #435757;
  background-color:#ffffff;
/* Note the use of a web font here */
  font: 1em 'Noto Sans', sans-serif;
  padding: 0;
}

h1 {
  font: 2em 'Noto Sans', sans-serif;
  font-weight: bold;	
}


h2 {
  font: 1.6em 'Noto Sans', sans-serif;
  font-style: italic;
  margin-bottom:1em;
}

/*
Classes used to align images left or right on larger screens
For smaller screens, the images will be displayed full width
and text will not wrap round them
*/
.right
{
float:right;
width:100%;
border:0;
margin-top:0;
margin-bottom:0;
padding-top:0;
padding-bottom:0.5em;
padding-right:0;
margin-left:1em;
}

.left
{
float:left;
width:100%;
border:0;
margin-top:0;
margin-bottom:0;
padding-top:0;
padding-bottom:1em;
padding-right:1em;
padding-left:0;
}

/* 
Class used to prevent some images being 100% width on mobile screens
For example phone & image icons on Contact page
*/
.icon
{
width:20%;
border:0;
margin-top:0;
margin-bottom:0;
padding-top:0;
padding-bottom:1em;
padding-right:1em;
padding-left:0;
}

/*
Ensures that a paragraph directly after an iframe (often used in 3rd party code)
will start on a new line and not wrap around the iframe
*/
iframe > p {
	clear:both;
}

/*
Moves the "Connecting you to the world tagline"
to overlap the logo. This selector avoids use of another class.
Works because there is only one p tag in the header
*/
header p
{
	position:relative;
	left:15%;
	top:-5em;
	width:25%;
	z-index:2;
	font-weight: bold;
	font-size: medium;
	background-color: rgba(238,238,238,0.5);
}

/*
Small amount of padding to avoid text touching
side of mobile screen. Text justified for neatness.
*/

section#social{
	
}

section h1{
	padding-left:2%;
	padding-top:0.5em;
}

section p{
	padding-left:2%;
	padding-right:2%;
	text-align:justify;
	margin-bottom:1em;	
}

/*
Quotes e.g. from customers formatted differently
*/
p.quote
{
	margin-top:1em;
	margin-bottom:1em;
	margin-left:10%;
	width: 80%;
	font-style:italic;
	font-weight: bold;
	color: #ff9900;
}


/* Default value for mobile is that the menu is hidden */
nav {
	display: none;
}

/*
Hides the checkbox that controls the menu display
Try changing the left value to, say, 300px to see the checkbox working
*/
input {
  position: absolute;
  left: -9999px;
}

/*
This creates the menu button itself i.e. size, shape, colour and border
The text on the button is in the HTML
The hamburger lines are created in the label span CSS below
*/
label[for="menutoggle"]{
/*  display: block;*/
  display: inline-block;
  position: fixed;
  top: 0;
  right:0;
  margin: 0px;
/*  padding: 15px 65px 15px 30px;*/
  padding: 10px 50px 10px 15px;
  border: 0px solid #fff;
/*  border-radius: 100px;*/
  border-radius: 0px 0px 0px 20px;
  color: #fff;
  background-color: #6a8494;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, .2);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, box-shadow .2s;
}

label span { position: absolute; right: 5%; top: 45%; }

/* Creates the top line of hamburger */
label span:before {
  cursor: pointer;
  border-radius: 3px;
  height: 5px;
  width: 30px;
  background: #ffffff;
  position: absolute;
  display: block;
  content: '';
  transition: all 500ms ease-in-out;
  top: -10px;
}

/* Creates middle line of hamburger */
label span {
  cursor: pointer;
  border-radius: 3px;
  height: 5px;
  width: 30px;
  background: #ffffff;
  position: absolute;
  display: block;
  content: '';
  transition: all 500ms ease-in-out;
}

/* Creates bottom line of hamburger */
label span:after {
  cursor: pointer;
  border-radius: 3px;
  height: 5px;
  width: 30px;
  background: #ffffff;
  position: absolute;
  display: block;
  content: '';
  transition: all 500ms ease-in-out;
  top: +10px; 
}

/* Puts a small shadow on the menu button when hovered over */
label:hover, input#menutoggle:focus + label {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, .2);
}

/* Changes menu button background colour when the menu is visible */
input#menutoggle:checked + label {
  background-color: #ff0000;
}

/* Rotate top line of hamburger to form cross*/
input#menutoggle:checked + label span:before {
  top: 0;
  transform: rotate(45deg);
}

/* Hide middle line of hamburger */
input#menutoggle:checked + label  span{
  background-color: transparent;
}

/* Rotate bottom line of hamburger to form cross*/
input#menutoggle:checked + label span:after {
  top: 0;
  transform: rotate(-45deg);
}

/* Displays the menu when the menu button clicked */
input#menutoggle:checked ~ nav {
	display: block;
    transition: all 500ms ease-in-out;
	width:100%;
	margin-left: auto;
	margin-right: auto;
	border-top: solid 1px #cccccc;
	border-right: none;
	border-bottom: solid 1px #cccccc;
	border-left: none;
	background-color: #f0f0f0;
}

/* Formats the links in the nav bar */
nav a {
	display: block;
	width:100%;
	border-top: solid 2px #888888;
	border-bottom: solid 1px #eeeeee;
	padding: 5px 0px 5px 10px;
	background-color: #aaaaaa;
	color: #ffffff;
	text-decoration: none;
}

nav ul{
	margin-left:0;
}

nav ul li{
	list-style-type:none;
}
nav a:hover {
	text-decoration: none;
	font-weight: bold;
}

article, article.left {
	clear:both;
	border-top: 1px solid #435757;
}

article h1{
	font-size:1.4em;
	font-weight:bold;
	font-style:normal;
	margin-left:0.5em;
	margin-top:0.5em;
}

article h2{
	font-size:1.2em;
	font-weight:bold;
	font-style:normal;
	margin-left:1.0em;
}

article h3{
	font-size:1.0em;
	font-weight:bold;
	font-style:normal;
	margin-left:1.0em;
}



article h1 a {
	text-decoration:none;
	color:#435757;

}

article img{
	float:right;
	width:40%;
}

article img#ads{
	float:right;
	width:30%;
}

article img.icon{
	float:right;
	width:20%;
}

article img.large{
	float:left;
	width:100%;
	margin-bottom:0.5em;
}

article p{
	text-align:left;
	margin-left:0.5em;
}

/* Formats the footer of the page */
footer
{
	background-color: #ffffff;
	border-top: 1px solid #cccccc;
	color: #ff9900;
	text-align: center;
}

footer p
{
	text-align: center;
	color:#435757;
}


/*
Formats bulleted lists 
Default settings cleared by reset code
*/
ul{
	margin-left:10%;
	margin-bottom:1em;
}

ul li{
	list-style-type:square;
}


/*
Start of code to format the page when the width of the browser window is over 768px
NOTE: Attributes set in earlier (mobile first) defaults will apply unless overwritten here
*/
@media only screen and (min-width: 768px) {

html {
	background-color: #dddddd;
	height:100%;
}


body
{
    font: 1em 'Noto Sans', sans-serif;
	background-color: #ffffff;
	color: #666666;
	width:100%;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	height:100%;
}

/* Hides the hamburger menu button on larger screens */
label[for="menutoggle"]{
	display: none;
}

header img
{
	display:none;
	width:10%;
}


/*Special paragraph style for PCN Systems tagline*/
header p
{
	position:relative;
	left:5%;
	top:-5em;
	width:40%;
	z-index:2;
	font-weight: bold;
	font-size: large;
	background-color: rgba(238,238,238,0.5);
}


/*Highlights current section on nav bar*/
body#home a#homenav,
body#work a#worknav,
body#websites a#websitesnav,
body#folk a#folknav,
body#canals a#canalnav 
{
color:#ffffff;
background-color:#435757;
}

/*Sets the attributes for the navigation bar*/
nav{
	display: block;
	position: fixed;
	width:100%;
	max-width:960px;
	margin-left:auto;
	margin-right:auto;
	top: 0;
	z-index:3;
	font-size:3em;
}

nav ul
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

nav ul li{
	float: left;
	width: 20%;
	list-style-type: none;
}
nav ul li a
{
	display: block;
	padding: 10px;
	text-align: center;
	text-decoration: none;
	font-size: 1.6em;
	font-weight: bold;
	border-top: 0px solid #ff9900;
	border-bottom: 1px solid #435757;
}

nav ul li a:link,nav ul li a:visited
{
	color:#435757;
	background-color:#ffffff;
	font-size:1.6em;

}

nav ul li a:hover,nav ul li a:active
{
	color:#ffffff;
	background-color:#435757;
	font-size:1.6em;
}



section
{
	padding-left: 2.5%;
	padding-right: 2.5%;
	background-color:#ff0000;
}

section h1{
	padding-left:0;
	padding-top:1em;
}

section#content{
	display:block;
	overflow:auto;
	height:95%;
	background-color:#ffffff;
}

section#social{
	position:fixed;
	bottom:1.5em;
	width:37.5%;
	max-width:480px;
	background-color:rgba(255, 255, 255, 0.5)/*#ffffff;*/
}


article{
	position:relative;
	background-color:#ffffff;
	clear:right;
	width: 47.5%;
	float:right;
	margin-bottom:0.5em;
/*	border:1px solid #00ff00;*/
	
}

article#ads{
	float:left;
}

article.left{
	position:relative;
	background-color:#ffffff;
	clear:left;
	width: 47.5%;
	float:left;
	margin-bottom:0.5em;
	border-top:1px solid #435757;
	
}


article img{
	float:right;
}

article h1{
	padding-top: 0.5em;
	padding-left: 0em;
	margin-left:0em;
	font-size:1.4em;
	font-weight: bold;
	text-align:left;
	clear:none;
	color:#435757;
}

article h1 a{

	font-size:inherit;
}

article h2{
	margin-left:0em;
	padding-top: 0.5em;
	font-size:1.2em;
	color:#435757;
}

article h3{
	margin-left:0em;
	padding-top: 0 em;
	font-size:1.0em;
	color:#435757;
}



article p{
	width:100%;
	margin-left:0;
	padding-left:0;
	
}
p
{
	font-size: small;
	text-align: justify;
}

p.quote
{
	margin-top:1em;
	margin-bottom:1em;
	margin-left:10%;
	width: 80%;
	font-style:italic;
	font-weight: bold;
	color: #ff9900;
}

h1
{
	clear: both;
	font-size: xx-large;
	font-weight: bold;
	text-align: left;
	padding-top: 1em;
}

h2
{
	font-size: medium;
	font-weight: bold;
	color: #ff9900;
	background-color: transparent;
	text-align: left;
}

h3
{
	font-size: small;
	font-weight: bold;
	color: #ff9900;
	text-align: left;
}

footer
{
	position:fixed;
	width:100%;
	bottom:0;
	left: 0;
	background-color: #eeeeee;
	color: #ff9900;
	text-align: center;
}

footer p
{
	text-align: center;
}


/*Standard link anchors (normal colour coding)*/
a:link
{
	font-size: inherit;
	color: blue;
	background-color: transparent;
}

a:visited
{
	font-size: inherit;
	color: #435757;
	background-color: transparent;
}

a:hover
{
	font-size: inherit;
	color: fuchsia;
	background-color: transparent;
}

ul{
	margin-left:10%;
	margin-bottom:1em;
}

ul li {
	font-size:small;
	list-style-type:square;
}


/*Classes used to align images left or right*/
.right
{
float:right;
width: auto;
padding-top:0;
padding-bottom:1em;
padding-right:0;
margin-left:1em;
width:100%;
}

.left
{
float:left;
width:auto;
padding-top:0;
padding-bottom:1em;
padding-right:0;
padding-left:0;
width:100%;

}


/* End of larger screen media query */
}