/*
==================================================
########################## BOOTSTRAP overwrite
==================================================
*/
ul {
	list-style: none;
	margin: 0;
}

a {
	color: #fff;
}

a:hover, a:focus, a.active {
	color: #ff7611;
}

.btn-group > .btn:first-child {
   border-radius: 30px 0 0 30px;
	border: 0;
    padding: 4px 30px;
}

.input-append input, .input-prepend input, .input-append select, .input-prepend select, .input-append .uneditable-input, .input-prepend .uneditable-input {
	border-radius: 0 30px 30px 0;
	border: 0;
}

textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus {
  border-color: rgba(0, 0, 0, 0.8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(0, 0, 0, 0.6);
}


[class^="icon-"], [class*=" icon-"] {
	background-image: url("../img/glyphicons-halflings-white.png");
}

.icon-user {
	margin: -2px 5px 0 0;
}

.m0 .span7 {
	width: 560px;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {
    background: rgb(40,40,40); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(40,40,40,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(40,40,40,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(40,40,40,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(40,40,40,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(40,40,40,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(40,40,40,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282828', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}


.caret {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: top;
  border-top: 4px solid #ffffff;
  border-right: 2px solid transparent;
  border-left: 2px solid transparent;
  content: "";
}


/*
==================================================
########################## FONT
==================================================
*/
strong {
	font-weight: 700;
}

i {
	font-weight: 400italic;
}

i strong,
strong i {
	font-weight: 700italic;
}
/*
==================================================
########################## LAYOUT
==================================================
*/
body {
  background: url(../img/bg.png) left top repeat-x #e8e8e8;
  font: 400 13px/20px 'Source Sans Pro', Arial, sans-serif;
  color: #fff;
}

#wrapper {
	width: 100%;
}

hr{
	border-bottom: 1px solid #f6f6f6;
}

.inside {
	width: 960px;
	margin: 0 auto;
	
}

#header {
	height: 155px;
}

#content {
	background: #fff;
	padding: 10px;
	margin-top: 8px;
}

#footer {
  background: url(../img/footer_bg.png) left top repeat-x #000;
  padding: 40px 0;
  clear: both;
  width: 100%;
}
/*
==================================================
########################## HEADLINES
==================================================
*/
h1 {
	font-size: 18px;
	line-height: 24px;
	font-weight: 400;
}

h2 {
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	color: #fff;
	font-weight: 400;
}

h3 {
	font-size: 18px;
	line-height: 26px;
	color: #00c0fa;
	font-weight: 600;
    margin: 0;
}

h4 {
  font-size: 16px;
  text-transform: uppercase;
}

.about h1,
.about h2 {
  color: #000;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 20px;
}


/*
==================================================
########################## Header
==================================================
*/
#logo {
	float: left;
	margin: 10px 270px 30px 0;
}

#brand {
	float: left;
	margin-top: 10px;
}

.metronom a{

	display:block;
	background:transparent url(metronom.png) 0 0px no-repeat;
	width: 42px;
	height: 42px;
}
.metronom a:hover{
	
	background-position: 0 -44px;
}

}

/* Metanavigation */
#metanavi {
  padding-left: 10px;
}

#metanavi li.first {
	margin-right: 20px;
	padding-right: 20px;
	background: none;
}	
	
#metanavi li {
	float: left;
	padding-right: 15px;
	padding-top: 13px;
	margin-right: 10px;
	background: url(../img/seperator.png) right top no-repeat;
	font-size: 11px;
}

#metanavi li.last {
	background: none;
	padding-right: 0;
	margin-right: 0;
}

#metanavi li a {
	text-transform: uppercase;
}


/* Mainnavigation */
#mainnavi {
	clear: both;
	float: left;
	padding-left: 4%;
	background: url(../img/arrow.png) left 2px no-repeat;
	width: 96%;
}

#mainnavi li {
	float: left;
	padding-right: 10px;
	margin-right: 10px;
	border-right: 1px solid #525252;
	font-size: 12px;
	line-height: 16px;
}
#mainnavi li.last {
	border: 0;
	padding: 0;
	margin: 0;
}


#mainnavi .dropdown-menu li {
	border: 0;

}


#mainnavi .dropdown-header {
	float: left;
	padding-right: 10px;
	margin-right: 10px;
	color: #e0e0e0;
	font-weight: bold;
}




#mainnavi li a {
	text-transform: uppercase;
}

/* My Groovelab */
.mygroovelab p {
  margin: 0;
  padding-left: 10px;
  line-height: 18px;
}

ul.mygroovelab {
  padding: 20px 0 0 10px;
}

.mygroovelab li {
  float: left;
  padding-right: 10px;
  margin-right: 10px;
}


/* Searchbar */
#searchbar {
	clear: both;
	padding-top: 20px;
}

/*
==================================================
########################## CONTENT
==================================================
*/

#news {
	background: #1f1f1f;
}

#news a, .about a {
	color: #00c0fa;
}

#news a:hover, .about a:hover {
	color: #ff7611;
}

.tutorialnews .item {
	border-bottom: 2px solid #2a2a2a;
	padding: 10px 20px;
}

.tutorialnews .item.first {
	padding-top: 0;
}

.tutorialnews h2 {
	padding: 0 20px;
}

/* HEADLINE */
.headline {
	background: #020202;
	margin: 10px 0;
}

.headline h1 {
	padding-left: 15px;
}

/* THUMB-Overview */
.thumboverview {
  margin-bottom: 10px;
}

.thumboverview .span4 {
	background: #353535;
    position: relative;
}

.desc {
  background-color:rgba(13,13,13,0.65);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 20;
  padding: 10px;
}

.thumboverview .desc {
  width: 280px;
}

.desc p {
  margin: 0;
}

.roundicon {
  background: #353535;
  width: 35px;
  height: 28px;
  padding-top: 7px;
  float: left;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  border-radius: 30px;
}

.thumboverview .txt {
  float: left;
  padding-left: 10px;
}

/* ABOUT */
.about {
  color: #000;
}

.about .leftitem {
  padding: 0 0 30px 10px;
}

.about .rightitem {
  padding: 0 0 30px 20px;
}

.sample {
  position: relative;
  margin-bottom: 10px;
}

.sample .desc {
  width: 205px;
  color: #fff;
}

/*
==================================================
########################## FOOTER
==================================================
*/
#footer .sitemap {
  float: left;
  padding: 0 20px;
  margin-right: 20px;
}

#footer .sitemap li.first {
  margin-bottom: 20px;
}

#copyright {
  float: right;
  padding-right: 20px;
}
/*==================================================########################## MIXER==================================================*/

.author {	color: #666;}