/*Meticulous Matters Template Styles */
body {background-color: #FFFFFF;
background-image: url(calm_water_bg.jpg);
font-style:normal; font-family: 'Verdana', sans-serif;
line-height: normal;
      }

/*Custom font face*/
@font-face {font-family: "Raleway-Italic";
  src: url("Raleway-Italic-VariableFont_wght.ttf"); /* IE9*/
  src: url("Raleway-VariableFont_wght.ttf") format("embedded-opentype"), /* IE6-IE8 */
  url("Raleway-Italic-VariableFont_wght.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
}
@font-face {font-family: "Raleway";
  src: url("Raleway-VariableFont_wght.ttf"); /* IE9*/
  src: url("Raleway-VariableFont_wght.ttf") format("embedded-opentype"), /* IE6-IE8 */
  url("Raleway-VariableFont_wght.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
}


td {
	padding: 0px 5px 0px 10px;
}

li {
	line-height: 25px;	
}

a {
    color: #1f70c1;
    text-decoration: underline;
}

/*set container defaults*/
.container {
	font-family:"Tahoma"!important;
	font-size:16px;
	border: 2px solid;
	padding: 5px;
	margin: 40px auto auto auto;
	background-color: #FFFFFF;
	/*background-image: url(green_noise.png);*/
}

	h1 {
	font-family:"Raleway"!important;
    font-size:32px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
	letter-spacing: .1em;
	}
	  
	h2    {
	font-family:"Raleway"!important;
    font-size:24px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
	letter-spacing: .1em;
      }
	  
	h3    {
	font-family:"Raleway"!important;
    font-size:18px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
	letter-spacing: .1em;
      }
	 ul {
		 padding: 0px 20px 10px 30px;
    }
	ol {
		 padding: 0px 20px 10px 30px;
    }
	

/* Style Menu - IDs are listed first, followed by classes, top to bottom*/
/* PFL - Putting the text-align:center on the mainmenu-wrapper and display:inline-block on the .navbar-inner 
was the only way I could find to center the menu*/

#banner_top {
	display: table;
	height: 260px;
	position: relative; 
	overflow: hidden;
}

#banner-wrapper {

}

#mainmenu-wrapper { 
	text-align: center;
	  }

#mainmenu { 
	  font-color: black;
      font-weight: normal;
      line-height: 20px;
	  margin: 0px 0px 0px 15px;
      }  
	  
#head_right {
	font-size: x-large;
	padding: 10px 0 0 0;
	line-height: 20px;
}

#head_left {
	font-size: medium;
}

#head_ctr-wrapper{
}

#head_ctr{
	color: white;
	background-size: cover;
	height: 266px;
	text-align: center;

}

#header_row {
	margin:auto;
}

#content_long {
	margin: auto;
	padding: 0px 10px 10px 15px;
	text-align: left;
	font-size: large;
	vertical-align: middle;
	line-height: 25px;
}

#call_submit {
	margin: auto;
	padding: 0px 0px 0px 0px;
	text-align: center;
	font-size: normal;
	vertical-align: middle;
	border: solid;
	border-color: #c1ae1f;
}


#block3-1 {
	margin: auto;
	padding: 0px 10px 10px 15px;
	text-align: center;
	font-size: large;
	vertical-align: middle;
	text-align: left;
}

#block3-2 {
	margin: auto;
	padding: 0px 10px 10px 15px;
	text-align: center;
	font-size: large;
	vertical-align: middle;
	text-align: left;
}

#block3-3 {
	margin: auto;
	padding: 0px 10px 10px 15px;
	text-align: center;
	font-size: large;
	vertical-align: middle;
	text-align: left;
}

#block3-4 {
	margin: auto;
	padding: 0px 10px 10px 15px;
	text-align: center;
	font-size: large;
	vertical-align: middle;
	text-align: left;
}

#band {
	padding: 0px;
	height: 3px;
	margin: 0 0 5px 0;
	background-color: #1F70C1;
}

