@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/***************************** COMMON STYLES *********************************/

@font-face {
    font-family: 'open_sansregular';
    src: url('fonts/opensans-regular-webfont.eot');
    src: url('fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans-regular-webfont.woff') format('woff'),
         url('fonts/opensans-regular-webfont.ttf') format('truetype'),
         url('fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sanssemibold';
    src: url('fonts/opensans-semibold-webfont.eot');
    src: url('fonts/opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans-semibold-webfont.woff') format('woff'),
         url('fonts/opensans-semibold-webfont.ttf') format('truetype'),
         url('fonts/opensans-semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

html, body {
	background: url(../images/body-bg-repeat.jpg) center top repeat-y;
}

html, body, h1, h2, h3, h4, h5, h6, p, input, textarea, select {
	font-family: "open_sansregular", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #333333;
	font-weight: normal;
	padding: 0;
	margin: 0;
}

.parent-div {
	width: 100%;
	background: url(../images/body-bg.jpg) center top no-repeat;
}

.header-tel, .purple-boxes, .left-heading, .right-heading, h1, h2, .purple-heading,.dark-purple-heading, .sub-menu a.selected {
	font-family: "open_sanssemibold", Arial, Helvetica, sans-serif;	
}

a.hover-effect:link, a.hover-effect:visited {
	-webkit-transition: opacity 1s ease-in-out;
  	-moz-transition: opacity 1s ease-in-out;
  	-ms-transition: opacity 1s ease-in-out;
  	-o-transition: opacity 1s ease-in-out;
  	transition: opacity 1s ease-in-out;
	text-decoration: none;
}

	a.hover-effect:hover {
		zoom: 1;
  		filter: alpha(opacity=70);
  		opacity: 0.7;
	}
	
a.hover-effect1:link, a.hover-effect1:visited {

}

	a.hover-effect1:hover {
		-webkit-transition: color 1000ms linear;
     	-moz-transition: color 1000ms linear;
     	-o-transition: color 1000ms linear;
     	-ms-transition: color 1000ms linear;
     	transition: color 1000ms linear;
	}

a:link, a:visited {
	text-decoration: underline;
}

	a:hover {
		text-decoration: none;
	}

h1, h2, .sub-menu a:hover, .sub-menu a.selected, .header-address-tel, .header-address-tel a, .dark-purple-heading, .left-heading, .right-heading, .testimonial-box a, a:link, a:visited {
	color: #3c3a55;	
}
	
h1 {
	font-size: 30px;
	margin: 0 0 23px 0;
	padding: 0;
	line-height: 30px;
	text-transform: uppercase;	
}

h2, h2.lowercase {
	font-size: 16px;
	line-height: 16px;
	text-transform: uppercase;
	margin: 0 0 25px 0;
	padding: 0;	
}

h2.lowercase {
	text-transform: none;
}

.para {
	overflow: hidden;
	line-height: 18px;	
}

.float-right {
	margin-left: 10px;
	float: right;	
}

.float-left {
	margin-right: 10px;
	float: left;	
}

.search {
	height: 27px;
	width: 200px;
	overflow: hidden;
	display: block;
	margin: auto;
}

	.search-textbox {
		outline: none;
		background: #ffffff;
		height: 25px;
		width: 151px;
		padding: 0px 0px 0px 8px;	
		float: left;
		border: 1px solid #dadadb;
		border-right: none;
	}

		.search-button, .newsletter-button {
			border: none;
			cursor: pointer;
			width: 39px;
			height: 27px;
			float: left;
			text-indent: -9999px;
			background: url(../images/search-button.jpg) left top no-repeat;	
		}

.newsletter {
	height: 27px;
	width: 165px;
	overflow: hidden;
	display: block;
	
}

	.newsletter-textbox {
		outline: none;
		background: #ffffff;
		height: 25px;
		width: 117px;
		padding: 0px 0px 0px 8px;	
		float: left;
		border: 1px solid #dadadb;
		border-right: none;
	}

.twitter-share-button {
	width: 82px !important;	
}

/* this overrides 90px to 72px width to +1 button */
#___plusone_0 {
	width:60px !important;
}

.right-margin {
	display: block;
	margin-bottom: 28px;	
}
/***************************** Mobile Layout: 480px and below. *********************************/

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 96%;
	padding-left: 0;
	padding-right: 0;
}

.hide-mobile {
	visibility: hidden;	
	display: none;
}

.sub-menu {
	overflow: hidden;	
}

	.sub-menu a {
		display: block;
		float: left;
		border-right: 1px solid #6e99a1;
		margin-right: 20px;
		padding-right: 20px;
		color: 	#68589f;
		font-size: 16px;
	}
	
		.sub-menu a#last-link {
			border-right: none;	
		}

