/*
Theme Name: Basel Backpack
Theme URI: http://www.baselbackpack.com/
Description: Customized theme for Basel Backpack
Author: Jean-Michel Gonet
Author URI: 
Version: 1.0

Tags:

License:
License URI:

General comments (optional).
*/
@import "fonts/css/basel-backpack.css";
@import "fonts/css/helvetica-condensed.css";
@import "fonts/css/helvetica-condensed-black.css";
@import "fonts/css/helvetica-condensed-bold.css";

body {
	font-family: "HelveticaCondensed" ;
	margin:0px;
	padding:0px;
}

/* The header */
header {
	position:relative;
	padding: 77px 0px 23px 196px;
	width: 300px;
}
header a.title
{
	font: 53px 'HelveticaCondensedBlack';
	font-weight: bolder;
	text-transform:uppercase;
	text-decoration:none;
	color: black;
	line-height: 43px;
}
header p {
	font: 14px 'HelveticaCondensed';
	letter-spacing: 0.5px;
	position:absolute;
	left: 196px;
	top: 17px;
}
header a.logo {
	font-family: "BaselBackpack" ;
	font-size: 135px;
	text-decoration:none;
	color: white;
	
	position:absolute;
	left: 21px;
	top: 37px;

	display:block;
	text-align:center;
	line-height: 138px;
	width: 152px; 
	height: 152px;
	border-radius: 50%;
	background-color: #a9b71e;
	box-shadow: 3px 3px 10px #aaaaaa;
}
/* The language switch */
ul.qtrans_language_chooser
{
	position:absolute;
	top: 0px;
	right: 0px;
	list-style-type:none;
	padding: 0px;
}
ul.qtrans_language_chooser li
{
	margin: 10px 0px;
}

.socialmedia
{
	position: absolute;
	bottom: 65px;
	right: 0px;	
}

/* The menus */
.menu-main-navigation-container
{
	position:absolute;
	top:21px;
	left:632px;	
}
.menu-booking-menu-container
{
	position: absolute;
	top: 595px;
	left: 632px;	
	z-index: 100;
}
ul.menu
{
	font: 14px 'HelveticaCondensedBold';
	list-style-type:none;
	padding: 0px;
	line-height: 22px;
	letter-spacing:0.5px;
}
ul.menu li a
{
	text-decoration: none;
	color: black;
}
ul.menu li a:hover
{
	text-decoration: underline;
}
ul.sub-menu
{
	display:none;
	font: 12px 'HelveticaCondensed';
	list-style-type:none;
	padding: 0px;
}
.current-menu-item ul.sub-menu, .current-menu-parent ul.sub-menu
{
	display:block;
}
ul.menu>li.current-menu-item>a
{
	text-decoration: underline;
}
ul.sub-menu>li.current-menu-item>a
{
	text-decoration: underline;
}

/* The content */
.content {
	margin: 0px 30px 0px 196px;
	position:relative;
}

/* The gallery */
.gallery
{
	display: none;
	position: absolute;
	top:0px;
	left:0px;
	z-index: -1;
}
.gallery dl {
	margin: 0px;
}
.gallery.show-gallery {
	display:block;
}
.gallery.show-gallery dl.gallery-item {
	display:none;
}

.gallery.show-gallery dl.gallery-item:first-child {
	display:block;
}

.gallery.show-gallery dl.gallery-item dd {
	display: none;
}
nav.gallery-controls ul {
	list-style-type: none;
}

nav.gallery-controls {
	clear: both;
	position: absolute;
	top: 550px;
	left: 0px;
}
nav.gallery-controls ul {
	list-style-type:none;
	padding: 0;
	margin: 0;
}
nav.gallery-controls ul li {
	float: left;
	margin-right: 30px;
}
.previous-photo {
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	border-right:20px solid black; 
}
.next-photo {
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;	
	border-left: 20px solid black;
}


/* The text */
.entry-content ul img {
	width: 290px;
	height: auto;
}
del {
	font-size: 11px;
	text-decoration:none;
}