#head_textbox {
	background: rgba(0, 0, 0, 0.6); 
	height: 15%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	bottom: 0;
	position:absolute;
}

/*I'm using module class suffixes to control the styles of modules on positions on specific pages. 
They just need to start with a space when you enter it in the joomla backend*/

/*PFL - Set the default styling for all images added to the site. To avoid drop shadow, add the three references with :none (see .logo) */

img {
	-moz-box-shadow: 4px 4px 10px #000;
	-webkit-box-shadow: 4px 4px 10px #000;
	box-shadow: 4px 4px 10px #000;
	margin:2px 0px 0px 0px;
}

.images_with_caption {
    display:float;
    text-decoration:none;
    color:black;
	text-align:center;
	font-weight: bold;
	}

/*Search formatter*/
.finder {
	height: 30px;
}

.banner-wrapper {
 	background-image: url("/mmatters/images/banners/MM-beachy_banner.jpg");
	min-height: 250px;	
	vertical-align: middle;
	text-align: center;
}

.head_right p {
	font-size: medium;
	font-weight: bolder;
	color: black;
}


.logo p {
	padding: 8px 0 0 10px;
	/*PFL - the commented out border below makes a graphic boarder around the logo. I felt it was too distracting*/
	/* border: 5px solid transparent;
			padding: 8px;
			border-image: url(border.png) 30 stretch; */
}
/*PFL - Shutting off the default drop shadow effect. This way all the images I add to any page will automatically have the same drop shadow except the logo*/
.logo img {
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
}


/*Style form buttons to match site buttons*/

.btn {
	box-shadow: 3px 4px 0px 0px #000000;
	background:linear-gradient(to bottom, #991fc1 5%, #1f70c1 100%);
	background-color:#991fc1;
	border-radius:5px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	font-weight:bold;
	padding:7px 12px;
	text-decoration:none;
	text-shadow:0px 1px 0px #000000;
}

/*Set default style for buttons*/

.wksButton:link {
	box-shadow: 3px 4px 0px 0px #000000;
	background:linear-gradient(to bottom, #991fc1 5%, #1f70c1 100%);
	background-color:#991fc1;
	border-radius:5px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	font-weight:bold;
	padding:7px 12px;
	text-decoration:none;
	text-shadow:0px 1px 0px #000000;
}

.wksButton:active {
	position:relative;
	top:1px;
	color:#ffffff;
	text-decoration:none;
}

.wksButton:hover {
	background:linear-gradient(to bottom, #1f70c1 5%, #991fc1 100%);
	background-color:#1f70c1;
	color:#ffffff;
	text-decoration:none;
}

.wksButton:visited {
	position:relative;
	top:1px;
	color:#ffffff;
	text-decoration:none;
}

/*NavBar Styling*/
/* Style Menu - IDs are listed first, followed by classes, top to bottom*/
/* PFL - Putting display:inline-block on the .navbar-inner was the only way I could find to center the menu*/
/*NavBar Styling*/	  
.navbar-inner {
  /*display: inline-block;*/
  min-height: 40px;
  padding-right: 5px;
  padding-left: 5px;
  background-color: #FFFFFF;
  /*background-image: linear-gradient(to bottom, #ffffff, #A1C3E5);
  background-repeat: repeat-x;*/
 /* border: 1px solid #d4d4d4;
          border-radius: 4px;
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);*/
}

.navbar .nav > li > a {
  float: none;
  font-weight: normal;
  padding: 10px 8px 10px;
  /*Text color of unselected menu option in list*/
  color: #000000;
/*  text-decoration: none;
  text-shadow: 0 1px 0 #ffffff;*/
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
  color: #000000;
  text-decoration: underline;
  /*background-color: #c1ae1f;*/
}

.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
  color: #000000;
  text-decoration: underline;
  background-color: #FFFFFF;
  /*-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
     -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
          box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);*/
}

.mm_footer {
	background-color: #008B83;
	color: #FFFFFF;
	padding: 10px 10px 10px 10px;
	margin: auto;
	]