/* SLIDER STYLES */
.headerimg { 
	background-position: center top; 
	background-repeat: no-repeat; 
	width: 100%; 
	height: 100%;
	position: absolute; 
}

	#headermenuanm { 
		width: 100%; 
		z-index: 1000; 
		position: relative; 
	}

/* HEADER STYLES */

header {
	padding: 0px 0px;
	background: #ffffff;
	margin-bottom: 300px;
}

header.sub-header {
	padding: 0px 0px;
	background: #ffffff;
	margin-bottom: 0;
	height: auto;
}

/* TOP MENU STYLES */

nav.header {
	background: url(../images/header-bg.png) left top repeat-x;
  	height: 37px;
  	padding: 10px 0 0 10px;
}

	nav.header ul, nav.header li {
	  margin: 0 0;
	  padding: 0 0;
	  list-style: none;
	}

		nav.header li {
			padding: 0px 18px;	
			float: left;
			background: url(../images/top-menu-sepearatoe.jpg) right center no-repeat;
		}

		nav.header ul li.last {
			padding-right: 0px;	
			background: none;
		}

		nav.header ul li.first {
			padding-left: 0px;	
		}

			nav.header a {
				display: block;
				font-size: 11px;
				color: #333333;
				line-height: 11px;	
				padding: 7px;
				border: 1px solid transparent;
				text-decoration: none;
				text-transform: uppercase;
			}

				nav.header a:hover, nav.header a.selected {
					color: #575277;
					border: 1px solid #cccccc;
				}

					/* checkbox element: for mobile navigation button */
					nav.header input {
					  display: none;
					  margin: 0 0;
					  padding: 0 0;
					  width: 30px;
					  height: 30px;
					  opacity: 0; /* hide the checkbox */
					  filter: alpha(opacity=0);
					  cursor: pointer;
					}

						/* for visual purpose */
						nav.header label {
						  display: none;
						  font-size: 200%;
						  width: 30px;
						  height: 30px;
						  line-height: 30px;
						  text-align: center;
						}

.logo {
	padding: 10px 0px 0px 0px;
	text-align: center;
}

.header-middle {
	padding: 0px 20px;	
}

.header-tel {
	font-size: 20px;
	margin-top: 10px;
	text-align: center;	
}

.header-address {
	font-size: 13px;
	text-align: center;	
	padding-bottom: 10px;	
}

.heaser-sm-buttons {
	overflow: hidden;
	padding-bottom: 20px;	
}

/* BUCKET MENU STYLES */

