/*
Theme Name: Mountains of the Moon 2 - Mobile
Theme URI: http://www.mountains-of-the-moon.com/
Description: The Mountains of the Moon Wordpress Theme optimized for mobile devices.
Author: Samuel Lissner
Version: 	   2.0 
Template:     mom2
Text Domain: mom
Tags: brown, responsive-layout, two columns, widgets
*/

/* =Theme customization starts here
-------------------------------------------------------------- */

/*IMPORTANT: dimensions are at the end of the document! */

/* Standard reset */
	* {
		margin: 0;
	}

	 html, body, div, p, h1, h2, h3, ul, ol, span, a, table, td, form, img, li {  
		margin: 0; 
		padding: 0; 
	}


/* --------------------------------------
Standards
--------------------------------------  */

html, body {
	height: 100%;
}

body {
	background: #543f3f /*url("./images/background/body_bg.png") no-repeat bottom right*/;
	color: #444444;
	font-size: 20px;
	font-family: 'Source Sans Pro',Helvetica,sans-serif;
	line-height: 22px;
	margin: 0 auto -40px;
	max-width: 480px;
}

body.admin-bar { /*if admin bar is set*/
	margin-top: 32px;
}

a {
	color: #FFFFFF;
	text-decoration: none;
	-o-transition:.3s;
	-ms-transition:.3s;
	-moz-transition:.3s;
	-webkit-transition:.3s;
	/* ...and now for the proper property */
	transition:.3s;
}

.serif {
	font-family: 'Bitter', serif;
}

img {
	border: 0;
}

abbr, acronym { border-bottom: 1px dashed #999; cursor: help; }

blockquote {
	color: #111;
	border-left: 2px solid #004964;
	font-size: 90%;
	margin: 0 0 9px;
	padding: 7px;
}

cite { font-style: italic; }

code {
  font-family: Consolas, Monaco, monospace;
  font-size: 0.9em;
  padding: 1px 3px;
}

del { color: #8b0000; text-decoration: line-through; }

em { font-style: italic; }

strong { font-weight: bold; }

.clear {
	clear: both;
}

.float-left {
	float: left;
}

.box-center {
	/* define box */
	display:box;
	box-pack:center ;
	box-align:center ;
	
	/* Internet Explorer 10 */
	display:-ms-flexbox;
	-ms-flex-pack:center;
	-ms-flex-align:center;

	/* Firefox */
	display:-moz-box;
	-moz-box-pack:center;
	-moz-box-align:center;

	/* Safari, Opera, and Chrome */
	display:-webkit-box;
	-webkit-box-pack:center;
	-webkit-box-align:center;

	/* W3C */
	display:box;
	box-pack:center;
	box-align:center;
}

/* --------------------------------------
Container
--------------------------------------  */

/* Wrapper */
.wrapper 
{
	margin: 0 auto;  /* the bottom margin is the negative value of the footer's height */
	
	min-height: 100%;
    height: auto !important;
    height: 100%;
}

/*-------------------------
Header
---------------------------*/

header {
	margin: 0;
}

#slider {
	background-color: #452F31;
}

/*Banner Black*/
#header-banner-black {
	padding: 3px;
	background-color: #3B3939;
	color: #C7C7C7;
	font-size: 1em;
}

#header-banner-black a {
	color: #CCCCCC;
}

#header-banner-black a:hover {
	color: #999999;
}

	#header-access {
		clear: both;
	}

	#header-access, #header-contact {
		margin: 5px 0 5px 0;
		list-style-type: none;
	}

	#header-access li, #header-contact li {
		margin-right: 3px;
		padding-left: 5px;
	}

	#header-access li {
		border-left:1px solid #999999;
	}

	#header-access li:first-child {
		border-left:none;
	}
	
	#footer-contact {
		margin-left: 20px;
	}
	
	.search-form {
		clear: both;
		position: relative;
		margin: 6px auto 6px;
	}
	
	.search-form .screen-reader-text {
		display: none;
	}
	
	.search-form .search-field {
		background-color: rgba(255, 255, 255, 0.2);
		border: 0 none;
		border-radius: 10px;
		font-size: 22px;
		height: 28px;
		line-height: 26px;
		margin: 0;
		opacity: 0.7;
		padding: 3px 15px 3px 20px;
		width: 200px;
	}
	
	.search-form .search-submit {
		position: absolute;
		top: 3px;
		left: 3px;
		background-color: transparent;
		/* background-image: url(./images/magnifier.png); */
		background-position:  0px 0px;
		background-repeat: no-repeat;
		width: 24px;
		height: 28px;
		border: 0px;
		cursor: pointer;
	}
	

