/*General*/
body{text-align: center; font-family: arial, sans-serif; font-size:100%; color:#646464;}
.container{margin:auto; width:940px; text-align: left;}

/*Typography*/
p{line-height:1.4em; font-size: 1.1em;}
h1{font-size: 5em; }
h2{font-size: 1.2em;}
h3{font-size: 1.2em;}
a{text-decoration: none;}
p a.button{padding:0; display: inline-block; padding:10px 20px; border-radius: 3px; color:#000;}

/*Header*/
header{width:100%; padding:2em 0 3em 0; margin:0 0 2em 0; color:#fff;  background-image:url(../i/typewriter.jpg); background-position: center; background-repeat: no-repeat; background-size:cover;
background-image: -webkit-gradient(radial, 0% 0%, 0% 100%, from(rgba(0,0,0,0.6)), to(rgba(0,0,0,0.1))), url(../i/typewriter.jpg);
background-image: -webkit-radial-gradient(center, rgba(0,0,0,0.6), rgba(0,0,0,0.1)), url(../i/typewriter.jpg);
background-image: -moz-radial-gradient(center, rgba(0,0,0,0.6), rgba(0,0,0,0.1)), url(../i/typewriter.jpg);
background-image: -ms-radial-gradient(center, rgba(0,0,0,0.6), rgba(0,0,0,0.1)), url(../i/typewriter.jpg);
background-image: -o-radial-gradient(center, rgba(0,0,0,0.6), rgba(0,0,0,0.1)), url(../i/typewriter.jpg);
font-family: 'Roboto', "Arial Black", arial, sans-serif; font-weight: 300; text-shadow: 1px 1px 1px rgba(54, 54, 54, 0.6);
}

header .container{text-align:center;}
header p.description{width:700px; margin:2em auto; font-size: 1.3em; text-shadow: 1px 1px 1px rgba(54, 54, 54, 0.6);}
header p a.button{margin:0 auto 0.5em auto;}

nav{margin:0 0 3em 0; }
nav ul li{display:inline-block; padding:0 1em; text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);}
nav ul li a{color:#fff;}
nav ul li a:hover{border-bottom: 1px solid #fff;}

h1{font-weight: 900; line-height:1; text-shadow: 1px 1px 1px rgba(54, 54, 54, 0.6);}

/*Latest*/
#latest{float:left; width:95%; margin:2em 0; padding:0 2.5% 2em 2.5%; border-bottom: 1px solid #ccc;}
#latest .thumb{float:left; width:50%; height:300px; display:block; margin:0 5% 0 0; background-image:url(../i/manutd.jpg); background-position: center; background-repeat: no-repeat; background-size:cover;}
#latest h2{font-size: 150%; line-height:1; margin:0 0 1em 0;}
#latest p{margin:0 0 1em 0;}
#latest a:hover{border-bottom: 1px solid;}
#latest a.button:hover{border:none;}

/*Previous*/
.previous{float:left; width:45%; margin:3em 2.5% 0 2.5%;}
.previous .thumb{float:left; width:40%; height:200px; margin:0 5% 0 0; background-image:url(../i/nativity.jpg); background-position: center; background-repeat: no-repeat; background-size:cover;}
.previous h3{margin:0 0 1em 0;}
.previous p{margin:0 0 1em 0;}
.previous a:hover{border-bottom: 1px solid;}

/*Footer*/
footer{float:left; width:100%; background: #ffcc33; margin:4em 0 0 0; padding:1em 0;}
footer p{margin:0; text-align: center; font-size: 0.9em !important;}
footer p a{color:#000; }
footer p a:hover{border-bottom: 1px solid #000;}

/*Colours*/
a{color:#216778; border-color:#216778;}
header{background-color: #216778;}
p a.button{background-color: #216778; color:#fff;}
#latest h2{color:#216778;}
.previous h3{color:#216778;}


body.profile .container h2 { font-size: 150%; margin-bottom: 1em; }

/* Forms */
form .row { display: block; margin-bottom: .5em; }
form label { width: 100px; display: inline-block;}
form input[type="text"], 
form input[type="password"]  { width: 200px; display: inline-block; border: 1px solid #aaa;}
form button[type="submit"] { border: 1px solid darkgreen; background: green; color: #fff; border-radius: 5px; padding: .5em 1em; }
form button[type="submit"]:hover { background: darkgreen; cursor: pointer; }


/*=============TABLETS - PORTRAIT ==========*/
@media only screen and (min-width: 569px) and (max-width: 959px) {
.container{width:90%; margin:0 5%;}
h1{font-size: 300%;}
header p.description{width:100%;}

#latest{width:100%; padding:0;}
#latest .thumb{width:100%; margin:0 0 2em 0;}

.previous{margin:3em 0 0 0; width:100%;}
.previous .thumb{width:50%; height:200px; margin:0 5% 0 0;}
.previous p{width:45%; float:left;}
}


/*=============PHONES==========*/
@media only screen and (max-width: 568px) {
p{font-size: 1em;}

.container{width:90%; margin:0 5%;}
h1{font-size: 250%;}
header p.description{width:100%; font-size:110%;}

#latest{width:100%; padding:0;}
#latest .thumb{width:100%; margin:0 0 1em 0;}
#latest{padding:0 0 1em 0;}

.previous{margin:1em 0 0 0; padding:1em 0 0 0; width:100%; border-bottom:1px solid #ccc;}
.previous .thumb{width:100%; height:200px; margin:0 0 1em 0;}
.previous p{width:100%; float:left;}
}