/*
Theme Name: 	Picweb for Wordpress
Theme URI: 		http://picweb.ch/
Description: 	Get your pics on the web!
Version: 		1.0
Author: 		Joern Bargmann / Lorenzo Butti
Author URI: 	http://joernbargmann.com/, http://lorenzobutti.com
Tags: 			picweb
Comment:		This theme is loosely based on starkers.
*/

/*
===========================
CONTENTS:

01 Sensible defaults
02 Typography
03 Media queries 
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@import "css/reset.css";

article,
section,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
body 				{ background:#fff; /* Don't forget to style your body to avoid user overrides */ }
::-moz-selection 	{ background:#ff0; color:#333; }
::selection 		{ background:#ff0; color:#333; }

/* ---------------------------------------------------------------------------------------------------------- 
02 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*

14 / 16	= 		0.875em 		(14px equivalent)
16 / 16	= 		1em 			(16px equivalent)
18 / 16 = 		1.125em 		(18px equivalent)
21 / 16 = 		1.3125em 		(21px equivalent)
24 / 16 = 		1.5em 			(24px equivalent)
30 / 16 = 		1.875em 		(30px equivalent)

*/

body,
input,
textarea { 
	font: .75em/1.3em "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
		color: #181818;
		font-weight: normal;
		text-align: center; }
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
	h1 { font-size: 2em; line-height: 1.1; margin-bottom: 14px;}
	h2 { font-size: 1.8em; line-height: 1.1; margin-bottom: 10px; }
	h3 { font-size: 1.6em; line-height: 1.1; margin-bottom: 8px; }
	h4 { font-size: 1.4em; line-height: 1.1; margin-bottom: 4px; }
	h5 { font-size: 1.2em; line-height: 1.1; }
	h6 { font-size: 1em; line-height: 1.1; }
	.subheader { color: #777; }

	p { margin: 0 0 20px 0; }
	p img { margin: 0; }
	p.lead { font-size: 21px; line-height: 27px; color: #777;  }

	em { font-style: italic; }
	strong { font-weight: bold; color: #333; }
	small { font-size: 80%; }

/*	Blockquotes  */
	blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; }
	blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
	blockquote cite { display: block; font-size: 12px; color: #555; }
	blockquote cite:before { content: "\2014 \0020"; }
	blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }

	hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }
	
	/* #Links
	================================================== */
		a, a:visited { color: #666; text-decoration: none; outline: 0; }
		a:hover, a:focus { color: #000; }
		p a, p a:visited { line-height: inherit; }
	
	
	/* #Lists
	================================================== */
		ul, ol { margin-bottom: 1em; }
		ul { list-style: none outside; }
		ol { list-style: decimal; }
		ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
		ul.square { list-style: square outside; }
		ul.circle { list-style: circle outside; }
		ul.disc { list-style: disc outside; }
		ul ul, ul ol,
		ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%;  }
		ul ul li, ul ol li,
		ol ol li, ol ul li { margin-bottom: 6px; }
		li { line-height: 18px; margin-bottom: 12px; }
		ul.large li { line-height: 21px; }
		li p { line-height: 21px; }

/* Layout */

#page {
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
}

.header {
	border-bottom: 1px #999 solid;
	padding: 1em 0 0;
	overflow: auto;
}

.home .header {
	border: none;
}

.header header {
	display: table;
	margin: 0 auto;
	text-align: center;
}

.header h1 {
	margin: 14px auto 0 auto;
	width: 100%;
	text-align: center;
}

.content, .entry-content {
	margin: 1em auto;
}

.page .entry-content {
	width: auto;
	max-width: 600px;
}

.slide {
	display: inline-block;
	margin: .2%;
	width: 12.1%;
}
.slide span {
	display: none;
}

footer {
	border-top: 1px #999 solid;
	padding: 1em 0;
	overflow: auto;
	color: #999;
}

footer .footer {
	display: table;
	margin: 0 auto;
}
img {
	height: auto;
	width: auto;
	max-width: 100%;
}
/* Nav */
.main-navigation {
	margin-top: 1em;
}
.main-navigation ul, .main-navigation li {
	margin-bottom: 0;
}
.main-navigation li {
	display: inline-block;
	margin: 0 6px;
}
.social-navigation {
	position: absolute;
	top: 6px;
	right: 6px;
}
.social-navigation li {
	display: inline-block;
	margin: 3px;
	width: 24px;
}

/* Image Replacement */

.header h1 a {
	display: block;
	background: transparent url('./img/logo.png') no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 300px;
	height: 44px;
	margin: 0 auto;
	overflow: hidden;
	text-decoration: none;
}
.header h1 a:hover {
	text-decoration: none;
}

.header h1 a span {
	position:relative;
	left: -10000px;
}
/* Newsletter */
label {
	display: block;
}
input[type=text], input[type=phone], input[type=password], input[type=email], textarea {
border: 1px solid #d8d8d8;
padding: 0px 10px;
border-radius: 18px;
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
}
input[type=text], input[type=phone], input[type=password], input[type=email] {
height: 22px;
}
textarea, input[type=text], input[type=phone], input[type=password], input[type=email] {
line-height: 22px;
color: #666;
}
input {
margin: 0 0 1em 0;
}
input, a {
outline: none !important;
}
.input-group ul {
	list-style: none;
}
.input-group label {
	display: inline;
}
.input-group input {
	vertical-align: text-top;
	margin: 0 3px 0 0;
}

/* ---------------------------------------------------------------------------------------------------------- 
03 Media queries (using a mobile-first approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:1880px) {
	.slide {
		width: 12.1%;
	}
}
@media screen and (max-width:1650px) {
	.slide {
		width: 13.8%;
	}
}
@media screen and (max-width:1420px) {
	.slide {
		width: 16.2%;
	}
}
@media screen and (max-width:1190px) {
	.slide {
		margin: .5%;
		width: 19%;
	}
}
@media screen and (max-width:960px) {
	.slide {
		margin: .5%;
		width: 24%;
	}
}
@media screen and (max-width:730px) {
	.slide {
		margin: .5%;
		width: 32%;
	}
	.social-navigation li {
		display: block;
		width: 18px;
	}
}
@media screen and (max-width:500px) {
	.slide {
		margin: 1%;
		width: 48%;
	}
}
@media screen and (max-width:480px) {

	.header h1 a {
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		height: 31px;
		width: 220px;
	}

}