.entry-content ul {
	list-style-type: none;
	padding: 0px;	
	margin: 35px 0px 0px 380px;
	float: left;
}
.entry-content.home ul
{
	background-color: #50d0de;
	line-height: 25px;
	font-size: 16px;
	width: 475px;
}
.entry-content.home ul li strong {
	font-size: 18px;
}
.entry-content.normal ul, .entry-content.parent ul {
	line-height: 1.5;
	background-color: #4cc9f3;
	font-size: 15px;
	width: 321px;
}
.child-content ul, ul.child-content {
	list-style-type:none;
	padding: 0px;	
	background-color: #f3eed1;
	font-size: 15px;
	width: 321px;
	float: left;
	margin: 35px 0px 0px 20px;
}
.entry-content ul li,.child-content ul li {
	margin: 15px 10px 13px 15px;
}
.child-content ul li strong, .entry-content.normal ul li strong, .entry-content.parent ul li strong {
	font-size: 16px;
}

.entry-content dl  {
	margin: 0px;
}
.entry-content dl dt {
	float:left;
}
.entry-content dl dd {
	margin-left: 110px;
}

@media screen and (max-width: 1269px) {
	.content {
		margin: 20px 30px 0px 20px;
	}
}
@media screen and (max-width: 1099px) {
	.content {
		height: 960px;
	}
	.entry-content ul {
		margin: 35px 0px 0px 20px;
	}
	.gallery {
		position: static;
		clear: both;
		padding: 20px 0px 0px 20px;
	}
	nav.gallery-controls {
		position:relative;
		top: 0px;
		padding: 20px 0px 0px 20px;
	}
	.menu-main-navigation-container
	{
		left:540px;	
	}
	.menu-booking-menu-container
	{
		left: 460px;	
	}
	.previous-photo {
		left: 30px;
	}
	.next-photo {
		left: 396px;
	}
	
}
@media screen and (max-width: 733px) {
	header {
		width: 240px;
	}
	.menu-main-navigation-container
	{
		position: static;
		float: left;
		margin: 0px 0px 0px 40px;
	}
	.menu-booking-menu-container
	{
		position: static;
		float: left;
		margin: 0px 0px 0px 40px;
	}
	nav.menu {
		height: 140px;
	}
}
@media screen and (max-width: 550px) {
	header {
		padding: 54px 0px 10px 132px;
	}
	header p {
		top: 10px;
		left: 131px;
	}
	header a.title {
		font-size: 35px;
		line-height: 28px;
	}
	header a.logo {
		top: 25px;
		font-size: 80px;
		line-height: 84px;
		width: 95px;
		height: 95px;
	}
	.content {
		height: auto;
	}
	ul.qtrans_language_chooser {
		position: static;
		height: 20px;
		margin: 1px 0px 0px 118px;
	}
	ul.qtrans_language_chooser li {
		float: left;
		margin: 0px 0px 0px 14px;
	}
	.gallery {
		margin-right: 20px;
		top: 365px;
		left: 19px;
	}
	.child-content .gallery {
		top: 620px;
		left: 19px;
	}
	.gallery img {
		width: 100%;
		height: auto;
	}
	ul.menu {
		font-size: 13px;
	}
	.menu-main-navigation-container {
		margin: 0px 0px 0px 20px;
	}
	.menu-booking-menu-container {
		margin: 0px 0px 0px 10px;
	}
	.content {
		margin: 0px;
	}
	.entry-content ul {
		margin: 0px 20px 20px 20px;
	}
	.entry-content.normal ul, .entry-content.parent ul {
		width: 90%;
	}
	.child-content ul, ul.child-content {
		margin: 0px 20px 20px 20px;
		width: 90%;
	}
	.entry-content.home ul
	{
		width: 90%;
	}
	
	.entry-content ul img {
		width: 100%;
		height: auto;
	}
	.socialmedia {
		top: 21px;
		right: 20px;
	}
}
@media screen and (max-width: 334px) {
	.twitter {
		display: none;
	}
	.instragram {
		display: none;
	}
}