/* CSS Document for football web pages*/
body {font-family: "Open Sans", Tahoma, Arial, Helvetica, sans-serif;	font-size:14px;	color:#596363;}
h2.pagetitle {text-align:center}
a {color:#08b9bf;text-decoration:underline;}
a:hover {color:#596363;text-decoration:underline;}
#header {vertical-align:bottom; margin-bottom:40px}
#menu-icon {margin-right:20px;}

#logo {width:150px}
@media (min-width:960px) {
	#logo {width:200px}
}
#mainmenu .menuitem {padding-bottom:10px}
#mainmenu .menuitem .currentitem {color:#08b9bf;font-weight:bold}
#mainmenu .menuitem a {color:#596363;text-decoration:none}
#mainmenu .menuitem a:hover {text-decoration:none}
#mainmenu {display:none; margin-top:10px}
@media (min-width:960px) {
	#menu-icon {display:none;}
	#logo {float:left}
	#mainmenu {display:block; float:left;margin-left:20px}
	#mainmenu .menuitem {float:left;margin-left:20px}
}

.clear {clear:both}
@media (min-width:960px) {
	#page {margin-left:10px;margin-right:10px}
}
#footer{margin-top:40px;font-size:9px;text-align:center;margin-bottom:60px}
.alert {color:red}
input[type=text], input[type=password] {font-family:'Open Sans',Tahoma, Arial, Helvetica, sans-serif;margin-top:0px;padding-left:3px;border: 1px solid #08b9bf; height: 30px;width: 300px;margin-bottom:5px;}
input[type=button], input[type=submit], a.button {font-family:'Open Sans',Tahoma, Arial, Helvetica, sans-serif;height:32px;background-color:#08b9bf;text-decoration:none;display:inline-block;border:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;-appearance:none;-webkit-border-radius: 0;margin-bottom:5px;padding-top:2px; padding-bottom:2px;font-size:14px;color:#FFFFFF;}
a.button {height:auto; padding-left:5px; padding-right:5px; padding-top:7px;padding-bottom:7px}
input[type=button]:hover, input[type=submit]:hover  {color:#FFFFFF;}
.selectdiv {
   float:left;
   width: 303px;
   height: 30px;
   overflow: hidden;
   background: url('../images/select-arrow-teal.jpg') no-repeat right #FFFFFF;
   background-size:32px;
   border: 1px solid #08b9bf;
   border-right:none;
   margin-bottom:5px;
   margin-right:5px;
}
select {
  background: transparent;
  height:30px;
  width: 298px;
  padding: 5px;
  padding-right:30px;
  border: 0;
  border-radius: 0; 
   -webkit-appearance: none;
   -moz-appearance:none;
	-appearance:none;
   font-family:'Open Sans',Tahoma, Arial, Helvetica, sans-serif;
}
input[type=checkbox] {
	-webkit-appearance: none;
	-moz-appearance:none;
	-appearance:none;
	border: 1px solid #08b9bf;
	padding:0px;
	margin-bottom:5px;
	width:20px;
	height:20px;
	margin-right:5px;
	margin-left:0px;
	vertical-align:middle;
	background-color:#FFFFFF;
}
input[type=checkbox]:checked:after {
	content: '\2714';
	margin-left: 3px;
	color: #08b9bf;
	margin-bottom:0px!important;
	background-color:#FFFFFF;
}
.fieldgroup {margin-bottom:5px}
.fieldgroup .label {float:left;width:150px;margin-bottom:5px}
.fieldgroup .label {width:250px;}
.fieldgroup .label.full {width:100%}

.fieldgroup .inputfield {float:left;}
.buttoncontainer {margin-top:20px;margin-bottom:20px}

#contact {text-align:center}
#submenu-container {width:100%;text-align:center}
#submenu{width:fit-content;text-align:left;margin-left:auto;margin-right:auto}

.red {color:#FF0000}
.blue {color:#0000FF}
.green {color:#00b400}
.magenta {color:#ec5dde}
.cyan {color:cyan}
.purple {color:#8d22bf}
.lime {color:#86f11d}
.cyan {color:#17d7e8}
.teal {color:#22bfb2}
.orange {color:#e89c17}
.yellow {color:#dcda23}
.small {font-size:10px}

.floatingbox {width:95%;border:1px solid #596363;padding:10px;margin-bottom:20px}
@media (min-width:960px) {
	.floatingbox.news {float:left;width:60%}
	.floatingbox.team {width:35%;float:right;}
	.floatingbox.announcement {width:98%;float}
	
}

.newsitem {margin-bottom:30px;}
.newsdate {font-size:12px; font-style:italic}
.collection {margin-bottom:40px;}
.collectionitem {border-bottom:1px solid #acbcbd;margin-bottom:5px;padding-left:5px;padding-right:5px;}
.collectionitem.news {margin-bottom:30px;padding-bottom:20px}
.itemtop {margin-bottom:10px;}
a.showmore {color:#596363;font-size:10px}
a.showmore:hover {cursor:pointer}
.itemname {float:left;width:200px}
.iconbox {float:right}
@media (min-width:721px) {
	.iconbox.left {float:left;margin-left:20px}
}
.iconspacer {width:16px}
.icon {height:16px;vertical-align:middle;}
.icon {margin-right:5px}
.icon.wide {margin-right:20px}
.icon:hover {cursor:pointer}
.detailslink {font-size:8px;}
.itemdetails {display:none;}