/*************
* Global
*************/
body {background: #FAFAFA ; text-align: center; margin: 0;}
img {border: 0;}
form {margin: 0;}

h1 {font-size: 22px;color: #48AE00;font-weight: normal; margin: 14px 0 10px 0;}
h2 {font-size: 22px;color: #F60;font-weight: normal; margin: 14px 0 10px 0;}
h3 {font-size: 13px; color: #999; margin: 0;}
h4 {font-size: 22px;color: #48AE00;font-weight: normal; margin: 14px 0 10px 0; border-bottom: 1px dotted #999;}

hr {border: 0;border-top: 1px dotted #999;margin: 30px 0;}
hr.small {margin:0 !important;}
hr.smalltop {margin:0 0 10px 0 !important;}

:link {color: #0A0;}
:visited {color:#090;}
br.clear {clear:both; height: 1px; margin: 0;}
th {white-space: nowrap; text-align: right; padding-right: 20px; color: #aaa;}

#main {background: #FFF; padding-bottom: 50px; }

/*************
* Logo
*************/
#logo {background: url(hicliplogo.png) 0 18px no-repeat; height:75px; width: 900px; margin: 0 auto;}

.search {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
}
.search li {
	padding: 30px 10px 0 3px;
	float: right;
}

/*************
* Navigation Oben
*************/
#navi {background: url(menubackground.png) repeat-x; height: 32px; text-align: center; padding: 4px;}
#navi div {margin: 0 auto; width: 900px;}

#navi .upload,
#navi .start,
#navi .cam,
#navi .local,
#navi .clips,
#navi .account,
#navi .apiaccount,
#navi .login {display: block; text-indent: -5000px;font-size: 0;float: left;margin-right: 20px;}

#navi .upload {background: url(menu_cliphochladen.png) no-repeat;	width: 154px;height: 30px; float: right !important; margin-right: 10px !important;}
#navi .start {background: url(menu_startseite.png) no-repeat;	width: 66px;height: 30px;}
#navi .cam {background: url(menu_videonachricht.png) no-repeat;	width: 107px;height: 30px;}
#navi .local {background: url(menu_lokalevideos.png) no-repeat;	width: 93px;height: 30px;}
#navi .clips {background: url(menu_clips.png) no-repeat; width: 33px;height: 30px;}
#navi .login {background: url(menu_login.png) no-repeat; width: 34px;height: 30px; float: right !important; margin-right: 10px !important;}
#navi .account {background: url(menu_meinaccount.png) no-repeat; width: 92px;height: 30px; float: right !important; margin-right: 10px !important;}
#navi .apiaccount {background: url(menu_apiaccount.png) no-repeat; width: 82px;height: 30px; float: right !important; margin-right: 10px !important;}

/*************
* Navigation Links
*************/
ul.nav {margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 26px; border-bottom: 1px dotted #ccc; margin-top: -5px;}
ul.nav :link, ul.nav :visited {text-decoration: none; color: #999; display: block; padding-left: 10px;}
* html ul.nav :link, * html ul.nav :visited { height: 22px;}
ul.nav :link:hover, ul.nav :visited:hover {background: #FAFAFA;}
ul.nav li {border-top: 1px dotted #ccc;}
ul.nav ul {margin: 0; padding: 0; list-style: none;}
ul.nav ul li :link, ul.nav ul li :visited {padding-left: 30px;}

/*************
* Inhalt
*************/
#featurehead {
	background: url(head_back.jpg);
	width: 896px;
	height: 280px;
	margin-top: 20px;
}
#featurehead #leftpad {
	background: #fff;
	position: relative;
	width: 273px;
	top: 23px;
	left: 36px;
	float: left;
}
#featurehead #rightpad {
	position: relative;
	width: 305px;
	top: 0;
	left: 288px;
	float: left;
	text-align: center;
}
#featurehead ol { 
	text-align: left;
	color: #F60;
	margin-left: 25px;
}
#featurehead li { 
	margin-bottom: 20px;
}	
#featurehead li span { 
	color: #000;
	font-size: 14px;
}
#featurehead li p { 
	color: #888;
	font-size: 12px;
	margin: 0;
	line-height: 20px;
}
#featurehead .startbutton {
	position: relative;
	float: left;
	top: 255px;
	margin-left: 15px;
}

#featurecontent {
	margin-top: 20px;
}


#featurecontent h1 {
	font-family: "Helvetica Neue Light", Helvetica, Arial, sans-serif;
	font-weight: normal;
}
#featurecontent h2 {
	font-family: "Helvetica Neue Light", Helvetica, Arial, sans-serif;
	color: #666;
	font-size: 16px;
	margin: 0;
}

#featurecontent #featureleft {
	margin-left: 40px;
	width: 50%;
}
#featurecontent #featureleft p {
	font-size: 12px;
	line-height: 20px;
}
#error {
	margin: 10px auto;
	border: 10px solid #F93;
	width: 860px;
	padding: 10px;
	font: 18px/30px 'Lucida Grande', Geneva,  Arial, Helvetica, sans-serif; 
	color: #999;
	text-align: left;
}

