/*
Theme Name: Jorinji Soy Beam.
Theme URI: http://jorinjisoybeam.com
Description: Soy Beam Jozo Company Jorinji Miso Products.
Version: 1.0
Author: Kate McPike, Will Lund, Cielle Charron
*/

/* Jorinji Miso CSS */
/* This is an Universal Selector this styles EVERYTHING! 

*{
	/* Border Shorthand Property — border: width style color; 
	border: 1px dotted #000;
} */



* {
	outline:none;
}

/* HEADER STYLES  */
#header {
}

#logoRibbon {
	background:transparent url(images/ribbon.png) no-repeat 0 8px;
	height:150px;
	width:1024px;
	float:left;
	z-index:8888;
	position:absolute;
}

#social {
	height:25px;
	width:100px;
	float:right;
	z-index:9000;
	margin:5px 0 0;
}

#facebook {
	background:transparent url(images/social_icon.png) no-repeat;
	width:25px;
	height:25px;
	float:left;
	display:block;
}

#facebook:hover {
	background:transparent url(images/social_icon.png) no-repeat 0 -25px;
}

#yelp {
	background:transparent url(images/social_icon.png) no-repeat -25px 0;
	width:25px;
	height:25px;
	float:left;
	display:block;
	margin-left:5px;
}

#yelp:hover {
	background:transparent url(images/social_icon.png) no-repeat -25px -25px;
}

#japanese {
	background:transparent url(images/social_icon.png) no-repeat -50px 0;
	width:140px;
	height:25px;
	float:left;
	display:block;
	margin-left:5px;
}

#japanese:hover {
	background:transparent url(images/social_icon.png) no-repeat -50px -25px;
}

#logoLink {
	width:200px;
	height:150px;
	position:absolute;
	z-index:2000;
	margin:15px 0 0 85px;
}

#nav {
	float:left;
	z-index:9500;
	margin:87px 0 0 345px;
}

#header #logoRibbon #nav .activeNav {
	color:#cd9a00;
}

#nav a {
	color:#fff;
	text-transform:uppercase;
	margin:0 20px;
	font-size:16px;
	letter-spacing:2px;
}

#nav a:link {
}

#nav a:visited {
	color:#c8c8c8;
}

#nav a:hover {
	color:#cd9a00;
}

#nav a:active {
	color:#000;
}

#subNav {
	width:100%;
	height:30px;
	background:transparent url(images/bg_gold.png) repeat;
	float:left;
	display:block;
	clear: both;
}

#subNavLink {
	position:absolute;
	margin:-26px 0 0 400px;
}

#subNav a {
	color:#fff;
	text-transform:uppercase;
	margin:0 20px;
	font-size:12px;
	letter-spacing:2px;
}

#subNav a:link {
}

#subNav a:visited {
	color:#fff;
}

#subNav a:hover {
	color:#262626;
}

#subNav a:active {
	color:#262626;
}

#header #subNav #subNavLink .activeSubNav {
	color:#262626;
}


.aboutDropContentPush{
	padding-top: 30px; 
}

#aboutDrop {
	width:680px;
	height:30px;
	z-index:8889;
	background:transparent url(images/bg_gold.png) repeat;
	text-align:center;
	margin-top:-13px;
	padding-top:3px;
}

#aboutDrop a {
	color:#fff;
	text-transform:uppercase;
	font-size:16px;
	margin:5px 35px 0 0;
}

#aboutDrop a:link {
}

#aboutDrop a:visited {
	color:#fff;
}

#aboutDrop a:hover {
	color:#3e3e3e;
}

#aboutDrop a:active {
	color:#fff;
}

#logoColor {
	height:150px;
	width:300px;
	margin-left:45px;
}

#logoGold {
	height:150px;
	width:300px;
	margin-left:45px;
	background:transparent url(images/bg_gold.png) repeat;
}

.bgGold {
	background:transparent url(images/bg_gold.png) repeat;
}

.bgGreen {
	background:transparent url(images/bg_green.png) repeat;
	clear: both;
}

/* THIS IS WHERE THE DROP NAV CONTENT IS */
#navDrop {
	margin:0 0 0 45px;
	clear: both; 
}

