/*
Theme Name: MFL
Theme URI: http://www.maestegfootball.com
Description: Maesteg Football League Website
Version: 1.0
Author: Richard Boydell
Author URI: http://www.unitedgraphicdesign.com/
*/

body, html {
	margin:0;
	padding:0;
	background: #FFF;
	color:#333;
	font-size:1em;
}

h1, h2, h3, h4 {
	font-weight:400;
	letter-spacing: 1px;
	color:#0e0020;
}

.clear {clear:both;}

.alignleft {
float: left;
margin:5px 5px 5px 0;
}

.alignright {
float: right;
margin:5px 0 5px 5px;
}

a {
	color:inherit;
}

* {
    box-sizing: border-box;
}
.row:after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
	width: 100%;
}

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

img {
	max-width:100%;
	height:auto;
}

.wrapper {
	margin:0 auto;
	max-width:1200px;
}


/* Header */

#header {
	width:100%;
	text-align: center;
	padding: 30px;
}

@media screen and (max-width:750px) {
	#header img {max-width: 200px;}
}


/* Navigation */

#navcontainer {
	width:100%;
	padding:0;
	background:rgba(0, 159, 227, 1.0);
	letter-spacing: 1px;
}

#navigation {
	padding:0px;
	font-size: 22px;
	color:#FFF;
	font-weight:400;
	text-transform:uppercase;
}

ul.topnav {
	list-style-type: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

ul.topnav li {float: left;}

ul.topnav li a {
	display: inline-block;
	text-align: center;
	padding: 15px 15px 15px 0;
	transition: 0.3s; 
	text-decoration:none;
	margin:0 15px 0 0;
}

ul.topnav li.icon {display: none;}

@media screen and (max-width:750px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
  ul.topnav {
	padding:0;
}
}

@media only screen and (max-width: 750px) {
.mobilenav a {display:block; width:100%;}
#mainMenu {display:none;}
#navigation a {margin:0;}
}

@media only screen and (min-width: 750px) {
.mobilenav {display:none;}
}


ul#menu-main-menu.menu, ul#menu-main-menu-1.menu {
	list-style-type: none;
	list-style-image: none;
}



/* Body */

#contentcontainer {
	width:100%;
}

#content {

}

#sidebar {
	margin-top:15px;
	padding:15px;
	color:#FFF;
	font-size:16px;
}

#sidebar li { 
	list-style-type: none;
	list-style-image: none;
}

#sidebar ul {
	margin: 0;
	padding: 0; 
	list-style-type: none;
	list-style-image: none;
}

#sidebar ul a {
	text-decoration:none; 
}

#sidebar h2 {
	margin: 0;
	padding: 0;
}

h2.widgettitle  {
	list-style-type: none;
	list-style-image: none;
}

@media only screen and (max-width: 750px) {
#sidebar {
	border-left:none;
	border-top: solid 10px rgba(0, 0, 0, 0.8);
}
}

/* Footer */

#footercontainer {
	width:100%;
	background:rgba(0, 159, 227, 1.0);
	font-size:16px;
}

#footer {
	color:#FFF;
}

#footer h2 {
	color:#FFF;
	font-size:20px;
}

#footer a {
	color:inherit;
}
	
#footer li {
	list-style-type: none;
	list-style-image: none;
}


/* News */

#headlines {
	font-weight:bold;
}

#headlines a {
	display:block;
	margin:1px 0px;
	padding:15px;
	background:rgba(0, 159, 227, 1.0);
	text-decoration:none;
	color:#FFF;
	font-size:20px;
	text-shadow:#000 1px 1px 1px;
}

#headlines a:hover {
	background-color:#0e0020;
}