/*
 AUTHOR: Felix Dorner
 AUTHOR: Robert Böhnke
 */
/******************************************
 *   STANDARDS
 ******************************************/
body {
    font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
    color: #333333;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0; /* This removes the border around the viewport in old versions of IE */
    min-width: 900px; /* Minimum width of layout - remove line if not required */
}

form {
	display: inline;
}

a {
    color: #ff4700;
    text-decoration: none;
}

a img {
	border: none;
}

a:hover {
    color: #333333;
}

h2, h3 {
    margin: 0 0 10px 0;
	clear : both;
}

ul {
    list-style: none;
    padding-left: 5%;
}

.bold-text {
	font-weight: bold;
}

/******************************************
 *   DESIGN CLASSES
 ******************************************/
.standard {
    float: left;
    width: 100%;
}

.gradient-dark {
	background: #333333;
    background: -moz-linear-gradient(top, black, #222222 1px, #333333 25px);
	background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #222222), to(#333333));
}

.gradient-light {
	background: #eee;
	background: -moz-linear-gradient(top, black, #ccc 0px, #eee 50%);
	background: -webkit-gradient(linear, left top, left 50%, from(black), color-stop(0%, #ccc), to(#eee));
	}
	
.gradient-white {
	background: #fff;
	background: -moz-linear-gradient(top, black, #eee 0px, #fff 50%);
	background: -webkit-gradient(linear, left top, left 50%, from(black), color-stop(0%, #eee), to(#fff));
	}
	
.gradient-orange {
	background: #ff4700;
	background: -webkit-gradient(linear, left top, left 25, from(#ff9800), color-stop(4%, #ff9800), to(#ff4700));
	background: -moz-linear-gradient(top, #ff9800, #ff9800 1px, #ff4700 25px);
}

.rounded-corners {
	-moz-border-radius: 30px 3px 30px 3px;
	-webkit-border-top-right-radius: 3px;
	-webkit-border-top-left-radius: 30px;
	-webkit-border-bottom-right-radius: 30px;
	-webkit-border-bottom-left-radius: 3px;
	}
	
.small-rounded-corners {
	-moz-border-radius: 14px 2px 14px 2px;
	-webkit-border-top-right-radius: 2px;
	-webkit-border-top-left-radius: 14px;
	-webkit-border-bottom-right-radius: 14px;
	-webkit-border-bottom-left-radius: 2px;
}

/******************************************
*   HEAD                         
******************************************/

#header {
	margin : 0;
	padding : 0;
}

#header h1 {
	display: none;
}

#iframe_container iframe {
	float: left;
	position: relativ;
	width : 100%;
	height : 70%;
	min-height: 450px;
	background: #333333;
	border: none;
	}

#line {
	width: 100%;
	height: 50px;
	float: left;
	font-size: smaller;
	text-align: right;
	color: #fff;
}
	
.shadow {
	height: 25px;
	background: #fff;
	background: -moz-linear-gradient(top, #666, #fff 50%);
	background: -webkit-gradient(linear, left top, left 50%, from(#666), to(#fff));
	float: left;
	width: 100%;
	margin: 0 0 -20px 0; 
}
	
#powered {

}

#thermometer-container  {
	margin: 0px 0 10px 10px;
}

#logo {
	float: left;
	margin: 10px 10px 10px 20px;
}

#sponsoring {
	float: right;
	display: block;
	width: auto;
	height: 30px;
	margin: 10px 20px 10px 10px;
}

#sponsoring span {
	vertical-align : middle;
	height: 30px;
	display: inline-block;
	margin: 0 5px 0 0;
}

#sponsoring img {
  margin: 0 5px;
}

.fineprint {
	color: #666;
	font-size: smaller;
}

.clear {
	clear: both;
}

.floating-left {
	float : left;
	margin: 0 10px 10px 0;
}

.floating-right {
	float : right;
	margin: 0 0 10px 10px;
}

/******************************************
*   LOGOS AND ONE-SHOTS     
******************************************/

#soundcloud-logo-big, #twitter-logo-big {
	text-align: center;
	display: block;
	width: 200px;
	margin: 10px auto;
}

.s3-swf-upload-link a {
	display:block;
	float:right;
	margin:0 0 0 10px;
	color:#FFFFFF;
	cursor:pointer;
	font-weight:bold;
	padding:10px 15px;
	text-align:center;
	-moz-border-radius:14px 2px 14px 2px;
	background: #333;
	background:-moz-linear-gradient(center top , black, #222222 1px, #333333 25px) repeat scroll 0 0 transparent;
	background: -moz-linear-gradient(top, #222222, #222222 1px, #333333 25px);
	color: #000;
	border:medium none;
	outline:0 none;
	color: #fff;
}

.s3-swf-upload-link a:hover {
	background: #ff4700;
	background: -webkit-gradient(linear, left top, left 25, from(#ff9800), color-stop(4%, #ff9800), to(#ff4700));
	background: -moz-linear-gradient(top, #ff9800, #ff9800 1px, #ff4700 25px);
	color: #000;
}

/******************************************
*   HOLY GRAIL FRAMEWORK                       
******************************************/

/* column container */
	.colmask {
		position:relative;		/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
	    clear:both;
	    float:left;
        width:100%;				/* width of whole page */
		overflow:hidden;		/* This chops off any overhanging divs */
	}
	
	/* holy grail 3 column settings */
	.holygrail {
	    background:#FFF;    	/* Right column background colour */
		margin: 20px 0;
	}
    .holygrail .colmid {
        float:left;
        width:200%;
        margin-left:-220px; 	/* Width of right column */
        position:relative;
        right:100%;
        background:#fff;    	/* Centre column background colour */
    }
    .holygrail .colleft {
        float:left;
        width:100%;
        margin-left:-50%;
        position:relative;
        left:440px;         	/* Left column width + right column width */
        background:#FFFFFF;    	/* Left column background colour */
    }
    .holygrail .col1wrap {
        float:left;
	    width:50%;
	    position:relative;
	    right:220px;        	/* Width of left column */
	    padding-bottom:1em; 	/* Centre column bottom padding. Leave it out if it's zero */
	}
	.holygrail .col1 {
        margin:0 230px;     	/* Centre column side padding:
                            	Left padding = left column width + centre column left padding width
                            	Right padding = right column width + centre column right padding width */
        position:relative;
	    left:200%;
	    overflow:hidden;
	}
    .holygrail .col2 {
        float:left;
        float:right;			/* This overrides the float:left above */
        width:200px;        	/* Width of left column content (left column width minus left and right padding) */
        position:relative;
        right:px;         	/* Width of the left-had side padding on the left column */
    }
    .holygrail .col3 {
        float:left;
        float:right;			/* This overrides the float:left above */
        width:200px;        	/* Width of right column content (right column width minus left and right padding) */
        margin-right:40px;  	/* Width of right column right-hand padding + left column left and right padding */
        position:relative;
        left:50%;
    }
	
	.sidebar, .content {
		padding: 20px;
		font-size: small;
	}

/******************************************
*   FOOTER                         
******************************************/
	
#footer {
	clear:both;
	width: 100%;
	float: left;
	font-size : smaller;
	text-align : center;
}
	
/******************************************
*   INPUT, FORMS, BUTTONS & CO                        
******************************************/
	
#form {
	float:left;
	width: 100%;
	margin: 20px 0;
}

.form-box {

}

.form-box .track {
	text-align: left;
	height: 20px;
	overflow: hidden;
}

.form-box .button {
	margin: 0 0 0 10px;
	display: block;
	float: right;
}

.track input {
	margin: 2px 5px 0 0;
}

#uploads {
	margin: 20px 0;
}

#label {
		color: #fff;
		padding: 10px;
		font-weight: normal;
}

#downloads {
		padding: 10px;
		font-weight: normal;
}

	
input, textarea { 
	padding: 10px;
	border: none;
	outline: 0;
}
	
.button { 
	padding: 10px 15px;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
	text-align : center;
	margin: 0 0 5px 0;
}

.sidebar .button {
	display: block;
}
	
.button2 { 
	margin: 0 0 0 5px;
	min-width: 100px;
	color: #fff;
	font-weight: bold;
	-moz-border-radius: 14px 0px 0px 2px;
	-webkit-border-top-right-radius: 0px;
	-webkit-border-top-left-radius: 14px;
	-webkit-border-bottom-right-radius: 0px;
	-webkit-border-bottom-left-radius: px;
	cursor: pointer;
}
	
.button:hover, .button2:hover {
	background: #ff4700;
	background: -webkit-gradient(linear, left top, left 25, from(#ff9800), color-stop(4%, #ff9800), to(#ff4700));
	background: -moz-linear-gradient(top, #ff9800, #ff9800 1px, #ff4700 25px);
	color: #000;
}

#no-i-live-in {
	display: inline-block;
}

input.text { 
	margin-left: -5px;
	border: 1px solid #333333;
	border-left: 0;
	-moz-border-radius: 0px 2px 14px 0px;
	-webkit-border-top-right-radius: 2px;
	-webkit-border-top-left-radius: 0px;
	-webkit-border-bottom-right-radius: 14px;
	-webkit-border-bottom-left-radius: 0px; 
	width : 215px;
}

input:hover, textarea:hover,
input:focus, textarea:focus { 
	border-color: #C9C9C9; 
}


.featured-track {
	clear : both;
	display : block;
	margin: 0 0 10px 0;
	height: 100px;
	overflow : hidden;
	text-overflow: ellipsis;
}

.featured-track img {
	float : left;
	margin: 0 5px 0 0;
	height: 100px;
}

.share-on-twitter, .share-on-facebook {
	float : right;
	display: block:
	height : 16px;
	width : 16px;
	text-indent: -9999px;
}

.share-on-twitter {
	background : url("/images/twitter.png") repeat-x scroll left top transparent;
}

.share-on-facebook {
	background : url("/images/fb.png") repeat-x scroll left top transparent;
}

#donate-button {
	margin: 0 0 0 5px;
	padding: 10px 15px;
	text-align : center;
	display:block;
	background: #ff4700;
	background: -webkit-gradient(linear, left top, left 25, from(#ff9800), color-stop(4%, #ff9800), to(#ff4700));
	background: -moz-linear-gradient(top, #ff9800, #ff9800 1px, #ff4700 25px);
	color: #000;
	font-weight: bold;

	-moz-border-radius: 14px 2px 14px 2px;
	-webkit-border-top-right-radius: 2px;
	-webkit-border-top-left-radius: 14px;
	-webkit-border-bottom-right-radius: 14px;
	-webkit-border-bottom-left-radius: 2px;


	cursor: pointer;
}

#donate-button:hover {
	color: #fff;
	background: #333333;
    background: -moz-linear-gradient(top, #333333, #333333 1px, #222222 25px);
	background: -webkit-gradient(linear, left top, left 25, from(#333333), color-stop(4%, #333333), to(#222222));

}