.dropAbove {
	position:absolute;
	z-index:100px;
}

.dropInContent {
	float:left;
	display:block;
}



.bumpRight {
	margin-left:70px;
}

#logoBottom {
	background:transparent url(images/jorinji_logo_bottom.png) no-repeat;
	width:255px;
	height:30px;
}

#leftNavDropContent {
	width:265px;
	padding:0 10px 10px 25px;
	color:#fff;
}

#leftNavDropContentGreen {
	width:255px;
	background:transparent url(images/bg_green.png) repeat;
	padding:0 20px 10px 25px;
	color:#fff;
}

#arrowDownGreen {
	height:37px;
	width:300px;
	background:transparent url(images/arrow_down_green.png) no-repeat;
}

#arrowDownGold {
	height:37px;
	width:300px;
	background:transparent url(images/arrow_down_gold.png) no-repeat;
}

body {
	margin:0;
	height:100%;
	padding:0;
/* Step 2 centering for IE */
	text-align:center;
	background:#fff url(images/back_texture.jpg) repeat;
	background-attachment:fixed;
	background-position:center;
	font-family:'Cabin',sans-serif;
	font-size:14px;
	line-height:150%;
}

p {
	font-weight:400;
	margin:10px 0;
}

a {
	color:#fff;
	text-decoration:none;
	font-family:'Cabin',sans-serif;
}

a:link {
}

a:visited {

}

a:hover {
color: #3E3E3E;

}

a:active {
color: #3E3E3E;

}

h2,h3,h4,h5,h6 {
	font-family:'Cabin',sans-serif;
	font-variant:small-caps;
	text-transform:lowercase;
	letter-spacing:.5em;
}

h1 {
	font-family:'Cabin',sans-serif;
	font-size:26px;
	font-weight:700;
	font-variant:small-caps;
	text-transform:lowercase;
	color:#FFF;
}

h2 {
	font-size:26px;
	padding-top:10px;
}

#container {
	width:1024px;
/* Step 3 correcting the centering for IE */
	text-align:left;
/* Step 1 in centering my site */
	margin:0 auto;
	min-height:100%;
	position:relative;
}

#content {
	position:relative;
	clear: both;
}

#prev3{
Cursor: pointer;
float: left;
margin:-210px 5px 0 30px;
}

#next3{
Cursor: pointer;
float: left;
margin: -210px 0 0 970px;
}


#prev{
Cursor: pointer;
float: left;
margin:-210px 5px 0 30px;
}

#next{
Cursor: pointer;
float: left;
margin: -210px 0 0 970px;
}


.dots{
	padding: 0 0 20px 800px;
}

a.service0{
 font-size: 60px;
 padding-right: 4px;
 color: rgba(207,20,10,0.30);
 text-decoration: none;
}

a.service0.activeSlide{
 color: #CF140B;
}

a.service0:hover{
 color: #CF140B;
}

a.service1{
 font-size: 60px;
 padding-right: 4px;
 color: rgba(207,20,10,0.30);
 text-decoration: none;
}

a.service1.activeSlide{
 color: #CF140B;
}

a.service1:hover{
 color: #CF140B;
}


a.service2{
 font-size: 60px;
 padding-right: 4px;
 color: rgba(207,20,10,0.30);
 text-decoration: none;
}

a.service2.activeSlide{
 color: #CF140B;
}

a.service2:hover{
 color: #CF140B;
}

a.service3{
 font-size: 60px;
 padding-right: 4px;
 color: rgba(207,20,10,0.30);
 text-decoration: none;
}

a.service3.activeSlide{
 color: #CF140B;
}

a.service3:hover{
 color: #CF140B;
}


.slideshow{
position:relative;
	z-index: -10000;
	padding-top: 15px;
	height: 430px;
}

.spaceTop{
	margin-top: 32px;
}


.slideshow2{
position:relative;
	z-index: -10000;
	padding-top: 15px;
	height: 930px;
}

.slideshow3{
position:relative;
	z-index: -10000;
	padding-top: 15px;
	height: 400px;
}

.slide{
	width:100%;
	height:640px;
	background-color:#faf2eb;
}

.slide img {
	display: block;
	margin-top: 20px;
	margin-bottom: 30px;
	margin-left: auto;
	margin-right: auto;
}

