/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

/* Basic Styles */
body {
	background-color: #e5e1d9; /* #d4d0c9; */
}
#navmenu {
	height: 35px;
	width: 100%;
	background: #ddd9cf;
	opacity: 0.7;
	filter:alpha(opacity=70); /* For IE8 and earlier */
	-moz-opacity:0.7; /* for older Firefox */
	font-family: 'Source Sans Pro','Helvetica Neue', HelveticaNeue, Arial, sans-serif;
	font-weight: 300;
	font-size: 13pt;
	position: relative;
	border-bottom: 2px solid #a29e92;
	border-bottom: 1px solid #a29e92;
	margin-bottom: 35px; /* add if menu is below header */
/* 	-moz-border-radius: 7px; -webkit-border-radius: 7px; /* add if menu is below header */ */
}
#navmenu ul {
	padding: 0;
	margin: 0 auto;
	width: 900px;
	height: 35px;
}
#navmenu li {
	display: inline;
	float: left;
	margin-left: 0;
}
#navmenu a {
	color: #333;
	display: inline-block;
	width: 150px;
	text-align: center;
	text-decoration: none;
	line-height: 35px;
}
#navmenu li a {
	border-right: 1px solid #a29e92;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
#navmenu li:last-child a {
	border-right: 0;
}
#navmenu a:hover, #navmenu a:active {
	background-color: #a29e92;
	color: #fff;
}
#navmenu a#pull {
	display: none;
}

/*Styles for screen 950px and lower*/
/*Media queries explained: http://www.w3.org/TR/css3-mediaqueries/ */
@media screen and (max-width: 950px) {
	#navmenu { 
  		height: auto;
  	}
  	#navmenu ul {
  		width: 100%;
  		display: block;
  		height: auto;
  		list-style: none;
  	}
  	#navmenu li {
  		width: 33.3333%;
  		float: left;
  		position: relative;
  		/* fix settings from default li */
  		padding-bottom: 0;
  		margin-left: 0;
  	}
  	#navmenu li a {
		border-bottom: 1px solid #a29e92;
		border-right: 1px solid #a29e92;
	}
  	#navmenu a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 25px;
  	}
  	
  	/* OTHER STYLES */
  	#header .tag {
		display: none;
	}
	.mainphoto  { float: none !important; margin-right: 0 !important; margin-left: 0 !important; }
	.mainphoto img { width: 100%; }
	.mainphoto p { display: none; }
	#column-art { width: 66%; }
	#column-text { width: 32%; }
	#thisketubah img.vertical { margin-left: 0; }
	/* ketubah slideshow */
	.slideshow { height: 200px !important; }
	.kthumb { width: 160px; height: 165px; }
	.kthumb img.horiz { width: 130px; }
	.kthumb img.vert  { height:130px; }
	/* END slideshow */
	.stillslides img {
		max-width: 400px;
	}
	.calloutImage {
		float: right; margin: 0 0 15px 30px;
	}
	.calloutImage img, .calloutImage p {
		max-width: 300px;
	}
	.calloutImage.twothirds img, .calloutImage.twothirds p {
		max-width: 500px;
	}
}

/*Styles for screen 700px and lower*/
@media screen and (max-width: 700px) {
	.stillslides {
		float:none;
		padding: 0;
	}
	.stillslides img {
		max-width: 700px;
	}
	.calloutImage {
		float: none; margin: 0 0 20px 0;
	}
	.calloutImage img, .calloutImage p {
		max-width: 700px;
	}
}
	

/*Styles for screen 500px and lower*/
/* ONLY hides this from older incompatible browsers */
@media only screen and (max-width : 500px) {
	#navmenu {
		border-bottom: 0;
	}
	#navmenu ul {
		display: none;
		height: auto;
	}
	#navmenu li {
  		width: 50%;
  		float: left;
  		position: relative;
  	}
	#navmenu a#pull {
		display: block;
		background-color: #ddd9cf;
		width: 100%;
		position: relative;
	}
	#navmenu a#pull:after {
		content:"";
		background: url('hamburger-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
	
	/* OTHER STYLES */
	#header .tag {
		display: none;
	}
	#header .logo { width: 240px; margin-top: 9px; }	

	img.shrinkable { width: 100%; }
	.notonphone { display: none; }
	#column-art, #column-text { width: 100%; float:none; }
	.callout {
		margin: 0 0 2em 0;
		padding: 0;
		border: 0;
		background-color: none;
		float: none;
		background: rgba(0, 0, 0, 0);
		width: 100% !important;
	}
	/* ketubah slideshow */
	.slideshow { height: 340px !important; }
	.kthumb { width: 155px; height: 160px; }
	.kthumb img.horiz { width: 140px; }
	.kthumb img.vert  { height:140px; }
	/* END slideshow */
	.printsig img, .printsig-vert img { width: 60px; }
}

/*Smartphone*/
@media only screen and (max-width : 375px) {
	#navmenu {
		margin-bottom: 20px;
	}
	#navmenu li {
		display: block;
		float: none;
		width: 100%;
	}
	#navmenu li a {
		border-bottom: 1px solid #a29e92;
	}
	/* ketubah slideshow */
	.slideshow { height: 340px !important; }
	.kthumb { width: 135px; height: 135px; }
	.kthumb img.horiz { width: 115px; }
	.kthumb img.vert  { height:115px; }
	/* END slideshow */
}