nav.bucket {
  	height: 59px;
	background: #3c3a55;
}

	nav.bucket ul, nav.bucket li {
	  margin: 0 0;
	  padding: 0 0;
	  list-style: none;
	}

		nav.bucket li {	
			float: left;
			background: url(../images/bucket-seperator.jpg) right bottom no-repeat;
		}

		nav.bucket ul li.last {
			background: none;
		}

			nav.bucket a {
				display: block;
				font-size: 11px;
				color: #ffffff;
				line-height: 15px;	
				padding: 17px 24px 0px 24px;
				text-decoration: none;
				text-transform: uppercase;
				height: 42px;
				text-align: center;
			}
			
				nav.bucket a:hover, nav.bucket a.selected {
					background: url(../images/bucket-link-hover.jpg) left top repeat-x;
				}

					/* checkbox element: for mobile navigation button */
					nav.bucket input {
					  display: none;
					  margin: 0 0;
					  padding: 0 0;
					  width: 30px;
					  height: 30px;
					  opacity: 0; /* hide the checkbox */
					  filter: alpha(opacity=0);
					  cursor: pointer;
					}

						/* for visual purpose */
						nav.bucket label {
						  display: none;
						  font-size: 200%;
						  width: 30px;
						  height: 30px;
						  line-height: 30px;
						  text-align: center;
						}

.body-transparent-div {
	background: url(../images/body-transparent-top.png) left top repeat-x;
	height: 3px;	
}

.main-body {
	background: #ffffff;
	overflow: hidden;	
	padding: 32px 0px;
}

.left-parent, .middle-parent, .right-parent  {
	overflow: hidden;
	margin-bottom: 10px;
	padding: 0px 20px;	
}


.purple-boxes, .google-places, .dr-oogle, .widgets {
	margin-right: 10px;
	margin-bottom: 10px;
	float: left;
}

.dr-oogle {
	margin-right: 0px;	
}

.purple-boxes a {
	background: #3c3a55;
	color: #ffffff;
	text-decoration: none;
	text-transform: uppercase;	
	font-size: 14px;
	line-height: 18px;
	display: block;
	padding: 12px 8px 11px 8px;
	overflow: hidden;
}

.purple-boxes .text {
	float: left;
	display: none;	
}

.purple-boxes .image {
	float: right;	
}

.purple-boxes :hover {
	color: #9b98ac;	
}

.testimonial-box {
	display: none;
}

.left-heading {
	display: none;
}

.testimonial-text {
	display: none;
}

.side-margin {
	display: none;	
}

.google-places a, .dr-oogle a {
	background: #3c3a55 url(../images/google-places-icon.png) center center no-repeat;	
	height: 55px;
	width: 54px;
	display: block;
	padding: 12px 8px 11px 8px;
	text-indent: -9999px;
}

.dr-oogle a {
	background: #3c3a55 url(../images/oogle.png) center center no-repeat;	
}

.sepearator {
	border-bottom: 1px solid #e8e8e8;
	margin: 25px 0px;	
}

.recent-blog-post {
	overflow: hidden;
	margin-bottom: 20px;
}

.purple-heading {
	font-size: 11px;
	color: #6958a0;
	text-transform: uppercase;	
}

.calender-icon {
	float: left;
	margin: 2px 5px 0px 0px;	
}

.comments-icon {
	float: left;
	margin: 2px 5px 0px 15px;	
}

a.readmore:link, a.readmore:visited {
	display: block;
	padding: 6px;
	background: #3c3a55;
	float: left;
	color: #ffffff;
	font-size: 12px;	
	text-decoration: none;
	-webkit-transition: background-color 1000ms linear;
     -moz-transition: background-color 1000ms linear;
     -o-transition: background-color 1000ms linear;
     -ms-transition: background-color 1000ms linear;
     transition: background-color 1000ms linear;
}

a.readmore:hover, a.readmore:active {
	background: #9b98ac;
		
}

.newsletter-main {
	padding: 15px;
	background: #e7e7e7;
	overflow: hidden;
	margin: auto;
	margin-bottom: 8px;	
	width: 170px;
	margin-top: 25px;
}

.tell-a-friend {
	width: 200px;
	height: 78px;
	margin: auto;
	margin-bottom: 8px;	
}

.tell-a-friend a {
	width: 185px;
	height: 58px;
	display: block;
	padding: 20px 0px 0px 15px;
	background: #e7e7e7 url(../images/tell-a-friend-box.jpg) right top no-repeat;
	text-decoration: none;
}