.slidePhoto1 {
	padding:100px 0 0 180px;
}

.slidePhoto1 img {
	float:left;
	border-style:solid;
	border-color:#cf140b;
	border-width:4px;
	transform:rotate(-5deg);
	-ms-transform:rotate(-5deg);
/* IE 9 */
	-webkit-transform:rotate(-5deg);
/* Safari and Chrome */
	-o-transform:rotate(-5deg);
/* Opera */
	-m-transform:rotate(-5deg);
/* Firefox */
}



.slideCopy1 {
	float:right;
	width:400px;
	margin:30px 80px 0 0;
}

.slideshow .slide .slideCopy1 h5 {
	font-size:16px;
	color:#ce0c02;
	letter-spacing:2px;
	margin:10px 0;
}

.slideshow .slide .slideCopy1 p {
	font-size:12px;
	color:#262626;
	letter-spacing:1px;
	margin:5px 0;
}

.slidePhoto2 {
	padding:100px 150px 0 10px;
}

.slidePhoto2 img {
	float:right;
	border-style:solid;
	border-color:#cf140b;
	border-width:4px;
	transform:rotate(5deg);
	-ms-transform:rotate(5deg);
/* IE 9 */
	-webkit-transform:rotate(5deg);
/* Safari and Chrome */
	-o-transform:rotate(5deg);
/* Opera */
	-moz-transform:rotate(5deg);
/* Firefox */
}

.slideCopy2 {
	float:left;
	width:380px;
	margin:120px 0 0 130px;
}

.slideshow .slide .slideCopy2 h5 {
	font-size:16px;
	color:#ce0c02;
	letter-spacing:2px;
	margin:10px 0;
}

.slideshow .slide .slideCopy2 p {
	font-size:12px;
	color:#262626;
	letter-spacing:1px;
	margin:5px 0;
}


.slidePhoto3 {
	padding:100px 0 0 180px;
}

.slidePhoto3 img {
	float:left;
	border-style:solid;
	border-color:#cf140b;
	border-width:4px;
	transform:rotate(-5deg);
	-ms-transform:rotate(-5deg);
/* IE 9 */
	-webkit-transform:rotate(-5deg);
/* Safari and Chrome */
	-o-transform:rotate(-5deg);
/* Opera */
	-m-transform:rotate(-5deg);
/* Firefox */
}



.slideCopy3 {
	float:right;
	width:400px;
	margin:30px 170px 0 0;
}

.slideshow .slide .slideCopy3 h5 {
	font-size:16px;
	color:#ce0c02;
	letter-spacing:2px;
	margin:10px 0;
}

.slideshow .slide .slideCopy3 p {
	font-size:12px;
	color:#262626;
	letter-spacing:1px;
	margin:5px 0;
}





#horizontalRule {
	width:100%;
	height:8px;
	background-color:#ce0c02;
	clear:both;
}

#horizontalRuleYellow {
	width:100%;
	height:8px;
	background-color:#d4b045;
	clear:both;

}

#horizontalRuleGreen {

	width:100%;
	height:8px;
	background-color:#96B92B;
	margin-top: -7px;

}

#wideBanner {
	float:left;
	display:block;
	position:relative;
	margin:25px 0 0 30px;
}

#wideBannerFloat {
	float:left;
	width:968px;
	height:166px;
	position:absolute;
	background:transparent url(images/findourproducts.png) no-repeat 215px 65px;
}

#wideBannerFloat:hover {
	background:transparent url(images/findourproductshover.png) no-repeat 215px 65px;
}

#squareBanner {
	float:left;
	width:295px;
	height:295px;
	display:block;
	margin:25px 10px 0 30px;
}

#squareBannerRecipes {
	width:295px;
	height:295px;
	position:absolute;
	background:transparent url(images/squarebannerrecipes.png) no-repeat 0 185px;
}

#squareBannerRecipes:hover {
	background:transparent url(images/squarebannerrecipeshover.png) no-repeat 0 185px;
}

#squareBannerAbout {
	width:295px;
	height:295px;
	position:absolute;
	background:transparent url(images/squarebannerabout.png) no-repeat 0 185px;
}