/* Banner Brown */
#header-brown {
	/*width: 100%;*/
	/*height: 100%;*/
	background-color: #452F31;
	color: #C7C7C7;
	font-size: 36px;
	line-height: 30px;
	z-index: 4; 
	border-radius: 5px ;
}

	#header-logo img {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	div.menu-banner-braun-container {
		clear: both;
	}
	
	#header-brown-nav li:last-child {
		margin-right: 0;
	}
	
	#header-brown-nav a {
		transition:.5s;
		-o-transition:.5s;
		-ms-transition:.5s;
		-moz-transition:.5s;
		-webkit-transition:.5s;
	}
	
		#header-brown-nav .vanilla a:hover {
			color: #F3CF01;
		}
		
		#header-brown-nav .cocoa a:hover {
			color: #A3A252;
		}
		
		#header-brown-nav .spices a:hover {
			color: #BF3030;
		}
	
	/*drop down menu */
	
        /* general settings */  
    #mainmenu {
		margin-top: 16px;
		margin-bottom: 10px;
		z-index: 4;
		border-radius: 5px ;
	}
	
    #mainmenu a:link {  
		display: block; /* make links block elements */  
    }
      
    #mainmenu ul { 
		background-color: #452F31;
		padding: 5px;
    }  
      
    #mainmenu ul li {  
		position: relative;  
		whitewhite-space: nowrap;
    }

	#mainmenu ul > li {
		margin-bottom: 8px;
	}
      
    #mainmenu li {  
		list-style: none;
    }  
      
    #mainmenu div > ul {  
		/*width: 100%;*/ /* change to an appropriate width */
    } 
     
    /* sub menu levels */  
      
    #mainmenu ul ul { 
		min-width: 220px;
		display: none;  
		position: absolute;
		top: 100%;  
		left: 0;  
		padding: 0;  
		font-size: 0.6em;
		padding: 20px 4px 2px 4px;
    }
	
	#mainmenu ul ul li a:before {
		content: "\00BB\0000a0";
	}
      
    #mainmenu ul ul li {  
		position: relative;  
		float: none;  
		margin: 0;
		border-bottom: 1px dotted #56494A;
    }
	
	#mainmenu ul ul li:last-child {
		border-bottom: 0;
	}
      
	#mainmenu ul ul ul {  
		position: absolute;  
		left: 100%; /* makes submenu appear right */  
		top: -1px;
		font-size: 100%;
		padding-top: 0;
    }  

	/*language*/
	#header-languages {
		clear: both;
		margin: 10px 0 10px 0;
	}
	
	#header-languages ul {
		list-style-type: none;
		font-size: 1em;
	}
	
	#header-languages ul li {
		margin-right: 3px;
		margin-left: 3px;
	}
	
	#header-languages ul li:before {
		content: "\00B7\00a0";
	}
	
	#header-languages ul li:first-child:before {
		content: "";
	}
	
	
	#header-languages, #header-languages ul li a {
		color: #A0A1A1;
	}
	
	#header-languages ul li a:hover {
		transition:.5s;
		color: #FCFCFC;
	}
	
/*-------------------------
Container
---------------------------*/
	
#container {
	margin-top: 16px;
}	

