/*
Theme Name: stand.art (Starkers)
Theme URI: www.davespengeler.ch
Description: Template for stand-art.ch created from Dave Spengeler.
Version: 0.5
Author: Dave Spengeler
Author URI: http://davespengeler.ch
Tags: starkers, html5
*/

@import "css/reset.css";
@import "css/layout.css";

body {
font-family: "Open Sans", sans-serif;
line-height: 1.75em;
color: #333;
background-color: #FFF;
font-size:100%;
border-top:7px solid #ffcc00;
-webkit-font-smoothing:antialiased;
}


.wrapper {
max-width: 600px;
margin: 0 auto;
}
body.home .content, body.error404 {
	margin-top: 0px !important;
}

.content {
	margin-top: 25px;
}

* { 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; }

a {
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}

a:hover img   {
-moz-box-shadow: 1px 1px 3px #CCC;
-webkit-box-shadow: 1px 1px 3px #CCC;
box-shadow: 1px 1px 3px #CCC;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}


/*----------Typografie----------*/

strong 	{font-weight: 700;}
i, em 		{font-size: 90%; font-style: italic;}


blockquote {
font-size: 1em;
line-height: 1.45em;
color: #CCC;
padding-left: 25px;
margin-left: 25px;
margin-right: 25px;
border-left: 5px solid #FFCC00;
}

p.postinfo {
color: #CCC;
font-size: 0.75em;
}
p a {
border-bottom: 2px dotted #ffcc00;
color: #333;
text-decoration: none;
}

p a:hover {
color: #ffcc00;
}

h1, h2, h3, h4, h5, h6 {
font-family: 'Patua One'
}

h1, h2 {
line-height: 1em;
font-size: 3.5em;
margin-bottom: 10px;
color: #FFCC00;
}

h2 a:link, h2 a:hover, h2 a:visited {
color: #FFCC00;
text-decoration: none;
}

h3  {font-size: 2em;}
h4  {font-size: 1em;}
h5  {font-size: 0.75em;}

p   {
margin-bottom: 20px;
font-size: 1em;
}

article.post ul {
list-style-type:  disc;
list-style-position: inside;
margin-bottom: 25px;
}


/*----------Header----------*/
#mainheader {
	height: 95px;
	padding-top: 20px;
}

h1.logo {
text-indent: -99999px;
background-image: url(images/standart_logo.png);
display: block;
background-repeat: no-repeat;
width: 100px;
height: 50px;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
float: left;
}
h1.logo:hover {
background-image: url(images/standart_logo_hover.png);
}

.clear {
clear: both;
}


/*----------Navigationsmenu----------*/
header nav {
float: right;
display: block;
width: 475px;
font-size: 0.8em;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 12px;
}
header nav ul {
list-style: none;
float: right;
}
header nav li {
display: inline-table;
}
header nav a {
padding: 0 15px;
display: block;
text-decoration: none;
color: #333;
-webkit-text-shadow: 0px 1px 1px rgba(0,0,0,0.1);
-moz-text-shadow:    0px 1px 1px rgba(0,0,0,0.1);
text-shadow:         0px 1px 1px rgba(0,0,0,0.1);

}
header nav li:hover > a {
color: #ffcc00;
-webkit-text-shadow: none;
-moz-text-shadow:    none;
text-shadow:         none;
}




/*----------Highlight-Farbe----------*/

::selection {
background: #FFE066; /* Safari */
}
::-moz-selection {
background: #FFE066; /* Firefox */
}



/*----------Home bzw. Slides.js----------*/
		
