/*
Custom CSS by Yellow Circle Web Solutions Ltd
for www.nationalmesotheliomahelpline.co.uk
*/

body {
  color:#58595b;
  background:#fff !important;
  font-family: arial, sans-serif;
}


/* structure 
*************************************************************************************/

/* this column contains the phone number and callback request*/
#col-3-2 {
  	padding-top:2.75em;
    text-align:right;
}


/* these column contains the filtered drop-down lists in the header and the main body of the home page - not sure which one they will be in yet */
#col-16-1, #col-4-1, #col-1-1 {
  text-align:center;
}

/* navigation menu 
*************************************************************************************/
.navbar .nav > li > a {
  font-family: "bree-serif", sans-serif;
  color:#58595b;
  font-size:1.35em;
}

ul.nav li a:hover, ul.nav li.current_page_item a {
  color:#1c819e !important;
}

/* faq menu - used for definitions on home page */

ul#menu-faq-menu {
  	margin-bottom:1.3em;
}

ul#menu-faq-menu li.menu-item a::before {
  content:"> ";
}


ul#menu-faq-menu li.menu-item a {
  font-size: 1.6em !important;
  font-weight: normal;
  font-family:"bree-serif", sans-serif;
  	margin-left:0;
	padding-left:0;  
	}

/* foooter */
#col-10-1 {
  	border-top:5px solid #1c819f;
}

/* layer slider styles 
*************************************************************************************/
.ls-container  h1 {
  color:#fff;
  font-size:2em;
  line-height:1.2em !important;
  margin-bottom:1em;
}

.ls-container  h2 {
  color:#1c819e;
  font-size:1.4em !important;
  line-height:1.2em !important;
  margin-bottom:0;
  background-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.5);
  padding:5px 1em !important;
  margin-left:0 !important;
}

.ls-container h3 {
  	color:#fff;
	font-size:1.25em;
    text-align:left;
}

/* typogrpahy 
*************************************************************************************/
h1, h2, h3, h4, h5, h6 {
  	font-family: "bree-serif", sans-serif;
    line-height:1.2em;
}

h1 {
  	text-align:left;
}

h1.super-title, h3.element-title, .blue-bg-text {
  background:#51b1e1;
  color:#fff;
  display:block;
  padding:0px 5px 5px;
  text-transform:capitalize;
  font-size: 24.5px;
}

p {
  	font-size:1em;
    margin-bottom:1.5em;
}

span.date::before {
  	content: 'Posted on: ';
}

span.date {
  padding:3px 0;
  border-top:2px solid #ccc;
  border-bottom:2px solid #ccc;
  display:block;
  margin-bottom:1em !important;
  }

.large-text {
	font-size:2em; 
    line-height:1.1em;
    font-family: "bree-serif", sans-serif;
}

.tick-text {
   font-size:1.5em;
   font-family:"bree-serif", sans-serif;
   background:#fff url('http://www.nationalmesotheliomahelpline.co.uk/wp-content/uploads/2014/07/blue-tick.png') no-repeat;
   background-position:left;
   padding:0 1.5em;
   color:#282828;
}

.notice-text {
	font-size:1.75em; 
    line-height:1.1em;
    font-family: "bree-serif", sans-serif;  
}

blockquote {
	border-left: 2px solid #ccc;
    float:right;
    width:25%;
    margin-left:3em;
}

blockquote p {
    font-family:"bree-serif", sans-serif;
    font-size:2.2em;
    border-left:0;
    color:#4fafdf;  
    padding:1em;
}

/* this is the faq box on the home page */
#col-8-1 a.post-title {
  	font-size:.8em;
    font-weight:normal;
}

/* images
*************************************************************************************/
img.img-thumbnail {
  border:1px solid #ccc;
  padding:.2em;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  	
}

/* forms
*************************************************************************************/

/* general form styling */
form.wpcf7-form {
  border:1px solid #cfcfcf;
  padding:1em;  	
}

form legend {
  background:#4fafdf;
  padding:.2em 0;
  color:#fff;
  font-family:"bree-serif", sans-serif;
  text-indent:10px;
}

.wpcf7-text, .wpcf7-textarea {
  width:98.5%;
	}

input[type=submit] {
	height:42px;
	background:#51b1e1;
    color:#fff;  
    margin-top:-10px;
    border:none;
    padding-left:2em;
    padding-right:2em;
    border-radius:4px;
}

.search-query {
	width:175px;  
}

/* this is the callback request form */
div#wpcf7-f110-o1 form.wpcf7-form{
  border:1px solid #cfcfcf;
}

div#wpcf7-f110-o1 form.wpcf7-form label {
  margin-bottom:-1em !important;
}

div#wpcf7-f110-o1 form.wpcf7-form input {
  	width:94.5%;
}
div#wpcf7-f110-o1 form.wpcf7-form input[type="submit"] {
  	display:block;
    margin: 0 auto;
}