#content {overflow: hidden; font: 18px/30px 'Lucida Grande', Geneva,  Arial, Helvetica, sans-serif; color: #999; width: 900px; margin: 0 auto; text-align: left; padding-bottom: 50px;}

#content #left {float: left;width: 440px;margin-right: 10px;}
#content #right {float: left;width: 440px;margin-left: 10px;}

#content #leftsmall {float: left;width: 180px;margin-right: 10px;}
#content #rightbig {float: left;width: 690px;margin-left: 10px;}

#content #viewleft {float: left;width: 500px;margin-right: 10px;}
#content #viewright {float: left;width: 380px;margin-left: 10px;}

#content #welcomeleft {float: left;width: 400px;margin-right: 10px;}
#content #welcomeright {float: left;width: 480px;margin-left: 10px;}

#content #rightbig .halfrl {
	float: left;
	width: 320px;
	margin-right: 10px;
}

#content #rightbig .halfrr {
	float: left;
	width: 350px;
}

.background {background: #EEE; padding: 10px;}

#headline {color: #333;}

.cloud_size01 {font-size: 11px; color: #999; line-height: 20px;}
.cloud_size02 {font-size: 12px; color: #888; line-height: 20px;}
.cloud_size03 {font-size: 13px; color: #777; line-height: 20px;}
.cloud_size04 {font-size: 15px; color: #555; line-height: 20px;}
.cloud_size05 {font-size: 17px; color: #333; line-height: 20px;}

.buttonbanner {width: 100%;float: left;}
.buttonbanner .left {float: left;margin-top: 10px;}
.buttonbanner .right {float: right;}

.flexpreview {float: left; margin-right: 10px; margin-bottom: 10px; font-size: 12px; text-align: center;}
.flexpreview :link, .flexpreview :visited {background: #CCC; padding: 10px; display: block; text-decoration: none; font-size: 12px;}
.flexpreview :link:hover, .flexpreview :visited:hover {background: #3A3;}

.preview {float: left;margin-right: 10px;margin-bottom: 10px;text-align: center;font-size: 12px;line-height: 18px;}
.preview a {background: #ccc; padding: 10px; display: block; width: 90px;color: #666;}
.preview a:hover {background: #3A3; padding: 10px; display: block; width: 90px;color: #fff;}
.preview img { border: 1px solid #fff; }

.previewHiclip {float: left;margin-right: 10px;margin-bottom: 10px;text-align: center;font-size: 12px;line-height: 18px;}
.previewHiclip a {background: #FF6600; padding: 10px; display: block; width: 90px;color: #666;}
.previewHiclip a:hover {background: #3A3; padding: 10px; display: block; width: 90px;color: #fff;}
.previewHiclip img { border: 1px solid #fff; }


table {width: 100%; font-size: 18px;}
.inp {width: 100%; font-size: 18px; background: #FAFAFA; border: 1px solid #999; margin-bottom: 5px;}

.green {color: #0A0;}


/* Thumbnails in Listenansicht */
.thumb140 {float: left; margin: 0 10px 10px 0;text-align: center;font-size: 12px;width: 160px;line-height: 16px;border: 1px solid #fff;	overflow: hidden;white-space: nowrap;}
.thumb140 :link.border, .thumb140 :visited.border {background: #EEE; display: block; width: 140px; height: 100px; padding: 10px;	text-decoration: none;}
.thumb140 :link.border:hover, .thumb140 :visited.border:hover {	background: #3A3;color: #fff;}
.thumb140 img {border: 1px solid #fff; width:138px; height: 98px;}
.thumb140 p {margin: 10px 0; clear: both;}
div.border {border: 1px solid #ccc;}

/* Listendarstellung, Spielzeit, Views, Rating */
div.info {float: left; margin-top: 1px;text-align: left; width: 160px;background: #eee;}
div.info div {float: left;  padding: 3px 10px;}

.views {padding-left: 25px !important; border-left: 1px solid #fff; border-right: 1px solid #fff; background: url(/images/views.png) 3px 5px no-repeat;}

.rated {width: 5px;height: 12px; background: url(rating.png) no-repeat; float: right !important; margin-top: 2px;}
.rates {width: 5px;height: 16px; background: url(rating_green.png) no-repeat; float: right !important; margin-top: 2px;}

.dorate {list-style: none; margin: 5px 0 0 0; padding: 0; line-height: 16px; width: 100%;}
.dorate li {margin-right: 4px; padding: 0;}
.dorate .rate { background: url(rating_green.png) no-repeat; display: block; width: 16px; height: 16px;}

.score {background-position: 0 -85px !important;}
.score5 {background-position: 0 0 !important;}
.score4 {background-position: 0 -17px !important;}
.score3 {background-position: 0 -34px !important;}
.score2 {background-position: 0 -51px !important;}
.score1 {background-position: 0 -68px !important;}


/* View Video, Tabelle Rechts */
table.clipinfo th {vertical-align: top;	text-align: left;font-size: 13px;width: 100px;}
table.clipinfo td {vertical-align: top;	font-size: 13px;}

#hiddenform {display: none;}

#hiddenform table {width: 600px;}

.loginform th {
	white-space: nowrap;
	width: 200px;
}
.loginform .inp {
	width: 400px;
}

.loginform .small {
	font-size: 14px;
}

textarea.single {font-size: 14px;width: 380px;height: 85px;	border: 1px solid #999;	margin-right: 10px;}
textarea.singlesmall {font-size: 14px;width: 260px;	height: 85px;border: 1px solid #999;margin-right: 10px;}
textarea.maxi {width: 350px;	height: 40px;border: 1px solid #999;color: #999;}

* html textarea.maxi {margin-left: -10px !important;}

.overflow {overflow: auto;height: 140px;}

.greenform {background: #DBEFCD;padding: 10px;border-top: 1px dotted #999;border-bottom: 1px dotted #999;font-size: 12px;}
.smallgreenform {background: #DBEFCD;padding: 0 10px;border-top: 1px dotted #999;border-bottom: 1px dotted #999;font-size: 12px; margin-bottom: 5px;}
.videocomment {font-size: 12px;	line-height: 20px; margin-bottom: 20px;}
.videocomment .content { margin-left: 80px;}

.avatar {border: 10px solid #EEE;float: left;margin-right: 10px;}
.profilimg {height: 100px;}

/* Kategorien Pager */
ul.pager {margin: 10px 0 0 0;padding: 0;list-style: none;}
ul.pager li {float: left;border: 1px solid #EEE; margin-right: 5px;}
ul.pager li.current {background: #CCC;}
ul.pager li :link, ul.pager li :visited {display: block;padding: 0 10px;border: 10px solid #EEE;text-decoration: none;}
ul.pager li :link:hover, ul.pager li :visited:hover {border: 10px solid #3A3;}

/* Profilseite */
.profile {}
.profile th {text-align: right; width: 200px;}
.profile td {padding-right: 5px;}
.profile .rahmen {background: #eee; padding: 10px; float: left;}
.profile select {font-size: 18px;}

/* My Clips */
.myclipsinfo { margin-left: 10px;}
.myclipsinfo :link, .myclipsinfo :visited {font-size: 14px;}
.myclipsinfo p {margin: 0;}
.myclipsinfo table {margin: 10px 0; padding: 0; border-collapse: collapse; font-size: 14px; line-height: 22px; width: 400px;}
.myclipsinfo th {text-align: left; width: 1%;}

.inpsmall { width: 380px;}

/* My Friends */
.buddy {float: left; margin: 0 10px 10px 0;}
.buddy :link, .buddy :visited {display: block;border: 10px solid #eee;}
.buddy :link:hover, .buddy :visited:hover {border: 10px solid #0A0;}
.buddy img {border: 1px solid #fff;}

.buddyinfo {font-size:14px; padding: 0 10px; float: left;}

/* Profile -> Friends of User */
div.friendof { float: left; margin-bottom: 10px !important; width: 310px; font-size: 12px; line-height: 22px;}
.scroller {overflow: auto; height: 180px; padding-top: 5px;width: 330px;}

dl.profilinfo {line-height: 18px;}
dl.profilinfo dt {color: #aaa;font-size: 14px;}
dl.profilinfo dd {color: #666; margin-left: 15px; margin-bottom: 10px;}

.memberofgroup {font-size: 14px;line-height: 22px; clear: both; margin-bottom: 10px;}


table.threads {border-collapse: collapse; border-top: 1px dotted #ccc; border-bottom: 1px solid #ccc;}
table.threads th {text-align: left;	font-size: 14px; padding: 0 0 0 10px;}
table.threads td {font-size: 14px; padding: 0 0 0 10px;}
table.threads .even {background: #DED;}
table.threads .odd {}

.helpsmall {font-size: 12px; line-height: 20px;}

.createform {
	font-size: 14px;
}
.createform h2 {
	font-size: 18px;
	margin-bottom: 0;
}


/*************
* Footer
*************/
#footer {font: 11px/18px 'Lucida Grande', Geneva,  Arial, Helvetica, sans-serif; padding-top: 5px; color: #aaa; background: url(footer_background.png) top left repeat-x;}



/*************
* Test
*************/


#interContainer{
position: absolute;
left: 0;
top: 0;
padding: 0;
padding-top: 0;
visibility: hidden;
}


#interVeil{ /*CSS for background veil that covers entire page while interstitial box is visible*/
position: absolute;
background: black;
right: 0;
width: 10px;
top: 0;
visibility: hidden;
/*
filter:progid:DXImageTransform.Microsoft.alpha(opacity=80);
opacity: 0.8;
*/
}