.dark-purple-heading {
	font-size: 15px;
	text-transform: uppercase;	
}

.social-icon {
	float: left;
	margin-right: 5px;	
}

footer {
	background: #333333;
	text-align: center;	
	padding: 20px 10px;	
}

nav.bottom-links {
	display: none;
}

.copyright, .copyright a {
	color: #ffffff;
	text-align: center;	
}

.warning-font {
	color: #ff0006;	
}

.form-testimonial {
	overflow: hidden;
	margin: 0px 20px;
	padding: 20px;
	border: solid 1px #68589f;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.t-formfield {
	border: 1px solid #3b2314;	
	padding-left: 10px;
	color: #333333;
	height: 22px;
}

	.form-left {
		float: left;
		width: 190px;
	}

		.form-sub {
			height: 24px;
			margin-bottom: 5px;
			padding-right: 5px;
			padding-top: 3px;
			text-align: right;
		}

			.form-right {
				float: left;
				padding-left: 5px;
				width: 220px;
			}

				.form-sub-r {
					height: 27px;
					margin-bottom: 5px;
					padding-top: 2px;
				}

					.textboxes {
						float: left;
						font-size: 13px;
						width: 120px;	
						
					}

							.button1 {
								background: #69589f;
								width: 210px;
								height: 30px;
								border: none;
								color: #ffffff;
								font-weight: normal;
								cursor: pointer;
							}

.testimonials-name-sub {
	text-align: right;
	padding-top: 10px;	
	font-weight: bold;
}


/************************** Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. **********************/

@media only screen and (min-width: 481px) {
.gridContainer {
	width: 96%;
	padding-left: 0;
	padding-right: 0;
}

}


@media all and (max-width: 1259px) and (min-width: 1024px) {
	
.left-parent {
	width: 18%;
	padding: 0px 2%;
	float: left;	
	margin: 0px;
}

.middle-parent {
	float: left;
	width: 54%;
	padding: 0px 1%;	
	margin: 0px;
}

.right-parent {
	width: 18%;
	padding: 0px 2%;
	float: left;
	margin: 0px;	
}	

.main-body {
	background: #ffffff;;
}

.purple-boxes {
	width: 200px;
	margin-bottom: 6px;
	float: none;
	margin-right: 0px;
}

.purple-boxes a {
	padding: 14px 8px 14px 16px;
}

.purple-boxes .text {
	display: block;	
}

.testimonial-box {
	overflow: hidden;
	display: block;
	line-height: 18px;
}

.left-heading, .right-heading {
	font-size: 16px;
	text-transform: uppercase;	
	margin-bottom: 13px;
	display: block;
}

.widgets {
	margin-right: 0px;
	margin-bottom: 0px;
	float: none;
}

.testimonial-box a {
	display: block;
	background: url(../images/left-box-bottom-bg.jpg) left top repeat-x;
	height: 24px;
	text-align: center;
	padding: 10px 0 0 0;
	text-decoration: none;
}

.testimonial-box a:hover {
	color: #9b98ac;	
}

.side-margin, .right-margin {
	display: block;
	margin-bottom: 28px;	
}

.google-places {
	margin-right: 0px;
	float: none;
	margin-bottom: 6px;
}

.google-places a {
	background: url(../images/google-places-box.jpg) center center no-repeat;
	width: 200px;
	height: 78px;
	padding: 0;
}

.dr-oogle {
	margin-right: 0px;
	float: none;
	margin-bottom: 6px;
}

.dr-oogle a {
	width: 200px;
	height: 78px;
	background: url(../images/dr-oogle-box.jpg) center center no-repeat;
	padding: 0;
}

}

/************ Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. ***********/