#squareBannerAbout:hover {
	background:transparent url(images/squarebannerabouthover.png) no-repeat 0 185px;
}

#squareBannerBlog {
	width:295px;
	height:295px;
	position:absolute;
	background:transparent url(images/squarebannerblog.png) no-repeat 0 185px;
}

#squareBannerBlog:hover {
	background:transparent url(images/squarebannerbloghover.png) no-repeat 0 185px;
}

#glossaryTerms {
	width:100%;
	height:75px;
	background-color:#3e3e3e;
}

#glossaryTerms h3 {
	font-size:20px;
	color:#d4b045;
	letter-spacing:2px;
	padding:10px 0 0 30px;
	float:left;
	margin:0;
}

#glossaryTerms #termsList {
	display:inline;
	list-style:none;
	float:right;
	width:600px;
	padding:0 20px 0 0;
	margin:0;
	text-align:center;
}

#glossaryTerms #termsList li {
	display:inline;
	list-style-type:none;
	margin:0 5px;
	color:#fff;
}


/*
#pressNav  {
	list-style:none;
	float:right;
	width:300px;
	padding:0 20px 0 0;
	margin:0;
	text-align:center;
	clear:right;
}

#pressNav li {
	display:inline;
	list-style-type:none;
	margin:0 5px;
	color:#fff;
}

#pressNav li:after {
	content:"  | ";
}
*/

#pressNav h3 {
	margin:0 5px;
	letter-spacing: 3px;
	font-size: 18px;
	color: #3E3E3E;
}


#pressNav p{
	margin: 8px 0 0 10px;
	
}

#pressNav a{
	margin: 0 10px 0 0;
}

.pressClipFront {
	width:295px;
	height:100%;
}

.pressClipBack {
	width:100%;
	height:100%;
	background-color:#000000;
	display:none; 
	overflow-y: auto;	
	
}

.scroll{
width:100%;
	height:100%;
	overflow-y: auto;
	
}

#pressLink{
	padding: 0 0 5px 30px;
	
}


.pressClipBack h4 {
	font-size:17px;
	letter-spacing:.05em;
	color:#d4b045;
	padding: 55px 5px 0 25px;
	
}

.pressClipBack p {
	font-size:12px;
	color:#fff;
	font-variant:none;
	text-transform:none;
	letter-spacing:.05em;
	padding:0 5px 10px 25px;
	line-height:160%;
}

.pressClipBack li {
	color:#fff;
	padding-right: 5px;
}

.plusMinus {
	padding-left:235px;
	clear:both; 
	position:absolute;
	cursor:pointer;
}

.recipePlus{
	padding-left:235px;
	clear:both; 
	position:absolute;
	cursor:pointer;
}

.recipeMinus{
	padding-left:235px;
	position:absolute;
	cursor:pointer;
}

.recipeMinus h4{
	padding-top: 80px;
}

.plusMinus:hover {
	opacity:.5;
}

.recipePlusMinus:hover {
	opacity:.5;
}


#footer {
	background:transparent url(images/footer_bumps.png) repeat-x;
	margin-top:10px;
	width:100%;
	height:146px;
	vertical-align:bottom;
	position:relative;
	z-index:9998;
}

#footerContainer {
	width:1024px;
}

.clearfooter {
	height:50px;
	clear:both;
	background: none;
}

#contactInfo {
	font-variant:none;
	text-transform:none;
	text-align:left;
	padding:15px 0 0 30px;
	width:200px;
	float:left;
	display:block;
}

#footer h4 {
	font-size:17px;
	letter-spacing:.05em;
	color:#d4b045;
	margin:5px 0 3px;
}

#footer h5 {
	font-size:12px;
	letter-spacing:.05em;
	color:#fff;
	margin:2px 0 3px;
}

#footer p {
	font-size:9px;
	color:#fff;
	font-variant:none;
	text-transform:none;
	letter-spacing:.05em;
	margin:1px 0;
	line-height:160%;
}

#footerIcon {
	width:100px;
	float:left;
	padding:25px 0 0 2px;
}

#footerIconLine {
	width:2px;
	float:left;
	padding-top:25px;
}

#contactField {
	float:right;
	width:590px;
	padding:30px 75px 0 0;
}

