/***************************************************
* Font's to load server-side.
***************************************************/
@font-face {
  font-family: "KGTangledUpInYou";
  src: url(../fonts/KGTangledUpInYou.ttf) format("truetype");
}

@font-face {
  font-family: "KGNexttoMeSketched";
  src: url(../fonts/KGNexttoMeSketched.ttf) format("truetype");
}

/***************************************************
* Basic structure
***************************************************/
body {
	background-image: url(../images/layout/background.jpg);
	background-repeat: repeat;
}

.container {
	width: 1270px;
}

.logo {
	padding-top: 10px;
}

.header {
	display: inline-block;
	height: auto;
	padding-bottom: 15px;
}


/***************************************************
* Navigation
***************************************************/
#topNavigation {
	width: 900px;
	height: 161px;

	z-index: 1000;
}

#topNavigationSticky {
	position: fixed;
	background-color: rgba(229, 9, 127, 0.2);
}

#topNavigationSticky .nav-pills > li {
	border-color: #E5097F;
	background-color: rgba(229, 9, 127, 0.2);
  font-family: "KGNexttoMeSketched";

}
#topNavigationSticky .nav-pills > li a {
	color: #333333;
}

#topNavigationSticky .nav-pills > li > a:hover,
#topNavigationSticky .nav-pills > li.active > a:hover,
#topNavigationSticky .nav-pills > li.active > a{
	border-color: #E5097F !important;
	background-color: rgba(229, 9, 127, 0.5) !important;
	color: #333333;
}


/***************************************************
* Content structure
***************************************************/
#content {
	background-color: rgba(255, 251, 219, 0.5);
	color: #E5097F;

	font-family: "Comic Sans MS", "Arial", "Non Serif";

	min-height: 450px;
	padding: 50px;
	margin-bottom: 50px;

  -webkit-border-top-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  border-top-right-radius: 20px;
  -webkit-border-top-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  border-top-left-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-bottomright: 20px;
  border-bottom-right-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-bottom-left-radius: 20px;
}

#content a {
	color: #E5097F;
	text-decoration: none;
}

#content h1 {
	font-family: "KGNexttoMeSketched";
	font-size: 40px;
}

#content h1:nth-of-type(1) {
	margin: 0px;
	padding: 0px 0px 15px 0px;
}

#content h2 {
	font-family: "KGNexttoMeSketched";
	font-size: 32px;
}

#content h3 {
	font-family: "KGNexttoMeSketched";
	font-size: 24px;
	padding-top: 0px;
	margin-top: 0px;
}

#content p {
	font-family: "KGNexttoMeSketched";
	font-family: "Comic Sans MS", "Arial", "Non Serif";
}

#content .product-seperation:not(:first-of-type){
	border-top: #E5097F dashed 1px;
}

#content dt {
}

#content dd {
	padding-left: 20px;
	padding-bottom: 15px;
}

#content dl {
	font-size: 20px;
}

.billboardFont {
	font-family: "KGNexttoMeSketched"
}

#content .category-overview {
	min-height: 100px;
}

#content .picture-overview {
	width: 100px;

	margin-right: 15px;
}

#content .category-thumbnail {
	max-width: 100px;
	max-height: 100px;

  display: block;
	margin: auto;

	vertical-align: central;
}

#content .product-thumbnail {
	max-width: 150px;
	max-height: 150px;

  display: block;
	margin: auto;
	
	margin-bottom: 10px;

	vertical-align: central;
}

#content .nailthumb-container {
	float: left;
	
	margin: 10px;
}

/***************************************************
* News structure
***************************************************/
#news {
	height: 456px;

	background-image: url(../images/layout/news.png);
	background-repeat: no-repeat;

	-ms-transform: rotate(5deg); /* IE 9 */
	-webkit-transform: rotate(5deg); /* Chrome, Safari, Opera */
	transform: rotate(5deg);
}

#news h2 {
	display: inline-block;
	padding: 40px 0px 0px 60px;

	color: #7E71B1;
	font-family: "KGNexttoMeSketched";

	-ms-transform: rotate(-10deg); /* IE 9 */
	-webkit-transform: rotate(-10deg); /* Chrome, Safari, Opera */
	transform: rotate(-10deg);
}

#news div {
	display: inline-block;
	width: 180px;
	margin-left: 20px;

	color: #FFFBDB;
	font-family: "KGNexttoMeSketched";
}

#news div:not(:first-of-type){
	border-top: #FFFBDB dashed 1px;
	padding-top: 10px;
}


/***************************************************
* Developed-by
***************************************************/
#developedBy {
	font-size: 12px;
	position: absolute;
	bottom: 10px;
	right: 10px;
}


/***************************************************
* Bootstrap-Extensions
***************************************************/
.vcenter {
	display: inline-block;
	vertical-align: middle;
	float: none;
}

.vcenter:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.top5 { padding-top:5px; }
.top7 { padding-top:7px; }
.top10 { padding-top:10px; }
.top15 { padding-top:15px; }
.top20 { padding-top:20px; }
.top30 { padding-top:30px; }

.btn-default {
	border-color: #E5097F;
	background-color: rgba(229, 9, 127, 0.2);
}

.btn-default:hover {
	border-color: #E5097F;
	background-color: rgba(229, 9, 127, 0.5);
}

@decimal-format price {
  grouping-separator: "'";
  decimal-separator : "."
}

.price::after {
	content: " CHF";
}

.price-small {
	font-size: 18px;
}

.form-row {
	padding-top: 15px;
	padding-bottom: 5px;
}

.fancybox {
	
}

/*@media only screen and (max-device-width: 480px) {*/
	#topNavigation {
		display: none !important;
		width: 900px;
		height: 161px;

		z-index: 1000;
	}

	#topNavigationSticky {
		position: fixed;
		background-color: rgba(229, 9, 127, 0.2);
	}

	#topNavigationSticky .nav-pills > li {
		border-color: #E5097F;
		background-color: rgba(229, 9, 127, 0.2);
		font-family: "KGNexttoMeSketched";

	}
	#topNavigationSticky .nav-pills > li a {
		color: #333333;
	}

	#topNavigationSticky .nav-pills > li > a:hover,
	#topNavigationSticky .nav-pills > li.active > a:hover,
	#topNavigationSticky .nav-pills > li.active > a{
		border-color: #E5097F !important;
		background-color: rgba(229, 9, 127, 0.5) !important;
		color: #333333;
	}
/*}*/