@media only screen and (min-width: 1259px) {
	
.gridContainer {
	width: 98%;
	max-width: 1200px;
	padding-left: 0;
	padding-right: 0;
	margin: auto;
}

header {
	background: url(../images/header-bg.png) left top repeat-x;
	height: 600px;	
	padding: 0px;
	margin: 0px;
}

.logo {
	padding: 25px 0px 0px 0px;
	float: left;
	margin: 0;
	text-align: left;	
}

.header-address-tel {
	padding: 20px 00px 0px 0px;
	float: right;
}

.header-tel {
	font-size: 30px;
	padding-bottom: 10px;	
	line-height: 30px;
	text-align: right;
}

.header-address {
	font-size: 14px;
	text-align: right;	
}

.heaser-sm-buttons {
	padding: 0px;
	float: right;
	width: 230px;	
}

.header-middle {
	overflow: hidden;
	height: 131px;	
}

.hide-mobile {
	visibility: visible;
	display: inline;
}

.widgets {
	margin-right: 0px;
	margin-bottom: 0px;
	float: none;
}

.main-body {
	background: url(../images/body-div-bg.jpg) left top repeat-y;
}

.left-parent {
	width: 200px;
	padding: 0px 20px;
	float: left;	
	margin: 0px;
}

.middle-parent {
	float: left;
	width: 680px;
	padding: 0px 20px;	
	margin: 0px;
}

.right-parent {
	width: 200px;
	padding: 0px 20px;
	float: left;
	margin: 0px;	
}

.purple-boxes {
	width: 200px;
	margin-bottom: 6px;
	float: none;
	margin-right: 0px;
}

.purple-boxes a {
	padding: 14px 8px 14px 16px;
}

.purple-boxes .text {
	display: block;	
}

.testimonial-box {
	overflow: hidden;
	display: block;
	line-height: 18px;
}

.left-heading, .right-heading {
	font-size: 16px;
	text-transform: uppercase;	
	margin-bottom: 13px;
	display: block;
}

.testimonial-box a {
	display: block;
	background: url(../images/left-box-bottom-bg.jpg) left top repeat-x;
	height: 24px;
	text-align: center;
	padding: 10px 0 0 0;
	text-decoration: none;
}

.testimonial-box a:hover {
	color: #9b98ac;	
}

.side-margin, .right-margin {
	display: block;
	margin-bottom: 28px;	
}

.google-places {
	margin-right: 0px;
	float: none;
	margin-bottom: 6px;
}

.google-places a {
	background: url(../images/google-places-box.jpg) center center no-repeat;
	width: 200px;
	height: 78px;
	padding: 0;
}

.dr-oogle {
	margin-right: 0px;
	float: none;
	margin-bottom: 6px;
}

.dr-oogle a {
	width: 200px;
	height: 78px;
	background: url(../images/dr-oogle-box.jpg) center center no-repeat;
	padding: 0;
}

.recent-blog-post {
	overflow: hidden;
	float: left;
	width: 210px;
}

.recent-blog-post.one, .recent-blog-post.two {
	margin-right: 25px;	
}

footer {
	min-height: 130px;
	background: #333333;
	text-align: center;	
	padding: 40px 0 0 0;	
}

nav.bottom-links {
	margin: auto auto 20px auto;
	display: block;
	overflow: hidden;
	padding: 15px 0px;
	background: #2d2d2d;
	width: 58%;	
}

	nav.bottom-links ul, nav.bottom-links li {
		margin: 0;
		padding: 0;
		list-style-type: none;	
	}

		nav.bottom-links li {
			float: left;	
			border-right: 2px solid #a5a5a5;
			padding: 0 40px 0 40px;
		}

			nav.bottom-links li.last {	
				border-right: none;
				padding: 0 40px 0 40px;
			}

				nav.bottom-links li a {
					text-transform: uppercase;
					font-size: 11px;
					color: #ffffff;
					text-decoration: none;
				}

nav.bottom-links li a:hover, nav.bottom-links li a.selected {
	color: #7d65c9;
}

}

