Subversion-Projekte lars-tiefland.ci

body {

	background-color: #fff;

	color: #888;

	font-family: 'Maven Pro';

	font-size: 14px;

	margin: 0;

}

ul, ol {

	padding-left: 40px;

	margin: 0;

	list-style: none;

}

h1 {

	color: #fff;

	font-size: 28px;

	font-weight: lighter;

	line-height: 40px;

	margin-top: 0;

	margin-bottom: 40px;

	text-align: center;

}

h3 {

	color: #222;

}

p {

	font-size: 16px;

	line-height: 24px;

}

hr {

	border: none;

	border-bottom: 1px solid #ddd;

	margin: 40px 0;

}

a {

	text-decoration: none;

	transition: color 0.2s;

}

.clear {

	clear: both;

}

.inner {

	width: 1000px;

	margin: 0 auto;

	max-width: 100%;

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

}

.inner.over {

	margin-top: -180px;

}

/* Header */

#header {

	background-image: url(../images/background.jpg);

	background-repeat: no-repeat;

	background-position: center -60px;

	background-size: cover;

	padding: 60px 30px 100px 30px;

	box-shadow: 0 -40px 80px #fff inset;

}

#header h1 {

	color: #444;

	margin-top: 40px;

	margin-bottom: 80px;

}

#header nav {

	float: right;

}

#main-menu li {

	display: inline-block;

	margin-left: 30px;

}

#main-menu a {

	color: #bbb;

	font-size: 16px;

	text-decoration: none;

}

#main-menu a:hover {

	color: #666;

}

/* Logo */

#logo {

	background-image: url(../images/logo.png);

	background-repeat: no-repeat;

	background-position: center;

	display: block;

	width: 140px;

	height: 42px;

}

.button {

	background-color: #f56b7e;

	border-radius: 3px;

	color: #fff !important;

	font-size: 16px;

	text-decoration: none;

	display: inline-block;

	padding: 12px 0 12px 16px;

}

.button span {

	background-color: rgba(0, 0, 0, 0.08);

	border-radius: 0 3px 3px 0;

	font-weight: bold;

	margin-left: 24px;

	padding: 12px 16px 12px 8px;

	position: relative;

	transition: padding 0.2s;

}

.button:hover span {

	padding: 12px 24px 12px 16px;

}

.button span::before {

    width: 14px;

    height: 42px;

    content: '';

	background-image: url(../images/button-divider.png);

	background-repeat: no-repeat;

    position: absolute;

    left: -14px;

    top: 0;

}

#map-section {

	width: 800px;

	max-width: 100%;

}

/* Browser mockup */

.window-mockup {

	background-color: #f0f0f0; /* #f0ece0 */

	background-image: url(../images/window.png);

	background-repeat: no-repeat;

	background-position: 14px center;

	border-radius: 10px 10px 0 0;

	height: 42px;

	overflow: hidden;

}

.window-mockup.brown {

	background-color: #2f2e2b;

}

.window-bar {

	background-color: #f8f8f8; /* #f6f4ed */

	border-radius: 3px;

	margin: 10px 14px 10px 80px;

	height: 22px;

}

/* Editor */

.editor-window {

	display: none;

	margin: 0 auto;

	width: 460px;

}

.editor-window .window-mockup {

	cursor: pointer;

}

.editor-body {

	background: #272822;

	color: #cfcfc2;

	padding: 14px;

	font-size: 12px;

}

/* Map */

.map-container {

	margin: 0 auto;

	margin-bottom: 60px;

}

/* Examples */

#examples {

	font-size: 0;

	padding: 0;

	margin: 0 80px;

	display: block;

	text-align: center;

}

#examples li {

	display: inline-block;

	margin-bottom: 6px;

}

#examples a {

	border-radius: 3px;

	border: 2px solid #fff;

	color: #bbb;

	font-size: 16px;

	display: block;

	padding: 10px;

	margin: 0 10px;

	transition: border-color 0.2s, color 0.2s;

}

#examples a:hover {

	color: #666;

	border: 2px solid #eee;

}

#examples .active a {

	border: 2px solid #ddd;

	color: #666;

}

/* WordPress */

#wordpress {

	color: #fff;

	display: block;

	font-size: 28px;

	text-align: center;

}

#wordpress strong {

	margin-left: 20px;

}

#wordpress img {

	vertical-align: middle;

}

/* Contact */

#contact {

	background-image: url(../images/mail.png);

	background-repeat: no-repeat;

	background-position: center;

	display: block;

	width: 48px;

	height: 48px;

	margin: 0 auto 30px auto;

}

/* Footer */

#footer {

	background-color: #2f2e2b;

	padding: 60px 0;

	text-align: center;

}

#footer span a {

	border-bottom: 1px solid transparent;

	color: #aaa;

	font-size: 13px;

	font-weight: bold;

	transition: color 0.2s, border-color 0.2s;

}

#footer span a:hover {

	border-color: #666;

	color: #eee;

}

/* Icons */

.icon {

	background-repeat: no-repeat;

	background-position: center 10px;

	padding-top: 60px;

}

.icon.landmark { background-image: url(../images/icon-landmark.png); }

.icon.layer { background-image: url(../images/icon-layer.png); }

.icon.link { background-image: url(../images/icon-link.png); }

.icon.browser { background-image: url(../images/icon-browser.png); }

.icon.responsive { background-image: url(../images/icon-responsive.png); }

.icon.mobile { background-image: url(../images/icon-mobile.png); }

.container {

	margin: 20px 0;

}

.container:after {

	clear: both;

	content: '';

	display: block;

	height: 0;

	visibility: hidden;

	font-size: 0;

}

.one-third {

	float: left;

	padding-left: 2%;

	padding-right: 2%;

	width: 29%;

}

.features {

	text-align: center;

}

section {

	padding: 60px 0;

}

section .inner {

	padding-left: 20px;

	padding-right: 20px;

}

section.purple {

	background-color: #b7a6bd;

	color: #fff;

	padding: 60px 0;

}

section.blue {

	background-color: #7DD5C9;

	color: #fff;

	padding: 20px 0;

}

.mapplic-coordinates {

	display: none;

}

/* Responsivity */

@media all and (max-width: 667px) {

	#header {

		display: none;

	}

	.inner.over {

		margin-top: 0;

		padding-top: 0;

	}

	.window-mockup {

		display: none;

	}

}