.slides {
	position: relative;
	width: 100%;
	overflow: auto;
	
	font-size: 18px;
	line-height: 24px;
	text-align: center;
		
	background: #333;
	box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
	.slides ul {
		list-style: none;
	}
	.slides ul li {
		background-size: cover;
		display: block;
		float: left;
		min-height: 375px;
		padding: 130px 0 0 0;
		background-position: center center;
}



.slides ul li.slide1 {
background-image: url(images/slides/slide_shirts.jpg);
}
.slides ul li.slide2 {
background-image: url(images/slides/slide_woods.jpg);
}
.slides ul li.slide3 {
background-image: url(images/slides/slide_typo.jpg);
}
.slides ul li.slide4 {
background-image: url(images/slides/slide_keyboard.jpg);
}
.slides ul li.slide5 {
background-image: url(images/slides/slide_clouds.jpg);
}



.slides ul li h2, 
.slides ul li p {
	text-shadow: 0 1px 4px rgba(0,0,0,.6);
	display: inline-block;
	padding: 0 5px;
}

.slides ul li p {color: #fff; }
.slides ul li h2 {color: #ffcc00; }


ol {
display: block;
list-style-type: decimal;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;	
}

.slides .dots {
margin: -40px auto 0;
}
	.slides .dots li {
			display: inline-block;
			width: 10px;
			height: 10px;
			margin: 0 4px;
			
			text-indent: -999em;
			
			border: 2px solid #fff;
			
			cursor: pointer;
			opacity: .4;
			
			-webkit-transition: background .5s, opacity .5s;
			-moz-transition: background .5s, opacity .5s;
			transition: background .5s, opacity .5s;
	}
			.slides .dots li.active {
				background: #ffcc00;
				opacity: .8;
			}
		


/*----------teaser----------*/


.teaser {
	background:#333;
	width: 100%;
	padding: 30px 15px 20px 15px;
	position: relative;
	z-index: 90;
	margin-bottom: 35px;
	box-shadow: 0 1px 2px rgba(0,0,0,.25);
	overflow: auto;
	color: #fff;
}

.teaser-text {
margin-left:165px;
}

.teaser-text h3{
color: #ffcc00;
letter-spacing: 1px;
line-height: 110%;
}
.teaser-text p {
margin:0;
}

.invisible {
	text-decoration: none;
	color: #333;
}

.ribbon-wrapper {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
}

.ribbon {
	font: bold 0.8em "Open Sans";
	font-weight: 600;
	color: #fff;
	text-align: center;
	-webkit-transform: rotate(45deg);
	-moz-transform:    rotate(45deg);
	-ms-transform:     rotate(45deg);
	-o-transform:      rotate(45deg);
	position: relative;
	padding: 7px 0;
	left: -5px;
	top: 15px;
	width: 120px;
	background-color: #FFCC00;
}

.readmore {
	background-color: #000;
	padding: 5px 15px;
	display: inline;
	float: left;
	border-radius: 5px;
	font-size: 0.8em;
	text-transform:uppercase;
	letter-spacing: 1px;
	font-weight: 600;
	color: #ffcc00;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
	margin-top: 10px;
}
.readmore:hover {
	color: #fff;
	background-color: #222;

}



/*----------Blog----------*/

.post{
margin-bottom: 50px;
}

img {
border-bottom: 0px;
max-width: 100%;
height: auto;
}
article.post img {
max-width: 600px;
height: auto;
padding: 5px;
border: solid 1px #CCC;
}


hr {
margin-top: 25px;
height: 1px;
border: none;
background-color: #CCC;
}

.content nav p.next {
float: left;
}
.content nav p.prev {
float:right;
}
.content nav a{
color: #333;
text-decoration: none;
border-bottom: none;
}
.content nav a:hover{
border-bottom: 2px dotted #ffcc00;
}

img.wp-smiley {
border: none !important;
vertical-align:middle;
}

/*----------Shop----------*/

ul.produkte {
list-style-type: none;
}

ul.produkte li.produkt {
float: left;
width: 30.75%;
margin: 0 7px 7px 7px;
}

ul.produkte li.produkt img {
max-width: 100%;
height: auto;
padding: 5px;
border: 1px solid #CCC;
}

.farbbox {
	width: 1.2em;
	height: 1em;
	margin: 0 3px 0 7px;
	display:inline-table;
	border: solid 1px #CCC;
}

.eigenschaften {
	background:#f6f6f6;
	padding: 15px;
	-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
    -moz-box-shadow:    0px 1px 2px rgba(0,0,0,0.3);
    box-shadow:         0px 1px 2px rgba(0,0,0,0.3);
}


.eigenschaften li {
	margin-bottom: 5px;
}
.eigenschaften i {
	font-size: 90%;
	margin-right: 5px;
	color: #ffcc00;
}

.preis {
	float: right;
	background: #ffcc00;
	padding:5px;
	display: inline;
	margin: 5px 0 15px 35px;
}

/*----------Portfolio----------*/
object, embed {
width: 600px;
max-width:100%;
height: 550px;
}



/*----------Kontaktformular----------*/
.wpcf7-form-control {
border: 1px solid #CCC;
min-height: 25px;
width: 100%;
font-family: "Open Sans";
font-size: 1em;
}

input:focus,
textarea:focus {
outline-color: #FC0;
}

.wpcf7-submit {
background-color: #FC0;
}

.wpcf7-not-valid-tip {
display: none !important;

}
.wpcf7-validation-errors {
border-color: #FC0 !important;
}

.portraits {
margin: 50px auto 25px;	
overflow: hidden;
}

.portrait {
float: left;
padding-right: 20px; 
}

.last {
margin-right: 0 !important;	
padding-right: 0 !important;	
}

.portraits .portrait div {
float: left;
width:290px;
height: 200px;
background-size: cover;
background-position: center center;
}
.portraits a div:hover {
background-size: 105%;
opacity: 1;
}

.portraits a  {
text-align: center;
color: #333;
text-decoration: none;
}

.portraits a:hover p{
color: #ffcc00;
}


.portrait_dave { 
background-image: url(images/portraits/dave_sw.jpg);
}
.portrait_flavio { 
background-image: url(images/portraits/flavio_sw.jpg);
}
.portrait_bingi { 
background-image: url(images/portraits/bingi_sw.jpg);
}
.portrait_raphi { 
background-image: url(images/portraits/raphi_sw.jpg);
}


/*----------404-Page----------*/
.fourohfour {
	height: 375px;
	width: 100%;
	position: relative;
	background: #333;
	background-image: url(images/slides/404_lama.jpg);
	box-shadow: 0 1px 2px rgba(0,0,0,.25);
	background-size: cover;
	background-position: center center;
}



/*----------Footer----------*/
footer {
clear: both;
}

.left{float: left;}
.right{float: right;}

footer p {
color: #CCC;
font-size: 0.75em;
}

footer p a{
border: none;
color: #CCC;
}





/*----------Mobile----------*/

@media (max-width: 600px) {
body { font-size: 90%; }

h2, .post h1 {
	font-size: 2.5em;
}

.content {
padding:15px;
}

h1.logo {
float: none;
margin: 20px auto 15px;
}

header nav {
float: none;
width: 100%;
}

header nav ul {
width: 100%;
border-bottom: none;
border-top: 1px solid #CCC;
font-size: large;
float: left;
}
header nav li {
max-width: 100%;
border-bottom: 1px solid #CCC;
padding: 5px;
display: block;
}
header nav a {
display: block;
text-decoration: none;
color: #333;
-webkit-text-shadow: none;
-moz-text-shadow:    none;
text-shadow:         none;
padding: 7px 15px;
}

article.post img {
max-width: 97%;
height: auto;
padding: 5px;
}

ul.produkte li.produkt {
float: left;
width: 45%;
margin: 0 7px 7px 7px;
}

object, embed {
height: auto;
}

.slides ul li {
padding: 80px 0 0 0;
background-position: center center;
}


.teaser img {
	width: 100px;
}
.teaser-text {
	margin-left: 115px;
}

.current-menu-item a {
	font-weight: bold;
	color: #ffcc00;
}
.notonmobile {
	display:none;
}


}