@media only screen and (min-width: 1370px) {
nav.bucket li.one a {
				width: 	122px;
				padding: 17px 0px 0px 0px;
			}
			
			nav.bucket li.two a {
				width: 	100px;
				padding: 17px 0px 0px 0px;
			}
			
			nav.bucket li.three a {
				width: 	96px;
				padding: 17px 0px 0px 0px;
			}
			
			nav.bucket li.four a {
				width: 	119px;
				padding: 17px 0px 0px 0px;
			}
			
			nav.bucket li.five a {
				width: 	106px;
				padding: 17px 0px 0px 0px;
			} 
			
			nav.bucket li.six a {
				width: 	110px;
				padding: 17px 0px 0px 0px;
			}
			
			nav.bucket li.seven a {
				width: 	113px;
				padding: 17px 0px 0px 0px;
			}
			
			nav.bucket li.eight a {
				width: 	110px;
				padding: 17px 0px 0px 0px;
			}
			
			nav.bucket li.nine a {
				width: 	104px;
				padding: 17px 0px 0px 0px;
			}
			
			nav.bucket li.ten a {
				width: 	104px;
				padding: 17px 0px 0px 0px;
			}
			
			nav.bucket li.last a {
				width: 	113px;
				padding: 17px 0px 0px 0px;
			}
			
}

@media all and (max-width: 1370px) and (min-width: 1000px) {
	/* TOP MENU STYLES */

nav.header {
	background: url(../images/header-bg.png) left top repeat-x;
  	height: 37px;
  	padding: 10px 0 0 10px;
}

	nav.header ul, nav.header li {
	  margin: 0 0;
	  padding: 0 0;
	  list-style: none;
	}

		nav.header li {
			padding: 0px 5px;	
			float: left;
			background: url(../images/top-menu-sepearatoe.jpg) right center no-repeat;
		}

		nav.header ul li.last {
			padding-right: 0px;	
			background: none;
		}

		nav.header ul li.first {
			padding-left: 0px;	
		}

			nav.header a {
				display: block;
				font-size: 11px;
				color: #333333;
				line-height: 11px;	
				padding: 7px;
				border: 1px solid transparent;
				text-decoration: none;
				text-transform: uppercase;
			}

				nav.header a:hover, nav.header a.selected {
					color: #575277;
					border: 1px solid #cccccc;
				}

					/* checkbox element: for mobile navigation button */
					nav.header input {
					  display: none;
					  margin: 0 0;
					  padding: 0 0;
					  width: 30px;
					  height: 30px;
					  opacity: 0; /* hide the checkbox */
					  filter: alpha(opacity=0);
					  cursor: pointer;
					}

						/* for visual purpose */
						nav.header label {
						  display: none;
						  font-size: 200%;
						  width: 30px;
						  height: 30px;
						  line-height: 30px;
						  text-align: center;
						}
						
nav.bucket a {
	padding: 17px 10px 0px 10px;
}
						
}


