/*
This is the CSS file for intomusic.igorklajo.de
Created:	June 10, 2006
Updated:	June 4, 2007
Author:		Igor Klajo
Website:	intomusic v3
URL:		http://intomusic.igorklajo.de
e-mail:		info@igorklajo.de
copyright:	Igor Klajo, www.igorklajo.de, igorklajo.de
	This CSS (Cascading Style Sheet) file is copyrighted to me
	Igor Klajo). You are allowed to learn and improve your 
	knowledge from this file, but you are not allowed to use 
	it for your or someone elses purpose of any kind. You are 
	not allowed to show this CSS file or any part of it on any
	kind of media. You're not allowed to make profit (distribute 
	or sell) out of this file nor are you allowed to claim it
	as yours.
*/
html { font-size: 62.5%; }

body { margin: 0; padding: 0; text-align: center; background: url("site_back.gif"); color: #535353; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size: 1.2em; }

/* BORDER EFFECT START */
#shadowBorder {	overflow: hidden; width: 100%;}
html>body #shadowBorder { width: 100%; }
/**/
#shadowBorder div#wraptop {	background: url("site_padding_top.gif") no-repeat 50%; padding-left: 1px; overflow: hidden; width: 100%; }
html>body #shadowBorder div#wraptop { background: url("site_padding_top.png") no-repeat 50%; padding-left: 0; }
/**/
#shadowBorder div#wrapbottom { background: url("site_padding_bottom.gif") no-repeat 50%; padding-left: 1px; overflow: hidden; width: 100%; }
html>body #shadowBorder div#wrapbottom { background: url("site_padding_bottom.png") no-repeat 50%; padding-left: 0; height: 16px; }
/**/
#shadowBorder div#shadowSides {	background: url("side_padding_lr.gif") repeat-y 50%; }
html>body #shadowBorder div#shadowSides { background: url("side_padding_lr.png") repeat-y 50%; }
/**/
#shadowBorder div#shadowTopborder { width: 760px; height: 15px; margin: 0 auto; background: url("site_top.gif") no-repeat bottom; }
html>body #shadowBorder div#shadowTopborder { background: url("site_top.png") no-repeat bottom; }
/**/
#shadowBorder div#shadowBottomborder { width: 760px; height: 15px; margin: 0 auto; background: url("site_bottom.gif") no-repeat; }
html>body #shadowBorder div#shadowBottomborder { background: url("site_bottom.png") no-repeat; }
/* BORDER EFFECT END */


#mainBody { background: #F6F6F6; text-align: left; margin: 0 auto; padding: 0; width: 760px; }

#header { width: 760px; height: 200px; overflow: hidden; background: url("site_header_text.jpg") no-repeat 0px 0px; }


/* MAIN NAVIGATION */
#header ul { background: url("navi_3_shadow.jpg") no-repeat right bottom; font-size: 1em; clear: both; text-align: center; margin: 0 0 0 270px; padding: 0; height: 200px; width: 760px; voice-family: "\"}\""; voice-family: inherit; width: 490px; }
html>#header ul {width: 490px;}
#header li { background: none; margin: 0; padding: 0; height: 200px; width: 70px; float: left; }
#header li a { height: 200px; width: 70px; display: block; background: transparent; border: none; text-indent: -9999px; overflow: hidden; }
/**/
#header li.home a:hover, body#home li.home a{background: url("navi_3_shadow.jpg") no-repeat 0px 0px; }
#header li.news a:hover, body#news li.news a{background: url("navi_3_shadow.jpg") no-repeat -70px 0px; }
#header li.playlist a:hover, body#playlist li.playlist a{background: url("navi_3_shadow.jpg") no-repeat -140px 0px; }
#header li.linkage a:hover, body#linkage li.linkage a{background: url("navi_3_shadow.jpg") no-repeat -210px 0px; }
#header li.contact a:hover, body#contact li.contact a{background: url("navi_3_shadow.jpg") no-repeat -280px 0px; }
#header li.portfolio a:hover {background: url("navi_3_shadow.jpg") no-repeat -350px 0px; }
#header li.tutorials a:hover {background: url("navi_3_shadow.jpg") no-repeat -420px 0px; }


#mainContent { width: 760px; background: #F6F6F6 url("back_main_top3.gif") no-repeat 0px 0px; }
#text { margin: 0; background: transparent; float: left; width: 550px; overflow: hidden; padding: 0 15px 15px 15px; voice-family: "\"}\""; voice-family: inherit; width: 520px; }
html>body #text {width: 520px;}


/* SUBnavi container */
#navi { background: transparent; border-right: 0px solid #EDEEF4; float: right; text-align: justify; width: 210px; margin: 20px 0 0 0; padding: 0; }
#navi .navitext { width: 210px; padding: 0 15px; voice-family: "\"}\""; voice-family: inherit; width: 180px; }	
html>body #navi .navitext {	width: 180px;}


#footer { height: 50px; text-align: left; background: url("footer2.gif") no-repeat 0% 0%; color: #888; font-size: 0.8em; width: 760px; padding: 0 15px; voice-family: "\"}\""; voice-family: inherit; width: 730px; }
html>body #footer {	width: 730px;}

.fleft { float: left;}
.fright { float: right;}

/* is needed to fill out the subnav with the background */
.clearing:after { height: 0; background: transparent;content: "."; display: block; clear: both; visibility: hidden;}	
* html .clearing /*IE-Mac */{height: 1%;}

/*________________________________*/



/* LINK STYLE */
a:link {color: #0082C5; text-decoration: none;}
a:visited { color: #a4a4a4; text-decoration: none; border-bottom: 1px dotted #a4a4a4;}
a:hover { color: #00619f; font-style: normal; border-bottom: 1px dotted #00619f;}
a:focus, a:active {background: #0082C5; color: #F6F6F6;}
/* SUBnavi link 
#navi li a { color: #0082C5; padding: 0 0 0 15px; width: 165px; background: url("li_anim3.gif") no-repeat 0px 0px; border: none; }
#navi li a:hover { background: url("li_anim3.gif") no-repeat -165px 0px; }
#navi li a:focus, #navi li a:active { background: #0082C5 url("li_anim3.gif") no-repeat -165px 0px; color: #F6F6F6;}
#navi p.cnt a:hover { border-bottom: none; } /* removes border from banners */
*/

/* HEADING STYLE */
h1, h2, h3, h4, h5 {margin: 0; padding: 0; color: #4D4D4D; font-weight: normal; }
h1 { font-size: 1.5em; }
h2 { font-size: 1.1em; }
h3 { font-size: 1em; }
h4 { font-size: 0.8em; }
h5 { font-size: 0.7em; }

/**/
h3 { height: 18px; margin: 25px 0 0px 10px; padding: 3px 0 0 0px;text-indent: 7px; background: url("tit_head_back8.gif") no-repeat 0% 0%; width: 520px; voice-family: "\"}\""; voice-family:inherit; width: 510px; }
html>body h3 { width: 510px; }

#playlist h1 a, #playlist h3 a { border: none; background: url("site_link_follow.png") no-repeat 100% 50%; padding-right: 20px;}
#playlist h1 a:hover, #playlist h3 a:hover { background: url("site_link_follow2.png") no-repeat 100% 50%; }
#playlist h4 { font-size: 0.8em; margin: 5px 0 0 0; text-align: right; }


/* LIST STYLE */
ul, li { list-style-type: none; padding: 0; margin: 0; }
ul { margin: 11px 0 0 15px; }
ul li { padding: 0 0 0 15px; background: url("li_pt.gif") no-repeat 0px 0px; }
ul li:hover { background: url("li_anim3.gif") no-repeat -165px 1px; }

/* --- */
em { font-style: italic; }
em.normal { font-style: italic; }	
/* --- */
acronym, abbr { border-bottom: 1px dotted #535353; cursor:help; }
/* --- */
code { font-size: 1.2em;}
/*__________________________________*/



/* ------ SUBNAVI ------ */
#navi dl, #navi dt, #navi dd { margin: 0px; padding: 0px;}

#navi dl { background: url("box195_bottom.gif") no-repeat 0% 100%; color: #4D4D4D; width:210px; margin: 15px 0px 20px 0; padding: 0 0px 15px 0px; text-align: justify; voice-family: "\"}\""; voice-family: inherit; width: 210px; }
html>body #navi dl { width: 210px; }
/*---*/
body#playlist #navi dt { margin-left: 15px; background: url("li_pt.gif") no-repeat 0% 0%; font-size: 1em; padding-top: 0; height: 100%; width: 195px; voice-family: "\"}\""; voice-family: inherit; width: 180px; }
html>body#playlist #navi dt { width: 180px; }
body#playlist #navi dt:hover {background: url("li_anim3.gif") no-repeat -165px 1px; }
/**/
#navi dt, body#playlist #navi dt.first { font-size: 1.2em; font-weight: bold; background: url("box195_top.gif") no-repeat 0% 0%; margin: 0; padding: 15px 0px 0 15px; width: 210px; height: 26px; voice-family: "\"}\""; voice-family: inherit; width: 195px; }
html>#navi dt, html>body#playlist #navi dt.first { width: 195px; }
/*---*/
body#playlist #navi dd { margin-left: 10px; width: 180px; voice-family: "\"}\""; voice-family: inherit; width: 170px;}
html>body#playlist #navi dd {width: 170px;}
/**/
#navi dd { color: #535353; padding: 0 0 0 30px; margin: 0 0 0 0px; background: url("li_pt.gif") no-repeat 15px 0px; width: 210px; voice-family: "\"}\""; voice-family: inherit; width: 180px; }
html>#navi dd { width: 180px; }
#navi dd:hover {background: url("li_anim3.gif") no-repeat -150px 1px; }

/*#navi dd a { padding: 0 0 0 15px; margin: 0 0 0 -14px; text-indent: 0; background: url("li_anim3.gif") no-repeat -1px 1px; width: 180px; voice-family: "\"}\""; voice-family: inherit; width: 164px; }
html>#navi dd a { width: 164px; }
#navi dd a:visited { background: url("li_pt.gif") no-repeat -166px 1px; }
#navi dd a:hover { background: url("li_anim3.gif") no-repeat -166px 1px; }
#navi dd a:focus, #navi dd a:active { background: #0082C5 url("li_anim3.gif") no-repeat -166px 1px; }*/

#navi dl.button dd { background: none; padding: 0 0 5px 8px; margin: 0; text-align: center;}
#navi dl.button dd a { background: none; border: none;}
#navi dl.button dd img { border: none; }
/* ------ SUBNAVI ------ */


/* ------  ------ */
#text dl { margin-left: 15px;}
#text dt { margin-top: 5px; }
#text dd { margin-left: 20px;}

h1 { background:url("box520_top.gif") no-repeat 0% 0%; margin: 35px 0 0 0; padding: 10px 10px 0px 10px; height: 41px; width:520px; voice-family: "\"}\""; voice-family:inherit; width:500px;}
html>body h1 { width: 500px; }

h2 { font-size: 0.8em; margin: -20px 0 0 0; padding: 0px 0 0 15px; background: url("box520_bottom.gif") no-repeat 0% 100%; height: 20px; width:520px; text-align: justify; voice-family: "\"}\""; voice-family:inherit; width:505px; }
h2 { width: 505px; }

p { margin: 11px 0 0 15px; width:520px; voice-family: "\"}\""; voice-family:inherit; width:505px; }
html>body p { width: 505px; }

p.h1 { text-align: justify; background: url("box520_bottom.gif") no-repeat 0% 100%; margin: -10px 0px 0 0px; padding: 0 15px 10px 15px; width: 520px; voice-family: "\"}\""; voice-family:inherit; width: 490px; }
html>body p.h1 { width: 490px; }
/* ------  ------ */


/* SITEMAP */
ul.sitemap{ font-size: 1.2em;}
ul.sitemap ul{ font-size: 0.8em; margin: 0;}


/* LINGAGE */
#linkage #text ul { clear: both; padding-left: 15px; width: 490px; voice-family: "\"}\""; voice-family:inherit; width: 475px;}
html>body#linkage #text ul.links { width: 475px; }
#linkage #text ul li { float: left; width: 220px; }

/* CONTACT FORM */
fieldset { width: 520px; background: url("box520_bottom.gif") no-repeat 0% 100%; border: none; margin: 0; padding:0; color: #ABABAB;}
.form { width: 520px; margin: 0 0 10px 0; padding: 0; border: none; display: block;  }
.forms { padding: 0 0 10px 145px; font-style: italic; text-align: left; border: none; display: block; width: 520px; voice-family: "\"}\""; voice-family:inherit; width: 375px; }
html>body.forms { width: 375px; }	
.form label { float: left; padding: 0 0 0 20px; margin: 0; text-align: left; color: #ABABAB; background: url("date.gif") no-repeat 8px 50%; width: 145px; voice-family: "\"}\""; voice-family:inherit; width: 125px; }
html>body.form label { width: 12px; } 
.form input, .form textarea, .form select { font: normal 110% "Trebuchet MS", Verdana, Arial, sans-serif; width: 270px; background: #f6f6f6 url("site_back.gif"); border: 1px solid #ABABAB; padding: 1px; color: #7F7F7F; }
.form textarea { width: 340px; height: 150px; overflow: auto; }
.form input:focus, .form textarea:focus, .form select:focus { background: #f6f6f6; padding: 1px; color: #5c5c5c; }
label#fmmessage { margin: 30px 0 0 0; padding: 10px 0; color: #5C5C5C; font-style: italic; font-weight: bold; text-align: center; width: 520px; display: block; background: url("box520_top.gif") no-repeat 0% 0%; }
* html label#fmmessage { margin-bottom: -30px;} /* IE fix */
/* CONTACT FORM BUTTONS */
.forms #submit { height: 25px; width: 92px; font-size: 110%; color: #7F7F7F; padding: 0 0 3px 0; margin: 0; border: 0px solid #BCCBD5; background: url("button.gif") no-repeat 0% 0%; font-style: normal; }
.forms #refresh { height: 25px; width: 92px; font-size: 110%; color: #7F7F7F; padding: 0 0 3px 0; margin: 0; border: 0px solid #BCCBD5; background: url("button.gif") no-repeat 100% 0%; font-style: normal; }
.forms #submit:hover { color: #5c5c5c; padding: 0 0 3px 0; border: 0px solid #ABABAB; background: url("button.gif") no-repeat 0% 100%; }
.forms #refresh:hover { color: #5c5c5c; padding: 0 0 3px 0;border: 0px solid #edf6fc; background: url("button.gif") no-repeat 100% 100%; }