/*
Coding by Bruleo (www.bruleo.com) - All Rights Reserved.
*/
html { margin: 0; padding: 0; width: 100%;}
body { font-family: calibri; font-size: 12px; margin: 0; padding: 0; min-width: 335px;}

/* GENRAL FORMATTING */
.h1 {clear: both; max-width: 1200px; margin: 2px auto 0; font-size: 15px; min-height: 40px; background: url('../images/trans1.png') repeat; border-bottom: 1px #400000 solid;}
 h1 { float: left; padding: 0 20px 0 20px; margin: 0px; height: auto;}
 h2 {font-size: 27px; font-weight: bold; margin: 0 0 10px 0; padding: 0 0 5px 0; border-bottom: 5px #a32a29 solid;}
 h2 span {float: right; color: #606060;}
 h3, h4 {font-size: 22px; padding: 0 0 5px 0;}
 h3 {color: #a32a29; margin: 5px 10px 5px 10px; border-bottom: 2px #a32a29 solid;}
 h4 { color: #000000; margin: 5px 10px 5px 0; font-size: 25px;}
 h5 { margin: 20px 0 0 0; font-size: 16px;  padding: 5px 0 5px 0; }
.clear, .header, .mainMenu, .socialBar { clear: both;}
a:link, a:active, a:visited { text-decoration: none; color: #ffffff;}
a.hover { color: #909090; }
a {outline: none;}

sup {color: #FFFF00; font-weight: bold; font-size: 14px; padding: 5px 0 0 0;}
blockquote {font-style: italic;}
#cookie-law {
 height: 45px;
 font-size: 20px;
 font-weight: bold;
 padding: 10px;
 color: #c0c0c0;
 background: #000000;
 text-align: center;
 margin: 0 auto;}
 
/* SHADOWS */
.shadow, .menuitem,  .category-navbar li, .mainContainer, .flanders, .bar, .menu, .moreinfo, .soldierInfoPanel, .contactTL, .contactBR, .userBar, .gv_frame .gv_thumbnail, .video, .videodesc, .mainContent .list, .content .content, .contentPix .content, .contactContent .content, .contactDetails .content, .button, .form, .latestNews, .fbThumb, .gv_panelWrap, .wideButton {
 -webkit-box-shadow: -1px 1px 6px 3px rgba(50, 50, 50, 0.75);
 -moz-box-shadow: -1px 1px 6px 3px rgba(50, 50, 50, 0.75);
  box-shadow: -1px 1px 6px 3px rgba(50, 50, 50, 0.75);
}

.userBar, .menu, .moreinfo, .videodesc, .intro, .successMsg, .errorMsg, .mainintro, h1, h2, .mainContent .list, .content, .contentPix, .button {
text-shadow: 1px 1px 2px #ffffff;}

/* CURVES */
.languageOption select, .goButton, .userBar a, .gv_frame .gv_thumbnail, .gv_panelWrap, .patTex img, .video, .videodesc, .message, .mainContent .list, .content, .contentPix, .contactContent, .contactDetails , .contHalf, .button,  .form, .formLine, .latestNews, .fbThumb, .gv_panelWrap {border-radius: 3px;}
.main {border-bottom-left-radius: 5px;}
.menu  {border-top-left-radius: 5px;}
.menu {border-top-right-radius: 5px;}
 .main, .footer  {border-bottom-right-radius: 5px; }

.formField input[type=text], .formField input[type=password], .formField textarea , select {
background: -moz-linear-gradient(top,  #e0e0e0 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top,  #e0e0e0 0%,#ffffff 100%);
background: -o-linear-gradient(top,  #e0e0e0 0%,#ffffff 100%);
background: -ms-linear-gradient(top,  #e0e0e0 0%,#ffffff 100%);
background: linear-gradient(to bottom,  #e0e0e0 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#ffffff',GradientType=0 );}


.bar {clear: both; height: 10px; background: #400000; width: 100%; border-bottom: 1px #ffffff solid; border-top: 1px #ffffff solid;}


/* HEADER CONTENT */ 
.underConstruction {background: #000000; color: #ffffff; text-align: center; font-size: 20px; padding: 10px;}
.wholeHeader {background: url('../images/trans1.png') repeat; width: 100%; height: 200px; margin: 0; padding: 0;}

.header {height: 150px; max-width: 1200px; width: 100%; margin: 0 auto; margin-top: 0; border-top: 1px transparent solid; border-bottom: 1px transparent solid;}
.constructLogo { float: left;  height: 130px; margin: 10px;}
.constructLogo a {display: block;}
.manchester {float: left; background: url('../images/manchester.png') no-repeat; width: 140px; height: 130px; }
.somerset {float: left; background: url('../images/somerset.png') no-repeat; width: 125px; height: 130px; margin: 5px 0 0 0;}
  
.mansomResponsive {display: none;}

 
  
.logo { float: left; max-width: 452px; width: 452px; max-height: 116px; height: 116px; margin: 10px 0 0 0;}
.logo a {display: block; max-width: 452px; width: 452px; max-height: 116px;  height: 116px;}

.motif { float: right;  background: url('../images/remember.png') no-repeat; background-size:cover; max-width: 400px; width: 400px; max-height: 78px; height: 78px; margin: 30px 0 0 0;}

.mainContainer {max-width: 1200px; margin: 0 auto;  border-left: 1px #000000 solid; border-right: 1px #000000 solid;}
.mainImage { max-width: 1200px; height: 100vh; max-height: 630px; margin: 0 auto;}
.galleryTop { max-width: 1200px; margin: 0 auto; width: 100%;}

.flanders {overflow: hidden; padding: 0 10px 0 10px; height: 100vh; max-height: calc(100% - 100px); /*530px;*/ border-radius: 5px;  border: 1px #000000 solid; max-width: 430px; margin: 30px auto; font-family: 'Italianno'; font-size: 40px; font-weight: normal; color: #000000; background: url('../images/trans1.png') repeat;
text-align: center;
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
}
.flanders ul {list-style: none; padding: 0px; margin: 0; width: 100%;}
.flanders li {padding: 0; margin: 2px 0 2px 0; width: 100%;}
.divider { background: url('../images/divider.png') no-repeat center; height: 40px; width: 100%;} 
.poppies {background: url('../images/poppyBullet.png') repeat-x; center; height: 40px; width: 120px; padding: 10px 0 10px 180px;}

.soldierInfoPanel {float: left; height: 100px; padding: 10px; border: 1px #000000 solid; border-radius: 5px; width: calc(100% - 54px); background: url('../images/trans1.png') repeat; margin: 15px 15px 0 15px; color: #000000;}
.soldierInfoPanel img {float: left; width: 100px; height: 100px;  background: #c0c0c0; border: 1px #000000 solid; border-radius: 3px;}
.soldierInfoPanel ul { float: left; width: calc(100% - 225px);list-style: none; margin: 0 10px 0 10px; padding: 0; font-size: 25px; font-weight: bold;}
.soldierInfoPanel ul li {margin: 2px 0 2px 0; padding: 0;}
.soldierInfoPanel ul li span { color: #400000;}

.contactInfoPanel {font-size: 25px; color: #400000; font-weight: bold; margin: 15px; color: #000000; height: 560px; }
.contactInfoPanel div {padding: 5px 10px 5px 10px; border: 1px #000000 solid; border-radius: 5px; background: url('../images/trans1.png') repeat; height: 120px; }

/* Vites Cemetery */
.vitesInfoPanel {float: right; margin: 200px 15px 0 0; border-radius: 5px; padding: 5px; background: url('../images/trans1.png') repeat;}
.vitesInfoPanel iframe {width:480px; height: 360px; border: 1px #000000 solid;  border-radius: 3px;}
.imagefloatRight,.imagefloatLeft {border-radius: 5px; background: url('../images/trans1.png') repeat; padding: 5px; }
.imagefloatRight {float: right; margin: 0 0 0 10px;}
.imagefloatLeft {float: left; margin: 0 10px 0 0;}
.imagefloatRight img, .imagefloatLeft img {border: 1px #000000 solid; border-radius: 3px; height: 250px;}

.contactTL {float: left; width: 650px; }
.contactBR {float: right; margin-top: 420px; width: 380px;}


.socialBar { float: right; width: height: 50px; padding: 10px 0 7px 0; text-align: right; margin: 0 10px 0 0;}
.socialBar a {height: 50px; width: 50px; float: right; margin-left: 10px;}
.socialBar a:hover {height: 50px; width: 50px; float: right; margin-top: -2px;}
#facebook {background: url('../images/social/facebook.png');}
#youtube {background: url('../images/social/youtube.png');}
#twitter {background: url('../images/social/twitter.png');}
#blogspot {background: url('../images/social/bloggr.png');}
#emailer {background: url('../images/social/email.png');}
#google {background: url('../images/social/googleplus.png');}

/* MENU */
/* custom menu styles */
.default {background: #609CD4;}
.bunting {background: url('../images/manchesterMenu.png') no-repeat 5px 2px; padding: 5px 10px 5px 45px;}
.crockson {background: url('../images/somersetMenu.png') no-repeat 5px 2px; padding: 5px 10px 5px 45px;}
.home {background: url('../images/homeMenu.png') no-repeat 5px 2px; padding: 5px 10px 5px 40px;}
.gallery { padding: 5px 10px 5px 10px;}
.contact {padding: 5px 10px 5px 10px;}
.about {padding: 5px 10px 5px 10px;}
.videos {padding: 5px 10px 5px 10px;}
.vittener {background: url('../images/cemeteryMenu.png') no-repeat 5px 2px; padding: 5px 10px 5px 45px;}
.related {padding: 5px 10px 5px 10px;}

/* default menu layout */
.menu { height: 50px; margin: 0 auto; max-width: 1200px; border: 1px #000000 solid; background: url('../images/trans1.png') repeat; }
.menu .navicon {display: none; }
.menuitem {float: left; padding: 5px 2px 0 2px; margin: 5px 5px 0 5px; height: 30px;  font-size: 20px; font-weight: bold; border-radius: 3px; border: 1px #400000 inset; background: url('../images/trans1.png') repeat;}
.menuitem:link, .menuitem:active, .menuitem:visited, .moreinfo:link, .moreinfo:active, .moreinfo:visited, .wideButton { display: block; color: #000000; } 
.menuitem:hover, .menu.responsive .menuitem:hover, .wideButton:hover; {color: #505050;} 




.mainer {}
.main {background: url('../images/trans1.png') repeat; max-width: 1200px; padding: 0px; margin: 0 auto 0;} 
.intro, .successMsg, .errorMsg {width: calc(100% - 40px); color: #400000; max-width: 1160px;  font-size: 24px; float: left; font-weight: bold; border-bottom: 1px #606060 solid; background: url('../images/trans1.png') repeat; padding: 10px 20px 10px 20px; border-top: 1px #efefef solid;}
.intro a {clear: both; font-size: 15px; color: #400000; margin: 0 0 5px 0;}


.poppyIcon, .heritageIcon, .emailIcon {float: left;}
.poppyIcon {width: 100px; height: 148px; background: url('../images/poppyIcon.png') no-repeat; margin: 10px 20px 10px 0;}
.heritageIcon {width: 116px; height: 116px; background: url('../images/lich.png') no-repeat; margin: 10px 10px -10px 0; }
.emailIcon {width: 116px; height: 116px; background: url('../images/email.png') no-repeat; margin: 10px 10px -10px 0; }


.icon {width: 75px; height: 70px; background-size:cover; margin: 0 10px 0 0;}

/* TIME LINE */
.timeline {clear: both; max-width: 1160px; padding: 20px; color: #ffffff; font-size: 20px;}
.tlh2 {background : #400000; border-radius: 5px;  height: 30px; padding: 8px 20px 12px 20px; text-shadow: none; margin: 0 0 10px 0;}
.tlh2 span {float: right; font-size: 15px; text-align: right; font-weight: bold;}
.tlh2 h2 {float: left; font-color: #ffffff; border: none;}
.timelineMainEvent {border: 1px #000000 solid; padding: 5px; margin: 0 0 10px 0; border-radius: 5px; background: url('../images/trans3.png') repeat;}
.timelineYear {clear: both; cursor: pointer; margin: 10px 0 10px 10px;  font-weight: bold; border: 1px #000000; background: #c0c0c0; color: #000000; text-align: center; width: 150px; font-size: 25px; border-radius: 3px;}
.timelineDate {clear: both; margin: 0; font-weight: bold; color: #e0e0e0; font-size: 20px;}
.timelineEvent {clear: both; margin: 10px 10px 0 10px; border: 1px #ffffff dotted; border-radius: 3px; padding: 10px 10px 0 10px; background: url('../images/trans3.png') repeat;}
.timelineEvent > div {background: url('../images/trans.png') repeat; margin: 0 0 10px 0; border-radius: 3px; padding: 10px; border: 1px #000000 solid; }
.timelineImages {float: right; margin: 10px 0 0 5px; padding: 0 10px 0 10px; width: calc(30% - 29px); font-size: 15px; border: 2px #e0e0e0 dotted; border-radius: 3px; background: url('../images/trans1.png') repeat;}
.timelineImages h4 {font-size: 15px; padding: 5px 10px 0px 10px; margin: 0;}
.timelineImages div {float: left; width: calc(100% - 12px); border: 1px #ffffff solid; border-radius: 2px; background: #400000; padding: 0 5px 5px 5px; margin: 5px 0 10px 0;}
.timelineImages > div > span {display: inline-block; padding: 5px;}
.timelineEvent > div > h3 {color: #ffffff; height: 35px; border: 1px #606060 solid; font-size: 22px; margin: 0 0 5px 0; padding: 0 10px 5px 0; background: url('../images/trans.png') repeat; border-radius: 3px; font-weight: normal;}
.timelineEvent > div > h3 > span {display: inline-block; font-weight: bold; background: #000000; padding: 5px 10px 9px 10px; margin: 0 10px 0 0; border-right: 1px solid #ffffff; border-radius: 3px;}
.timelineImages img { width: calc(100% - 2px); border-radius: 3px; border: 1px #606060 solid; border-radius: 2px;}
.timelineDetails {float: left; margin: 0 5px 0 0; width: calc(70% - 25px); font-weight: normal; padding: 5px 10px 5px 10px;}
.tldetails {border-bottom: 2px #000000 dotted; padding: 0 0 10px 0; }
.timelineNotes, .timelineReference { margin: 20px 0 0 0; font-size: 18px; padding: 0 10px 0 10px;}
.timelineNotes div,  .timelineReference div {border: 1px #000000 solid; padding: 10px; font-size: }
/* .timelineNotes div span, .timelineReference div span {font-weight: bold; font-size: 18px; color: #eeeeee;} */
.timelineReference div span, .timelineNotes div span {background: #000000; color: #ffffff; font-size: 16px; padding: 0 4px 1px 4px; margin: 0 10px 0 0; border-radius: 3px; }
.mainintro {float: left; color: #000000; max-width: 500px;  font-size: 24px; float: left; font-weight: bold; border-bottom: 1px #606060 solid; background: url('../images/trans1.png') repeat; padding: 10px 20px 10px 20px;}

.message {padding: 5px 10px 5px 10px; margin: 0 0 5px 0 ;font-weight: bold; font-size: 17px; background: #e0e0e0; border: 1px #606060 solid;}

.errorMsg {background: #F1B599}
.successMsg  { background: #7BC168; }
.successMsg span, .errorMsg span {font-weight: bold;}

/* NEWS BOX */
.newsResp {display: none;}
.news {float: right;}
.news .latestNews {max-width: 450px; height: auto; overflow: hidden; margin: 10px 0 10px 20px; border: 1px #606060 inset;}
.news .latestNews, .newsResp .latestNews {color: #ffffff; text-shadow: none; background: url('../images/trans3.png') repeat; padding: 10px; font-size: 18px;}
.news .latestNews ul, .newsResp .latestNews ul {list-style: none; text-align: center; margin: 10px 0 0 0;  font-weight: bold;}
.news .latestNews ul {width: 550px; padding: 0;}
.newsResp .latestNews ul {padding: 10px;}
.news .latestNews ul li {width: 450px;}
.latestNews ul li {text-align: center;}
.latestNews a:link, .latestNews a:active, .latestNews a:visited {color: #efefef; font-weight: bold; text-decoration: none; font-size:18px;}
.latestNews a:hover {text-decoration: underline; color: #ffffff;}

.latestNews span {font-weight: bold; color: #c0c0c0;}
.latestNews span  span {color: #FFFF00;}


/*Formatting for Service of Remembrance Pages */
.service {font-size: 22px; text-align: center; background: url('../images/trans1.png') repeat; padding: 0 20px 0 20px; border-radius: 5px;}
.service h2 {border: none; margin: 0; padding: 0;}
.service h3 {border: none; margin: 0; padding: 0; font-size: 24px;}
.service span {font-weight: bold;}
.service sup {color: #404040; font-size: 20px;}
.service blockquote {margin: 0;}

.indexContent {clear: both; padding: 0; margin: 0;}
.mainContent { clear: both; max-width: 1160px; padding: 20px;}
.section {margin-bottom: 20px;}

/* VIDEO PAGE */



.video {float: left; padding: 5px; background: url('../images/trans1.png') repeat; margin-right: 20px;}
.video iframe, .video embed	{width: 600px; height: 338px; background: url('../images/trans3.png') repeat; border: 1px #efefef solid; border-radius: 3px;}
.videodesc {float: left; width: 464px; background: url('../images/trans1.png') repeat; font-size: 25px; padding: 10px;}
.videodesc a, .content a {color: #AB3F3F; font-weight: bold;}
.videodesc a:hover, .content a:hover  {color: #DC5026;}


.mainContent .list, .content, .contentPix, .contactContent, .contactDetails {background: url('../images/trans1.png') repeat; font-size: 20px; padding: 10px 20px 10px 20px; margin: 0 0 0 0;}
.mainContent .list li {padding: 0; margin: 0;}
.content, .contentPix, .videodesc, .contactContent, .contactDetails, .contentLeft, .contentRight {border: 1px #606060 solid;}
.content {margin: 0 0 10px 0;}
.details {list-style: none; padding: 0; margin: 0}
.details li {padding: 2px 0 2px 0; margin: 0; color: #505050; font-weight: bold; border-bottom: 1px #000000 dotted;}
.details li span {float: right; color: #000000;}
.contentPix {width: 800px;}
.smallURL {float: left; font-size: 13px; color: #202020;}

.pageContent {background: url('../images/trans1.png') repeat;}


.contentRight, .contentLeft {float: left; width: calc(50% - 33px); background: url('../images/trans1.png') repeat; border-radius: 5px; padding: 10px; text-align: left;}
.contentRight h3, .contentLeft h3 {float: left; margin: 0 0 15px 0;}
.contentLeft  {margin-right: 10px;} 
.contentRight {margin-left: 10px;}

.shortbio {clear: both; padding: 0 5px 5px 5px; font-size: 20px; text-align: left;}
.shortbio img {float: right; height: 100px; width: 100px; border: 1px #400000 solid; border-radius: 5px; margin: 0 0 10px 10px;}
.moreinfo { float: left;  width: calc(100% - 12px); text-align: center; margin: 0 5px 0 5px; padding: 5px 0 5px 0; height: 25px;  font-size: 20px; font-weight: bold; border-radius: 3px; border: 1px #400000 inset; background: url('../images/trans1.png') repeat;}

/* DYNAMIC IMAGE PLACEMENT FOR CUSTOM PAGES (As determined by the page settings in admin) */
	/* General Image container styles */
	.contentPix1, .contentPix2, .contentPix3, .contentPix4  { background: url('../images/trans1.png') repeat; border: 1px #606060 solid; border-radius: 5px;}
	.thumbnail { border: 1px #D2B677 solid;}
	/* Left */
	.contentPix1 {float: left; padding: 5px 10px 5px 10px; width: 202px; margin: 0 20px 0 0;}
	.contentPix1 .thumbnail {clear: both; margin: 5px 0 5px 0; width: 200px;}
	.pix1 {float: left; width: 833px;}
	/* Top */
	.contentPix2 {clear: both; padding: 10px 5px 10px 5px; height: 202px; overflow: auto; margin: 0 0 10px 0;}
	.contentPix2 .thumbnail {float: left; margin: 0 5px 10px 5px; height: 200px; }
	/* Right */
	.contentPix3 {float: right; padding: 5px 10px 5px 10px; width: 202px; margin: 0 0 0 20px ;}
	.contentPix3 .thumbnail {clear: both; margin: 5px 0 5px 0; width: 200px;}
	.pix3 {float: left; width: 833px;}
	/* Bottom */
	.contentPix4 {clear: both; padding: 10px 5px 10px 5px; height: 202px; overflow: auto; margin: 10px 0 0 0;}
	.contentPix4 .thumbnail {float: left; margin: 0 5px 10px 5px; height: 200px;}
	/* Embedded */
	.contentPix5 {}

/* HOME PAGE SPECIFIC */
/* slider */

.respSlideInfoContainer {display: none;}
.rslides { position: relative;  overflow: hidden; width: 100%; padding: 0; margin: 0; }
.rslides .sliderContainer { -webkit-backface-visibility: hidden; position: absolute; width: calc(100% - 2px);
  left: 0; top: 0;  border-radius: 5px; border: 1px #D2B677 solid;  overflow: hidden;}

.rslides .sliderContainer:first-child {
  position: relative;  display: block;  float: left;  }

.rslides img { position: relative; top: -40px; display: block; height: auto; float: left; width: 100%; border: 0; margin-bottom: -40px;  }
  
 .slidetitle {
	position: relative;
	z-index:10;
	font-size: 22px;
	overflow: hidden;
	background: url('../images/blacktrans85.png'); 
	height: 32px;
	font-size: 22px;  
	padding: 6px 10px 0px 20px;
	color: #D2B677; 
	border-bottom: 2px #D2B677 inset;}

.slideInfoContainer {
	position: relative;
	z-index:10;
	height: 0px;
	top: 0px;
	right: 0px;
	float: right;
	z-index:10;
	max-width: 50%;
}
.respSlideInfoContainer {
	clear: both;
	right: 0px;
}	

.slideinfo {
	border: 1px #D2B677 solid; 
	background: url('../images/blacktrans85.png');
	margin: 20px 20px 0 0;
	padding: 20px; 
	border-radius: 5px;
	color: D2B677;
	font-weight: bold;  
	font-size: 20px;
	}

a.button { margin: 10px 0 10px 0; display: block;  text-align: center; height: 30px; padding: 5px 10px 5px 10px; color: #000000; font-weight: bold; border: 1px yellow solid;}
a.button:hover {box-shadow: none;}

/* GALLERY PAGE SPECIFIC (See also other CSS files) */
.galleryFilterContainer {float: left; width: 250px; height: 0px;}
.galleryImagesContainer {float: left; width: calc(100% - 292px);}
.galleryContent {float: left; width: 877px;} 	
.itemImages {border: 1px #400000 solid; background: url('../images/trans2.png') repeat; padding: 5px;}



/* FORMS */
.contL, .contR {float: left;}
.contL {width: 576px; margin: 0 20px 0 0;}
.contR {width: 480px; margin: 5px 0 0 0;}
.contHalf {float: left; width: 550px;}

.contactContent {width: 510px; margin: 0 0 0 0;}
.form, .contactForm {clear: both; border: 1px black solid; padding: 10px; text-shadow: none; margin: 0px 0 0 0; background: url('../images/trans2.png') repeat;}
.formLine { clear: both; padding: 5px 0 5px 0; border: 1px #606060 inset; margin: 0 0 5px 0;}
.formLine span {padding: 10px;}
.formTag {float: left; width: 150px; color: #ffffff; text-align: right; margin: 0 10px 0 0; font-size: 15px; font-weight: bold;}
.formTag div {color: red; margin-right: 10px; font-size: 25px;}
.formField {float: left;}
.formField input[type=text], .formField input[type=password], .formField textarea {float: left; width: 308px; border:1px #202020 inset; border-radius: 5px; padding: 5px;}
.formField input[type=text], .formField input[type=password], {height: 15px;}
.formField textarea {height: 140px;}
.error {clear: both; font-size: 15px;  color: #FFFF00; padding: 5px; margin: 5px 0 0 0px;}
.contactDetails { clear: both; width: 510px; margin: 20px 0 0 0;}
.contactDetails h4 {margin: 10px 0 5px 0; padding: 0}
.contactDetails div div {margin: 0 0 10px 10px; font-size: 20px;}
.captcha {float: left; background: #ffffff; padding: 5px; border-radius: 5px; text-align: center; min-width: 220px;}
.captcha a {color: #C00000; font-weight: bold; font-size: 14px;}
#captcha_code {width: 75px;}
.antirobot {display: none;}
.wideButton { cursor: pointer; text-align: center; height: 40px; font-weight: bold; font-size: 20px; border-radius: 5px; width: 100%; color: #000000; border-radius: 3px; border: background: url('../images/trans1.png') repeat;}


.languageOption {clear: both;}
.languageOption select {width: 150px; padding: 3px 6px 3px 6px; border: 1px #606060 solid; margin-right: 5px;}
.goButton {height: 25px;}

/* FEEDBACK PAGE SPECIFIC */
.fbThumb {float: right; padding: 5px; border: 1px #FFFF00 solid; margin-left: 10px;}
.fbThumb:hover {box-shadow: none;}

.siteThumbnail {float: left; height: 130px; border: 1px red solid; margin-right: 10px; border-radius: 5px;}
.siteThumbnail img {height: 130px;}
/* FOOTER CONTENT */
.footer { width: calc(100% - 10px); background: url('../images/trans2.png') repeat; padding: 0 5px 10px 5px; margin: 0 0 10px 0;}
.fSection {float: left; width: 386px; margin: 0 5px 0 5px;}
.fSection ul {list-style: none; margin: 0; padding: 0;}
.fSection ul li {font-size: 18px; font-weight: bold; padding: 1px 10px 1px 10px; color: #d0d0d0;}
.subFooter { max-width: 1200px; margin: 10px auto; font-size: 20px; font-weight: bold; color: #ffffff;}
.fSection {float: left;}
.fSection span { width: 75px; color: #ffffff; font-weight: normal; display: inline-block;}
.fSection a:hover {color: #c0c0c0;}
.underFooter {border-top: 2px #ffffff inset; margin: 10px 15px 10px 15px; }
.footlogo {float: right; display: block; max-width: 365px; overflow: hidden; padding: 5px 0px 5px 0; margin: 15px 0 0 0; border: 2px #ffffff inset; border-radius: 5px; background: url('../images/trans1.png') repeat;}
.footlogo img {width: 365px; margin: 0 -10px 0 -10px; }
.bruleoText {float: left; width: 400px; text-align: left; font-size: 18px; color: #ffffff; margin: 10px 10px 0 0px;}


a.button:hover, .moreinfo:hover, .menuitem:hover, .wideButton:hover {
  -moz-box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.3);
  -webkit-box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.3);}
  
.userBar {height: 40px; background: #c0c0c0}
.userBarNav {max-width: 1200px; margin: 0 auto; padding: } 
.userBar a {float: left; font-size: 15px; border: 1px yellow solid; padding: 5px 20px 5px 20px; height: 20px; margin: 5px; font-weight: bold; background: #000000; color: #d0d0d0; text-decoration: none; }
.userBar a:hover {color: #ffffff; background: #101010;}
.userBar span {margin: 0 0 0 20px; font-size: 15px;}

/* Custom styles for SouthSound */
.formTag span {color: #FFFF00; font-size: 12px;}

.IPBanned { padding: 20px; margin: 10px 15px 0 15px; color: #C00000; font-size: 20px; line-height: 25px; border: 2px inset #C00000; background: #FDF6F0; border-radius: 5px;}
.IPBanned span { font-weight: bold; }
	

/* RESPONSIVE CODING */ 

@media only screen and ( max-width: 1220px ) {
	.header {width: 100%;}
	.mainContainer {box-sadow: none; border: none;}
	.menu, .main  {width: 100%; border-radius: 0; border-left: none; border-right: none;}
	.footer {width: calc(100% - 10px); border-radius: 0; border-left: none; border-right: none; margin: 0;}
	.fSection {float: left; margin: 0 5px 0 5px;}
	
}
@media only screen and ( max-width: 1216px ) {
	.menu .menuitem {display: none;}
	.menu .navicon { float: right; display: block; font-size: 31px; padding: 1px 10px 3px 10px; text-shadow: 2px 2px 2px #000000; background: #000000; border-left: 2px #000000 inset; }
	.menu.responsive {position: relative; height: 430px;}
	.responsive {margin-bottom: 11px;}
	.responsive .menuitem { clear: both; margin: 0 0 0 -5px; float: left; padding: 10px 10px 5px 10px; display: block; text-align: left; width: calc(100%); border-top: 1px #d2b677 inset; border-bottom: 1px #d2b677 outset; border-radius: 0; }	
	.responsive .menuitem:last-child {margin-bottom: 10px;}	
	#menuItem_index {display: block;}	

	.videodesc {width: calc(100% - 655px);}
}




@media only screen and ( max-width: 1160px ) {
	.manchester, .somerset {display: none;}
	.mansomResponsive {display: block; float: left; width: 100px; height: 130px; width: 65px;}
	.manchesterResp {clear: both; background: url('../images/manchester.png') no-repeat; height: 60px; width: 65px; background-size: cover;}
	.somersetResp {clear: both; background: url('../images/somerset.png') no-repeat; height: 65px; width: 65px; background-size: cover;}
	.video iframe, .video embed	{width: 550px; height: 310px;}
	.videodesc {width: calc(100% - 605px); }	
	
}

@media only screen and ( max-width: 1080px ) {
	.video iframe, .video embed	{width: 500px; height: 281px;}
	.videodesc {width: calc(100% - 555px); }
}	



@media only screen and ( max-width: 1127px ) {
	/*#menuItem_contacts {display: none;}*/

}

@media only screen and ( max-width: 1000px ) {
	/*#menuItem_links {display: none;}*/

}


/* Center Items / Trigger and format responsve menu */	
@media only screen and ( max-width: 955px ) {
	.wholeHeader {height: 260px; }	
	.header { text-align: center;  height: 210px; }
	.constructLogo {float: none; clear: both;  width: 517px; margin: 0 auto; }
	.motif { float: none; clear: both;  margin: 0 auto;}
	.news {display: none;}
	.newsResp {display: block;}
	.video iframe, .video embed	{width: 436px; height: 245px;}
	.videodesc {width: calc(100% - 490px); }
	.fSection {clear: both; width: calc(100% - 10px); }
	.bruleoText {width: calc(100% - 10px);}
	.footlogo, .socialBar {float: left;}

}

@media only screen and ( max-width: 850px ) {
	.video iframe, .video embed	{width: 350px; height: 198px;}
	.videodesc {width: calc(100% - 405px); }
}	
	
@media only screen and ( max-width: 800px ) {
	.contentRight, .contentLeft {float: none; clear: both; width: calc(100% - 20px); }
	.contentLeft {margin: 0 0 20px 0;}
	.contentRight {margin: 0;}
	.video {position: relative; padding: 0; width:  100%; padding-bottom: 56.25%;  height:0; overflow:hidden; margin: 0 0 10px 0;}
	.video iframe, .video embed	{float: none;  position:absolute; width: calc(100% - 2px); height: calc(100% - 2px); }
	.videodesc {float: none; clear: both; width: calc(100% - 22px); }
	
}

@media only screen and ( max-width: 550px ) {
	.wholeHeader {width: 100%; height: 45vw;}
.header {width: 100%; height: 45vw;}
	.constructLogo { width: 90%; height: 30vw;}
	.mansomResponsive {display: none;}
	.logo {margin: 10px auto; width: 100%; height: calc(100% - 20px);}
	.motif {width: 90%; height: 15vw; margin: 0 auto;}
		
}

/*Reduce logo & motif size at this point */
@media only screen and ( max-width: 470px ) {


/*	
.logo { float: left; width: 452px; height: 116px; margin: 10px 0 0 0;}
.logo a {display: block; width: 452px; height: 116px; }
*/


	
	
	
}