div#wpcf7-f110-o1 form.wpcf7-form p {
  	margin-bottom:.5em;
}


/* filtered category drop-downs 
*************************************************************************************/
.d3-options select {
  height:42px;
  border:2px solid #51b1e1;
  -webkit-appearance: none;  /*Removes default chrome and safari style*/
  -moz-appearance: none;  /*Removes default style Firefox*/		  
  background: url('http://www.nationalmesotheliomahelpline.co.uk/wp-content/uploads/2014/08/drop-down-arrow.png') no-repeat;         /*Adds background-image*/
  background-position: right; /*Position of the background-image*/
  white-space: nowrap !important;
  overflow: hidden !important;
  padding-right:42px;
}
		
select::-ms-expand {
    display: none;
}	


/* targeting the firefox browser to not display the blue background as there is a bug in the browser that still displays the default grey dropdown arrow*/
@-moz-document url-prefix() { 
 .d3-options select {
  height:42px;
  border:2px solid #ccc;
  -webkit-appearance: none;  /*Removes default chrome and safari style*/
  -moz-appearance: none;  /*Removes default style Firefox*/		  
  background: none;  /*removes background-image*/
  background-position: right;  /*Position of the background-image*/
}
}
	
	
/*  colours
*************************************************************************************/
.fg-blue {
 	color:#1c819e;
}

.fg-dark-grey {
  	color:#282828;
}

/* extra small devices e.g. smartphones
*************************************************************************************/	  
  
@media only screen  and (min-device-width : 320px) and (max-device-width : 568px) {

  /* column in header containing phone number and call back request link */
#col-3-2 {
  	padding-top:0em !important;
    text-align:center !important;
	margin-top:0 !important;
}
  
/* phone number/call back text in header */  
#col-3-2 p.large-text {
	font-size:1.4em;
  }

/* blue We are sorry text... on the home page */
#col-5-2 {
	margin-top:-1em !important;
	padding-top:0 !important;
  }

#col-11-2 p.text-right {
	 text-align:left;
	 margin-left:.5em;
	}
  
.tick-text {
   font-size:1.4em;
   margin-bottom:1em;
   display:block;
}


  
/* layer slider styles - we hide the captions on mobile phones because the text isn't readable on small screens, or it obscures the image*/

.ls-container  h1 {
 /*  color:#fff;
  font-size:.8em !important;
  line-height:1.2em !important;
  margin-bottom:0;
  padding-left:-6em; !important */
  display:none;
}

.ls-container  h2 {
  display:none;
	}  
  
.ls-container h3 {
  	display:none;
}


/* forms */

input[type=search] {
  	max-width:100px;
}

input[type=submit] {
	height:42px;
	background:#51b1e1;
    color:#fff;  
    margin-top:-10px;
    border:none;
    padding-left:2em;
    padding-right:2em;
    border-radius:4px;
    display:block;
    margin-left:auto;
    margin-right:auto;
}

/* typography */

blockquote {
	border-left: 2px solid #ccc;
    float:none;
    width:100% ;
    margin-left:0;
}

blockquote p {
    font-size:1.7em !important;
}

/* forms */
#col-1-1 input[type=submit] {
  margin-top:5px;	  
	}
}

/* small devices e.g. tablets in portrait mode */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {

.d3-options select {
  height:42px;
  border:2px solid #51b1e1;
  -webkit-appearance: none;  /*Removes default chrome and safari style*/
  -moz-appearance: none;  /*Removes default style Firefox*/		  
  background: url('http://www.nationalmesotheliomahelpline.co.uk/wp-content/uploads/2014/08/drop-down-arrow.png') no-repeat;         /*Adds background-image*/
  background-position: right; /*Position of the background-image*/
  white-space: nowrap !important;
  overflow: hidden !important;
  padding-right:42px;
  max-width:200px;
}

#menu-faq-menu li {
  	font-size:.6em !important;
	}

	  
.tick-text {
   font-size:1.4em;
   margin-bottom:1em;
   display:block;
}
  
  #searchform {
	display:none;
  }
  
  /* captions on images on the home page*/
.ls-inner h2.ls-1 {
		display:none !important;
	  }
	  

/* small devices e.g. tablets in landscape mode */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
#menu-main-menu li {
  font-size:.85em !important;
	}

#menu-faq-menu li {
  	font-size:.7em !important;
	}

input[type=search] {
  	max-width:100px;
}

.tick-text {
   font-family:"bree-serif", sans-serif;
   background:#fff url('http://www.nationalmesotheliomahelpline.co.uk/wp-content/uploads/2014/07/blue-tick.png') no-repeat;
   background-position:left;
   padding:0 0 0em 2em !important;
   color:#282828;
   display:block
   margin-bottom:1.5em;
}
}