#info {
	font-family:'Cabin';
	font-weight:400;
	color:#fff;
	font-size:12px;
	float:left;
}

#info input {
	background-color:#3e3e3e;
	border:none;
	width:240px;
	height:30px;
	margin:0 0 10px;
	font-family:'Cabin';
	font-size:12px;
}

#info value {
	margin:3px 0 0 10px;
}

#askbox textarea {
	background-color:#3e3e3e;
	color:#fff;
	border:none;
	font-family:'Cabin';
	font-size:12px;
	width:380px;
	height:70px;
}

#textareaStyled{
	color:#fff;
}

#askBox input{
	color: #fff;
}

#askBox {
	width:650px;
	color: #fff;
}

#footer input {
	color:#fff;
	font-family:'Cabin';
	font-size:12px;
}

#footer [type='submit'] {
	border:none;
	background-color:#d4b045;
	font-family:'Cabin';
	color:#fff;
	font-variant:small-caps;
	text-transform:lowercase;
	font-size:16px;
	margin-left:570px;
}

#footer textarea {
	background-color: #3E3E3E; border: none; width: 380px; height: 70px; color: #fff;
	
}
#contactform .submit:hover {
	color:#262626;
	cursor:pointer;
}

.activePage a {
	color:#cd9a00;
}

.subHead {
	font-family:'Cabin',sans-serif;
	font-size:26px;
	font-weight:700;
	font-variant:small-caps;
	text-transform:lowercase;
	color:#FFF;
	text-align: center;
}

.center {
	margin:auto;
}

.products {
	width: 1024px;
	background-color: #3e3e3e;
}

#productnav h7{
	font-family:'Cabin',sans-serif;
	font-variant:small-caps;
	text-transform:lowercase;
	font-size: 20px;
	letter-spacing: 5px;
	line-height: 8px;
	
	
}

.productnavLinks a{
	margin: 0 5px;
	
}

.misoInfo {
	float:left;
	background:transparent url(images/products_mrmii.png) no-repeat;

}

#recipesContainer{
	width: 1200px;
	margin:0;
	
}

.ingredients {
	float:left;
	margin-right:40px;
	margin-left:200px;
	height:320px;
	color:#fff;
}

.ingredients h3 {
	color:#cfac3b;
	margin-top:30px;
	font-size:26px;
	letter-spacing:.2em;
}

.aboutProduct {
	color:#fff;
	width:1024px;
}

.aboutProduct p{
	width: 950px;
}
.aboutProduct h3 {
	color:#cfac3b;
	margin-top:30px;
	font-size:26px;
}

.sideButtons {
	width:200px;
	float:right;
	text-align:center;
	vertical-align:center;
	height:220px;
	background-color:#3e3e3e;
}




#pressContainer {
	width: 1200px;
	margin:0;

}

.recipe{
	padding-top: 15px;
	margin-left: 22px;  
	float:left;
	width:295px;
	height:444px;
}

#clip1{
	margin: 205px 0 0 15px;
	
}


#map{
	padding: 20px 0 0 20px;
}

.isotope-item {
  z-index: 2;
}
 
.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}
 
.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}
 
.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}
 
.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

#blog{
	float: right;
	margin-right:30px;
	width: 645px;
}

.blogTitle{
	width: 645px;
	background-color: #ce0c02;
	padding:3px;
	margin: 10px 0 10px 0;
	text-align: center;
}

.blogPic{
	text-align: center;
}

/* HOVER STYLES */
div.term {
  
  text-align: center;
  float: left;
  margin: 8px 8px 15px 10px;
}

div.term a{
  color: #FFF;
}

div.term h4{
  margin-top: 0; 
  font-size: 14px; 
  letter-spacing: 2px;
  color: #FFF; 
  text-align: center; 
  text-transform: uppercase;
}

div.pop-up {
  display: none;
  text-align: left;
  position: absolute;
  margin: -165px 0 0 -35px;
  width: 100px;
  min-height: 140px; 
  padding: 0px 13px;
  background: #3e3e3e;
  color: #000000;
  border: 3px solid #ce0c02;
  font-size: 90%;
}

div.clear {
  clear: both;
}