/*
Theme Name:     Charlton VH
Description:    
Author:         David Wood
Template:       canvas

(optional values you can add: Theme URI, Author URI, Version, License, License URI, Tags, Text Domain)
*/

/*===== HEADER =====*/

#logo { float: none; }

#logo img { margin: 0 auto; display: block; }

#header { background: transparent !important; }

#header-container { background: url(http://charltonvillagehall.co.uk/wp-content/uploads/2015/12/header-b6.png) center bottom no-repeat, url(http://charltonvillagehall.co.uk/wp-content/uploads/2015/11/header-b1.jpg) center top repeat-x !important; background-color: #525c54 !important; }



/*===== NAVIGATION =====*/

ul#main-nav { min-width: 696px; list-style: none; background-color: transparent; }

ul#main-nav li { display: inline; }

#nav-container #navigation ul#main-nav > li:first-child { border-left: 0px solid #DBDBDB; }

.menus { display: table; margin: 0 auto; }

ul.nav { margin-right: 0; }

#nav-container, #navigation { background-color: transparent; border: none; }

#nav-container { margin-top: -60px; }

ul.nav li.current_page_item a, ul.nav li.current_page_parent a, ul.nav li.current-menu-ancestor a, ul.nav li.current-cat a, ul.nav li.current-menu-item a { background: transparent; color: #8cc248; }

#navigation ul.nav > li a:hover, #navigation ul.nav > li:hover { background: transparent !important; color: #8cc248; }



/*===== GENERAL =====*/

.entry img, img.thumbnail {  border: none; padding: 0; background-color: transparent; }

.twocol-one, .threecol-one, .threecol-two, .fourcol-one, .fourcol-two, .fourcol-three, .fivecol-one, .fivecol-two, .fivecol-three, .fivecol-four, .sixcol-one, .sixcol-two, .sixcol-three, .sixcol-four, .sixcol-five { margin-bottom: 0.5% !important; }

body { background-color: #f1f6e2; }

.flash-panel { position: relative; display: block; width: 100%; height: auto; background-color: #525c54; border-radius: 6px; margin: 0 0 30px; }

.flash-panel-text { clear: both; padding: 10px 5%; width: 100%; position: relative; background-color: transparent; display: block; }

.flash-panel-text h3 { color: #fff; text-align: center; font-size: 30px; width: 90%; }

.flash-panel-text p { font-weight: 400 !important; color: #fff !important; text-align: center; width: 90%; }

.post-meta, #comments { display: none; }

a:hover { text-decoration: none; }



/*===== CALENDAR =====*/

.dp_pec_wrapper .button { display: none !important; }

.dp_pec_wrapper .dp_pec_nav .selectric .label { font-size: 26px; text-transform: none; }

.dp_pec_wrapper .dp_daily_event { font-size: 10px; cursor: pointer; line-height: 1.2em; }




/*===== TYPOGRAPHY =====*/

.entry h1 { color: #8cc248; font-size: 40px; }

.entry h2 { color: #525c54; font-size: 30px; font-weight: 300; }

.entry p.home { color: #525c54; font-size: 20px; line-height: 1.5em; font-weight: 300; }

th { background: #8cc248 !important; color: #fff; }

hr { background-color: #8cc248; border: 0; height: 2px;  margin-bottom: 20px; }




/*===== HOMEPAGE =====*/

#loopedSlider { box-shadow: 0 10px 20px #535c54; }


/*––– Top panels –––*/

.home-panel-1 { width: 100%; height: 300px; background: url(http://charltonvillagehall.co.uk/wp-content/uploads/2015/11/party-3.jpg) top center no-repeat; background-color: #525c54; border-radius: 30px; border: #8cc248 6px solid; }

.home-panel-2 { width: 100%; height: 300px; background: url(http://charltonvillagehall.co.uk/wp-content/uploads/2015/11/marquee.jpg) top center no-repeat; background-color: #525c54; border-radius: 30px; border: #8cc248 6px solid; }

.home-panel-3 { width: 100%; height: 300px; background: url(http://charltonvillagehall.co.uk/wp-content/uploads/2015/11/wedding.jpg) top center no-repeat; background-color: #525c54; border-radius: 30px; border: #8cc248 6px solid; }

.panel-text { line-height: 1.3em; text-align: center; font-size: 30px; color: #fff; padding: 10px 0 15px; bottom: 6px; width: 100%; position: absolute; background-color: #525c54; border-radius: 0 0 24px 24px; font-family: 'Open Sans'; font-weight: 300; }

.panel-text:hover { color: #525c54; background-color: #8cc248; }


/*––– Right text panel –––*/

.home-panel-4 { position: relative; display: block; width: 100%; height: auto; min-height: 360px; background-color: #525c54; border-radius: 30px; border: #8cc248 6px solid; }
.panel-text-4 { clear: both; padding: 10px 0 15px 0; width: 100%; position: relative; background-color: #8cc248; border-radius: 22px 22px 0 0; display: block; }
.panel-text-4a { line-height: 1.3em; text-align: left; font-size: 30px; color: #fff; padding: 0 0 0 15px; font-family: 'Open Sans'; font-weight: 700; }
.panel-text-4b { display: block; position: relative; width: 100%; height: auto; margin-bottom: 20px; clear: both; }
.panel-text-4b p { line-height: 1.3em; text-align: left; font-size: 20px !important; color: #fff !important; margin: 0; padding: 10px 0 0 15px; position: relative; background-color: transparent; font-family: 'Open Sans'; font-weight: 400; }


/*––– Bottom text panel – left –––*/

.home-panel-5 { position: relative; display: block; width: 100%; height: auto; min-height: 165px; background-color: #525c54; border-radius: 30px; border: #525c54 6px solid;  }
.panel-text-5 { float: left; padding: 30px 0 15px 30px; width: 45%; position: relative; background-color: transparent; display: inline-block; color: #fff; }
.panel-text-5 h3 { letter-spacing: -1px; font-size: 60px; clear: both; padding: 0; margin: 0; position: relative; background-color: transparent; display: block; color: #fff; font-family: 'Open Sans'; font-weight: 300; }
.width60 { width: 60% !important; }


/*––– Bottom text panel – right –––*/

.panel-text-5a { float: right; padding: 0; margin: -6px -6px 0 0; width: 50%; height: auto; min-height: 165px; position: relative; background-color: #8cc248; display: inline-block; color: #fff; border-radius: 0 30px 30px 0; border: #8cc248 6px solid; }
.panel-text-5aa { float: left; padding: 20px 40px 0; margin: 0; height: auto; background-color: transparent; display: inline-block; color: #fff; }
.panel-text-5aa h4 { letter-spacing: -1px; font-size: 26px; font-weight: 700; line-height: 1.6em; padding: 0; margin: 0; background-color: transparent; color: #fff; }
.panel-text-5aa h5 { letter-spacing: -1px; font-size: 22px; font-weight: 700; line-height: 1.3em; padding: 0; margin: 0; background-color: transparent; color: #fff; }

.panel-text-5b { float: right; padding: 0; margin: -6px -6px 0 0; width: 50%; height: auto; min-height: 165px; position: relative; background-color: #8cc248; display: inline-block; color: #fff; border-radius: 0 30px 30px 0; border: #8cc248 6px solid; }


/*===== FOOTER =====*/

.logo-band { background-color: #8cc248; padding: 10px 0 0; border-top: #525c54 6px solid; }
.logo-band-container { max-width: 1080px; margin: 0 auto; }

#footer-widgets { margin-top: -20px; }
#footer-widgets h4 a { color: #fff; }
#footer-widgets h4 a:hover { color: #525c54; text-decoration: none; }
.footer-left, .footer-left2 { text-align: right; }

#footer a { color: #fff; }
#footer a:hover { color: #525c54; text-decoration: none; }



.mobile-hide { display: block; }
.mobile-show { display: none; }



/*===== SCREEN SIZES =====*/

@media only screen 
and (max-width : 850px) {

.home-panel-5 { min-height: 135px; }

.panel-text-5a { min-height: 135px; }

.panel-text-5 h3 { font-size: 40px; }

.panel-text-5aa h4 { font-size: 20px; }


/*––– Bottom text panel – left –––*/

.home-panel-5 { position: relative; display: block; width: 100%; height: auto; min-height: 265px; background-color: #525c54; border-radius: 30px; border: #525c54 6px solid;  }
.panel-text-5 { float: left; padding: 30px 0 15px 20px; width: 100%; position: relative; background-color: transparent; display: inline-block; color: #fff; }
.panel-text-5 h3 { letter-spacing: -1px; font-size: 60px; clear: both; padding: 0; margin: 0; position: relative; background-color: transparent; display: block; color: #fff; font-family: 'Open Sans'; font-weight: 300; }
.width60 { width: 40% !important; }


/*––– Bottom text panel – right –––*/

.panel-text-5a { float: right; padding: 0; margin: 20px -6px -6px; width: 100%; height: auto; min-height: 165px; position: relative; background-color: #8cc248; display: inline-block; color: #fff; border-radius: 0 0 30px 30px; border: #8cc248 6px solid; }
.panel-text-5aa { float: left; padding: 20px 20px 0; margin: 0; height: auto; background-color: transparent; display: inline-block; color: #fff; }
.panel-text-5aa h4 { letter-spacing: -1px; font-size: 26px; font-weight: 700; line-height: 1.6em; padding: 0; margin: 0; background-color: transparent; color: #fff; }
}

@media only screen 
and (max-width : 780px) {

ul.nav li a { font-size: 16px !important; }

.mobile-hide { display: none; }
.mobile-show { display: block; }

h2.footer-left a { color: #fff !important; }

.footer-left2 { font-size: 16px !important; }

#content { padding-top: 80px; }

.page-id-2 #content, .page-id-5 #content, .page-id-14 #content { padding-top: 0 !important; }

#loopedSlider.business-slider img.woo-image { min-height: 220px; height: 220px; margin-left: 0 !important; max-width: 300%; width: auto !important; overflow: hidden !important; }

#header { padding-top: 20px !important; }

#loopedSlider { margin-top: 30px; }

.logo-band-container { padding: 0 20px; }

.footer-left, .footer-left2 { text-align: left; }

.home-panel-1, .home-panel-2, .home-panel-1 .panel-text, .home-panel-2 .panel-text { margin-bottom: 20px; }
}

@media only screen 
and (max-width : 650px) {

#loopedSlider.business-slider img.woo-image { margin-left: -100px !important; }

.width60 { width: 50% !important; }
.panel-text-5 h3 { font-size: 40px; }

}

@media only screen 
and (max-width : 400px) {

#loopedSlider.business-slider img.woo-image { margin-left: -200px !important; }

.panel-text-5aa { float: left; padding: 20px 20px 0; margin: 0 0 10px; height: auto; background-color: transparent; display: inline-block; color: #fff; }
.panel-text-5aa h4 { letter-spacing: -1px; font-size: 20px; font-weight: 700; line-height: 1.6em; padding: 0; margin: 0; background-color: transparent; color: #fff; }

}

@media only screen 
and (max-width : 400px) {

.panel-text-5 h3 { font-size: 30px; }

th, tr, td { font-size: 14px !important; }

}