/*content*/
#container div.content {
	/*width: 100%;*/
	border: 1px solid #EBE9C5;
    border-radius: 5px ;
	background-color: #FDFDEF;
	margin-bottom: 10px;
	padding: 10px;
}

	#container h1, #container h2, #container h3, #container h4, #container h5, #container p {
		font-weight: 300;
		line-height: 1.3;
	}

	#container h1 {
		font-size: 2.813em;
		line-height: 1.3;
		margin-bottom: 0.267em;
	}
	
	#container h2 {
		font-size: 2em;
		margin-bottom: 0.375em;
	}
	
	#container h3, h4 {
		font-size: 1.438em;
		margin-bottom: 0.522em;
	}
	
	#container h5 {
		font-size: 1.28em;
		font-family: 'Bitter', serif;
		margin-bottom: 0.522em;
	}

	#container p, #container code, #container li, #container pre {
		font-size: 1em;
		line-height: 1.6;
		margin-bottom: 0.75em;
	}
	
	#container p.intro {
		font-size: 1.2em;
		line-height: 1.4;
		margin-bottom: 0.522em;
	}
	
	#container ul {
		margin-left: 20px;
	}

	#container h1, #container h2, #container h3 {
		font-family: 'Bitter', serif;
	}
	
	#container div.content h1, #container div.content h2, #container div.content h3 {
		color: #452F31;
	}

	#container div.content a {
		color: #452F31;
	}

	#container div.content a:hover {
		transition:.5s;
		color: #0C0C0C;
	}
	
	#container div.page a {
		font-weight: 600;
	}
	
	#page-navigator span.page-parent a, #page-navigator span.page-list-children a {
		color: grey;
	}
	
	#page-navigator ul.page-list-children {
		list-style-type: none;
		display: inline;
		margin-left: 0;
		/*width: 100%;*/
	}
	
	#page-navigator ul.page-list-children li {
		display: inline;
		margin-right: 7px;
	}
	
	#page-navigator ul.page-list-children li:last-child {
		margin-right: 0;
	}
	
	#page-navigator ul.page-list-children li a {
		color: grey;
	}
	
	#page-navigator  ul.page-list-children a.active, span.page-parent a.active {
		color: #452F31 !important;
	}
	
/* grey */
#container div.box-lightgrey {
	background-color: #CCCCCC;
	
	border: 1px solid #EBE9C5;
    border-radius: 4px ;
	
	-moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #EBEBEB -moz-use-text-color;
    border-image: none;
    border-style: solid none;
    border-width: 1px medium;
}

#container div.box-lightgrey a:link { 
	font-weight: bold;
}

#container .list-canonical {
	list-style: none outside none;
	margin-bottom: 15px;
}

/*lists*/
#container .list-canonical li {
	border-bottom: 1px dotted #AEA79F;
    margin-bottom: 0;
	padding-left: 25px;
	margin-right: 20px;
	/* background-image: url("./images/ticks/tick-brown.png"); */
	background-position: 0 7px;
    background-repeat: no-repeat;
	vertical-align: baseline;
	
	font-family: 'Bitter',serif;
    font-size: 0.95em;
}

	.tick-black li, .tick-grey li, .tick-brown li, .tick-yellow li, .tick-green li, .tick-red li {
		background-position: 0 7px;
		background-repeat: no-repeat;
	}

	.tick-black li {
		/* background-image: url("./images/ticks/tick-black.png") !important; */
	}
	
	.tick-grey li {
		/* background-image: url("./images/ticks/tick-grey.png") !important; */
	}
	
	.tick-brown li {
		/* background-image: url("./images/ticks/tick-brown.png") !important; */
	}
	
	.tick-yellow li {
		/* background-image: url("./images/ticks/tick-yellow.png") !important; */
	}
	
	.tick-green li {
		/* background-image: url("./images/ticks/tick-green.png") !important; */
	}
	
	.tick-red li {
		/* background-image: url("./images/ticks/tick-red.png") !important; */
	}

	/* scroll menu */
	#scroll-menu {	/*depracated */
		position: fixed;
		top: 200px;
		width: 120px;
		background-color: #323B44;
		border-radius: 5px 5px 5px 5px;
		color: #A0A1A1;
		padding: 14px 10px 10px;
	}

	/* products */
#products {
	margin: 0 !important;
	list-style-type: none;
}	

	#products li {
		margin: 0;
	}
	
	#products li div.product-wrapper {  
		float: left; /* important */  
		position: relative; /* important(so we can absolutely position the description div */  
	}  

	#products li p.caption {
		position:absolute; /* absolute position (so we can position it where we want)*/  
		bottom:20px; /* position will be on bottom */  
		left:10px;    
		z-index: 2;
		/*styling*/
		padding: 6px;
		background-color: #333333;
		color: #ffffff;
		font-size: 12px;
		font-family: 'Bitter', serif;
		opacity:0.85;
		filter:alpha(opacity=85); /* For IE8 and earlier */
	}
		
	/*post*/
	.single {
		overflow: hidden;
	}
	
	.single .post-info {
		font-size: 0.8em;
	}
	
	.entry ul li {
		margin-bottom: 3px !important;
		font-family: 'Bitter', serif;
		line-height: 1.3  !important;
	}
	
/*sidebar*/
#sidebar, #welcome, #company, .sidebar-box {
	clear: both;
	/*width: 100%;*/
	background-color: #323B44;
	color: #A0A1A1;
	border-radius: 5px;
	padding: 14px 10px 10px;
	margin-bottom: 14px;
	list-style-type: none;
}