@media only screen and (max-width: 1000px) {
/*************************************  TOP MENU MOBILE NAVIGATION ***********************/

/* checkbox element: for mobile navigation button */
nav.header input {
	display: none;
  	margin: 0 0;
  	padding: 0 0;
  	width: 30px;
  	height: 30px;
  	opacity: 0; /* hide the checkbox */
  	filter: alpha(opacity=0); 
  	cursor: pointer;
}

/* for visual purpose */
nav.header label {
	display: none;
  	font-size: 200%;
  	width: 30px;
  	height: 30px;
  	line-height: 30px;
  	text-align: center;
}

nav.header {
	/* we want to absolute positioning the menu, 
	checkbox and label element to its parent, so this is needed */
    position: relative;
	z-index: 5;
}

	nav.header ul {
    	position: absolute;
    	top: 100%;
    	right: 0;
    	left: 0;
    	background-color: #ffffff;
    	height: 0; /* set the sub menu height to `0` */
    	visibility: hidden; /* use `visibility:hidden` instead of `display:none`, so we can animate the sub menu height */
    	overflow: hidden;
    	/* use CSS transition to animate the sub menu height */
    	-webkit-transition: all .26s ease-in-out;
    	-moz-transition: all .26s ease-in-out;
    	-ms-transition: all .26s ease-in-out;
    	-o-transition: all .26s ease-in-out;
    	transition: all .26s ease-in-out;
	}

  		/* set the menu as a block list item */
		nav.header li {
    		display: block;
    		float: none;
    		width: auto;
			margin: 0px;
			background: none;
			padding: 0px;
  		}
  
			nav.header a {
				display: block;
				padding: 7px 0px;
				background: #f7f7f7;
				margin-bottom: 2px;
				padding: 10px;
				border: none;
			}

				nav.header a:hover, nav.header a.selected {
					color: #575277;
					border: none;
					background: #eeeeee;
				}

				/* now show the checkbox and label element in mobile device */
  				nav.header input, nav.header label {
    				position:absolute;
    				top:5px;
    				right:5px;
    				display:block; /* show the menu icon */
  				}
  
  				nav.header input {
					z-index:4 /* always place the checkbox above the label element */
				} 

  				/* highlight the label element and show the menu if the checkbox is checked */
  				nav.header input:checked + label {
					color: #a76877
				}
				
  				nav.header input:checked ~ ul {
    				min-height:330px; /* (menu item height multiplied by menu length) */
    				visibility:visible;
  				}

}

@media only screen and (max-width: 1370px) {
/*************************************  BUCKET MENU MOBILE NAVIGATION ***********************/

/* checkbox element: for mobile navigation button */
nav.bucket input {
	display: none;
  	margin: 0 0;
  	padding: 0 0;
  	width: 30px;
  	height: 30px;
  	opacity: 0; /* hide the checkbox */
  	filter: alpha(opacity=0); 
  	cursor: pointer;
}

/* for visual purpose */
nav.bucket label {
	display: none;
  	font-size: 200%;
  	width: 30px;
  	height: 30px;
  	line-height: 30px;
  	color: #ffffff;
	padding-top: 10px;
	text-align: center;
}

nav.bucket {
	/* we want to absolute positioning the menu, 
	checkbox and label element to its parent, so this is needed */
    position: relative;
	z-index: 4;
}

	nav.bucket ul {
    	position: absolute;
    	top: 100%;
    	right: 0;
    	left: 0;
    	background-color: #3c3a55;
    	height: 0; /* set the sub menu height to `0` */
    	visibility: hidden; /* use `visibility:hidden` instead of `display:none`, so we can animate the sub menu height */
    	overflow: hidden;
    	/* use CSS transition to animate the sub menu height */
    	-webkit-transition: all .26s ease-in-out;
    	-moz-transition: all .26s ease-in-out;
    	-ms-transition: all .26s ease-in-out;
    	-o-transition: all .26s ease-in-out;
    	transition: all .26s ease-in-out;
	}

  		/* set the menu as a block list item */
		nav.bucket li {
    		display: block;
    		float: none;
    		width: auto;
			margin: 0px;
			background: none;
			padding: 0px;
  		}
  
			nav.bucket a {
				display: block;
				background: #3c3a55;
				margin-bottom: 2px;
				padding: 10px 0px 10px 0px;
				height: auto;
			}

				nav.bucket a:hover, nav.bucket a.selected {
					color: #575277;
					border: none;
					background: #eeeeee;
				}

				/* now show the checkbox and label element in mobile device */
  				nav.bucket input, nav.bucket label {
    				position:absolute;
    				top:5px;
    				right:5px;
    				display:block; /* show the menu icon */
  				}
  
  				nav.bucket input {
					z-index:4 /* always place the checkbox above the label element */
				} 

  				/* highlight the label element and show the menu if the checkbox is checked */
  				nav.bucket input:checked + label {
					color: #a76877
				}
				
  				nav.bucket input:checked ~ ul {
    				min-height:425px; /* (menu item height multiplied by menu length) */
    				visibility:visible;
  				}
}