#sidebar h1, .sidebar-box h1, #sidebar h2, #sidebar h2 a, .sidebar-box h2, .sidebar-box h2 a, #sidebar h3, .sidebar-box h3, #sidebar h4, .sidebar-box h4, #sidebar p, .sidebar-box p {
		font-weight: 200;
		line-height: 1.1;
	}

	#sidebar h1, .sidebar-box h1, #sidebar h2, .sidebar-box h2, #sidebar h3, .sidebar-box h3, #sidebar h4, .sidebar-box h4 {
		font-family: 'Source Sans Pro',Helvetica,sans-serif;
	}
	
	#sidebar h1, .sidebar-box h1 {
		font-size: 2.213em;
		line-height: 1.2;
		margin-bottom: 0.267em;
	}
	
	#sidebar h2, .sidebar-box h2 {
		font-size: 1.6em;
		margin-bottom: 0.375em;
	}
	
	#sidebar h3, #sidebar h4, .sidebar-box h3, .sidebar-box h4 {
		font-size: 1.238em;
		margin-bottom: 0.522em;
	}

	#sidebar p, .sidebar-box p, #sidebar code, #sidebar li, #sidebar pre {
		font-size: 0.95em;
		line-height: 1.1;
		margin-bottom: 0.75em;
		font-family: 'Bitter', serif;
	}

	#sidebar h1, .sidebar-box h1, #sidebar h2, #sidebar h2 a, .sidebar-box h2, .sidebar-box h2 a, #sidebar h3, .sidebar-box h3 {
		color: #FCFCFC !important;
	}

	#sidebar a, .sidebar-box a {
		color: #B5B5B5;
		font-weight: bold;
	}

	#sidebar a:hover, .sidebar-box a:hover {
		transition:.5s;
		color: #FCFCFC;
	}
	
	#company a {
			font-weight: normal;
		}
		
		#company li.current_page_item a {
			font-weight: bold;
		}

		/*lists*/
	#sidebar ul, .sidebar-box ul {
		list-style-type: none;
		margin-bottom: 14px;
	}
	
	#sidebar ul.socialmedia li {
		display: inline;
	}
	
	#sidebar ul.certificates {
		text-align: center;
	}

/* footer */
footer {
	/*width: 100%;*/
	background-color: #323B44;
	color: #A0A1A1;
	font-size: 0.9em;
	padding: 2px 6px 2px 6px;
	border-radius: 4px;
}

/* --------------------------------------
Wordpress Internal
--------------------------------------  */

/* Internal WP Styles */
.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.alignleft {
   float: left;
}

.alignright {
   float: right;
}

.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}

.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}

.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}

/*
.categories {...}
.cat-item {...}
.current-cat {...}
.current-cat-parent {...}
.pagenav {...}
.page_item {...}
.current_page_item {...}
.current_page_parent {...}
.widget {...}
.widget_text {...}
.blogroll {...}
.linkcat{...}
*/

/*****MEDIA*****/
/***************/

/* Portrait smart phone */
@media (max-width: 320px) {

	.wrapper { width: 300px; }
	
		header, 
		#header-brown, 
		#header-banner-black,
		#slider, 
		#container, 
		.content,	
		#sidebar,	
		footer,
		#copyright,
			{ width: 280px; }
   
	#container img, #slider img  { max-width:280px; max-height:290px; }
	.googlemaps { max-width:280px; max-height:283px; }
}
 
/* Landscape smart phone */
@media (min-width: 321px) and (max-width: 480px) {

	.wrapper { width: 460px; }
	
		header, 
		#header-brown, 
		#header-banner-black,
		#slider, 
		#container, 
		.content,	
		#sidebar,	
		footer,
		#copyright,
			{ width: 440px; }
   
	#container img, #slider img { max-width:440px; max-height:390px; }
	.googlemaps { max-width:440px; max-height:443px; }
}
 
/* Portrait Tablet */
@media (min-width: 481px) and (max-width: 768px/*original: 768px*/) {

	.wrapper { width: 580px; }
	
		header, 
		#header-brown, 
		#header-banner-black,
		#slider, 
		#container, 
		.content,	
		#sidebar,	
		footer,
		#copyright,
			{ width: 560px; }
   
	#container img,  #slider img  { max-width:550px; max-height:480px; }
	.googlemaps { max-width:550px; max-height:480px; }
}

/* END: Internal WP Styles */