/*#################################################################
maqamlessons.com Analysis Stylesheet 
Copyright (c) 2010, 2013 Sami Abu Shumays. All rights reserved. 
##################################################################*/

body {
	font-family: Calibri, Optima, Tahoma, Verdana, Sans-Serif;
	font-size: 1.1em;
	font-weight: 100;
	background-color: #FDF6D5; 
	}

#wrapper {
	position: relative;
	width: 900px;
    margin-left: auto;
    margin-right: auto;
    background-color: #F3EED8;
    background-image: url('media/Fettered_Demons_33BG.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    border: 2px solid #5D311E; 
    padding: 15px;
    top: 40px;
    margin-bottom: 90px;
    }

#tourwrapper {
	position: relative;
	width: 420px;
    margin-left: 0;
    background-color: #F3EED8;
    border: 2px solid #5D311E; 
    padding: 15px;
    font-size: 0.9em;
    }

h1 {font-size:2.7em; text-align: center; margin: 20px; margin-top:30px;}
h1.supertitle {font-size: 4.3em; margin-top:10px; font-variant: small-caps;letter-spacing: 0.25em;}
h2 {font-size:2.1em; text-align: center; margin: 15px;}
h4 {font-size:1.4em; text-align: right; margin: 3px;}
h4.pagenumbers {font-size: 1.0em; margin-top:6px;}


/*########################################
maqam/jins color coding across whole site 
#########################################*/

.rst {background-color: #611E20; border: 2px solid #000000; color: #F3EED8;}
.jhk {background-color: #93204C; border: 2px solid #000000; color: #F3EED8;}
.nkr {background-color: #631C50; border: 2px solid #000000; color: #F3EED8;}
.mur {background-color: #37104B; border: 2px solid #000000; color: #F3EED8;}
.nah {background-color: #150D48; border: 2px solid #000000; color: #F3EED8;}
.akd {background-color: #191E3E; border: 2px solid #000000; color: #F3EED8;}
.krd {background-color: #063157; border: 2px solid #000000; color: #F3EED8;}
.zam {background-color: #0F474B; border: 2px solid #000000; color: #F3EED8;}
.sba {background-color: #066E4B; border: 2px solid #000000; color: #F3EED8;}
.byt {background-color: #0B6723; border: 2px solid #000000; color: #F3EED8;}
.hjz {background-color: #6DA712; border: 2px solid #000000; color: #F3EED8;}
.skb {background-color: #DFF80F; border: 2px solid #000000; color: #000000;}
.sik {background-color: #FFE92D; border: 2px solid #000000; color: #000000;}
.mkh {background-color: #F9C815; border: 2px solid #000000; color: #000000;}
.ajm {background-color: #D85914; border: 2px solid #000000; color: #F3EED8;}

.maq {background-color: #EDE6C5; border: 2px solid #5D311E; color: #5D311E;}

p {text-indent: 40px;}
p.attention {display: block; clear: both; color: #BF4D47;}
span.attention {color: #BF4D47;}
span.wordsizeemphasis {color: #440805; font-size: 125%; /*background-color: #F7F1D0;*/}

#EgyptRast img, #EgyptRast audio {
	display: block;
	clear: both;
	float: left;
	}

hr {color: #5D311E;
	background-color: #5D311E;
	height: 3px;
	border: none;
	}

.spacer {width: 100%; display: block; clear: both; height: 13px;}
#indexfooter {height: 1px;}

/*###########################
Top Tabbed navigation (#demonav)
############################*/

#demonav {position: absolute;
	top: -45px;
	left: -41px;
	}
#tourwrapper #demonav {top: -12px;}

#demonav ul {list-style-type: none; }
#demonav li {float: left; display: block;}
#demonav ul li a {
	text-decoration: none;
    background:#EDE6C5; 
    color:#5D311E;
    height: 25px;
    padding: 5px 10px 5px 10px;
    border: 1px solid #5D311E;  
    border-left: 0px;
    font-size: 0.9em;
    }

#demonav ul li a#first {border-left: 1px solid #5D311E; font-weight: bold;}

#demonav ul li a.rst {background-color: #611E20; border: 1px solid #000000; color: #F3EED8;}
#demonav ul li a.jhk {background-color: #93204C; border: 1px solid #000000; color: #F3EED8;}
#demonav ul li a.nkr {background-color: #631C50; border: 1px solid #000000; color: #F3EED8;}
#demonav ul li a.mur {background-color: #37104B; border: 1px solid #000000; color: #F3EED8;}
#demonav ul li a.nah {background-color: #150D48; border: 1px solid #000000; color: #F3EED8;}
#demonav ul li a.akd {background-color: #191E3E; border: 1px solid #000000; color: #F3EED8;}
#demonav ul li a.krd {background-color: #063157; border: 1px solid #000000; color: #F3EED8;}
#demonav ul li a.zam {background-color: #0F474B; border: 1px solid #000000; color: #F3EED8;}
#demonav ul li a.sba {background-color: #066E4B; border: 1px solid #000000; color: #F3EED8;}
#demonav ul li a.byt {background-color: #0B6723; border: 1px solid #000000; color: #F3EED8;}
#demonav ul li a.hjz {background-color: #6DA712; border: 1px solid #000000; color: #F3EED8;}
#demonav ul li a.skb {background-color: #DFF80F; border: 1px solid #000000; color: #000000;}
#demonav ul li a.sik {background-color: #FFE92D; border: 1px solid #000000; color: #000000;}
#demonav ul li a.mkh {background-color: #F9C815; border: 1px solid #000000; color: #000000;}
#demonav ul li a.ajm {background-color: #D85914; border: 1px solid #000000; color: #F3EED8;}

#demonav ul li a:hover {
	background:#F3EED8; 
    color:#BF4D47;
	}


/*###########################
Internal navigation (#demonav)
############################*/

.analysisnav {
	position: relative;
	width: 890px;
    background-color: #FFFAEE;
    border: 3px solid #5D311E; 
    margin: 2px;
    padding: 2px;
    font-size: 0.9em;
    }

.analysisnav a {width: 278px; border: 1px solid #5D311E; padding: 5px; margin: 3px; text-decoration: none;}
  
a#upprev {display: inline; float: left;}
a#pageup {display: inline; float: left; text-align: center;}
a#upnext {display: inline; float: left; text-align: right;}
a#previous {display: inline; clear: both; float: left;}
a#next {display: inline; float: right; text-align: right; margin-right: 5px;}

a#nextfirst {display: inline; clear: both; float: right; text-align: right; margin-right: 5px;}

a#upnext.sections {display: inline; float: right; text-align: right; margin-right: 5px;}

a#pageup.sections {display: inline; float: right; text-align: center; margin-right: 5px;}

a#pageup.sectionshidden {display: inline; float: right; text-align: center; margin-right: 5px; border: none;}

.analysisnav  a:hover {background-color: #F1ECD6; color:#BF4D47;}

.analysisnav .spacer {width: 100%; display: block; clear: both; height: 2px;}



.textborder {border: 1px solid #5D311E; padding: 10px; margin-top: -10px;}

.floatleft {
	float: left;
	margin-right: 40px;
	margin-top: 10px;
	}

.trackbox {clear:left;  float: left; width: 210px; margin: 5px;   padding: 10px; background-color: #F0EBD5; }

.trackbox h3 {text-align: right; margin: 0; padding:0; font-style: italic; font-variant: small-caps;}
.trackbox ul {padding-left: 15px; margin: 5px;}

#beginner {border: 5px double #0B6723}
#theory {border: 5px double #150D48; }
#musician {border: 5px double #611E20; }
#expert {border: 5px double #FFE92D;}

#sitemaplist h2 {font-size:1.9em;}

.rightbox {float: right; 
	border: none;
	width: 280px; 
	margin: 10px; 
	padding: 10px; 
	margin-top: 0; 
	padding-top: 0; 
	margin-bottom: 0; 
	padding-bottom: 0;}

.leftbox {float: right; 
	border: none; 
	width: 280px; 
	margin: 10px; 
	padding: 10px; 
	margin-top: 0; 
	padding-top: 0; 
	margin-bottom: 0; 
	padding-bottom: 0;}

.rightbox1 {float: right; 
	border: none; 
	width: 400px; 
	margin: 10px; 
	padding: 10px; 
	margin-top: 0; 
	padding-top: 0; 
	margin-bottom: 0; 
	padding-bottom: 0;}

.leftbox1 {float: left; 
	border: none; 
	width: 400px; 
	margin: 10px; 
	padding: 10px; 
	margin-top: 0; 
	padding-top: 0; 
	margin-bottom: 0; 
	padding-bottom: 0;}
	
.rightbox2 {float: right; 
	border: none;
	width: 420px; 
	margin: 10px; 
	padding: 5px; 
	margin-top: 0; 
	padding-top: 0; 
	margin-bottom: 0; 
	padding-bottom: 0;}

.leftbox2 {float: left; 
	border: none;
	width: 400px; 
	margin-left: 10px; 
	padding: 5px; 
	padding-left: 25px; 
	margin-top: 0; 
	padding-top: 0; 
	margin-bottom: 0; 
	padding-bottom: 0;}
	

.rightbox2 ul, .rightbox2 ul li, .rightbox2 ul li a, .leftbox2 ul, .leftbox2 ul li, .leftbox2 ul li a {
	width: 400px;
	}

#indextext {position: relative; 
	clear: right; 
	float: right; 
	width: 600px; 
	margin: 10px; 
	padding: 5px; 
	top: -45px; 
	margin-bottom: -40px;}

a:link, a:visited {color:#5D311E;}
a:hover {color:#BF4D47;}

.textboxleft {
	width: 325px; 
	float: left; 
	border: 2px solid #5D311E; 
	padding: 20px; 
	margin: 15px; 
	font-size: 0.9em
	}

.textboxright {
	width: 325px; 
	float: right; 
	border: 2px solid #5D311E; 
	padding: 20px; 
	margin: 15px; 
	font-size: 0.9em
	}

a img.full {clear: both; width: 850px; display: block; margin-left: auto; margin-right: auto; border: 2px solid #5D311E;}
a:hover img.full {border: 2px solid #BF4D47;}

.songleftbox {float: left; border: 1px solid #5D311E; width: 500px; margin: 10px; padding: 10px; margin-top: -10px;}

.maqamlinklist a {display: block; text-decoration: none; padding: 8px; width: 240px; margin: 6px;}

.maqamlinklist ul {margin-top: -5px; padding-bottom: 5px;}
.maqamlinklist ul li a {height: 1.2em; margin: 0; padding: 0; text-decoration: underline;}

.songlinklist ul {list-style-type: none;}
.songlinklist li {height: 36px;}
.songlinklist ul li a {display: block; text-decoration: none; padding: 6px; margin: 0px; width: 520px; font-size: 110%;}
.songlinklist ul li a:hover {color: #221809;}
.songlinklist ul li a.sik:hover {color: #F3EED8;}

span.righttext {float: right; font-size: 90%;}

.fulllist {float: left; margin: 10px; margin-right: 35px;}
.fulllist ul {list-style-type: none; padding: 0; margin: 0;}
.fulllist ul li{
	padding: 5px 10px 0px 10px; 
	width: 150px;
	height: 27px;
	border: 1px solid #000000;
	border-top: 0;
	font-size: 0.9em;
	}
.fulllist ul li#topitem {
	border-top: 1px solid#000000;
	}


h2.byt {width: 230px; margin-left: auto; margin-right: auto; color: #F3EED8; padding: 10px;}
h2.ajm {width: 205px; margin-left: auto; margin-right: auto; padding: 10px;}
h2.rst {width: 205px; margin-left: auto; margin-right: auto; padding: 10px;}
h2.r2nd {background-color: #611E20; 
	border: 2px solid #000; 
	color: #F3EED8; 
	width: 415px; 
	margin-left: auto; margin-right: auto; 
	padding: 10px;}
h2.hjz {width: 215px; margin-left: auto; margin-right: auto; padding: 10px;}
h2.hjzk {background-color: #6DA712;
	border: 2px solid #000; 
	color: #F3EED8;
	width: 290px; 
	margin-left: auto; margin-right: auto; 
	padding: 10px;}
h2.nkr {width: 240px; margin-left: auto; margin-right: auto; padding: 10px;}
h2.nah {width: 310px; margin-left: auto; margin-right: auto; padding: 10px;}


.jinslistnav {position: relative; display: block; margin:0; padding:0;}
.jinslistnav ul {list-style-type: none;}
.jinslistnav li {float: left; display: block; height: 39px;}
.jinslistnav ul li a:link, .jinslistnav ul li a:visited {
	height: 25px; padding: 5px 10px 5px 10px; margin: 2px;
	text-decoration: none;
    font-size: 0.9em;
    color: #F3EED8;
    border: 1px solid #000;
    }

.jinslistnav ul li a:hover {
	background:#F3EED8; 
    color:#BF4D47;
	}

.maqamlistnav {position: relative; display: block; margin-bottom: 50px;}
.maqamlistnav ul {list-style-type: none;}
.maqamlistnav li {float: left; display: block; height: 39px;}
.maqamlistnav ul li a {
	text-decoration: none;
    background:#EDE6C5; 
    color: #5D311E;
    height: 25px;
    padding: 5px 10px 5px 10px;
    border: 1px solid #5D311E;  
    font-size: 0.9em;
    margin: 2px;
    }

.maqamlistnav ul li a:hover {
	background:#F3EED8; 
    color:#BF4D47;
	}


#footer {
	clear: both;
	display: block;
	width: 100%
	top: 0px;
	background-color: /*#EDE6C5;*/ #FDF6D5;
    color: #5D311E;
/*    height: 25px; */
    padding: 5px 10px 5px 10px;
    margin-top: 3px;
    border: 1px solid #5D311E;  
    font-size: 0.8em;
    text-align: right;
	}

/*
#indexfooter {position: relative;
	clear: both;
	display: block;
	width: 100%
	top: -20px;
	background-color:  #FDF6D5;
    color: #5D311E;
    padding: 5px 10px 5px 10px;
    margin-top: 3px;
    border: 1px solid #5D311E;  
    font-size: 0.8em;
    text-align: right;
	}
*/

/* These are the line-drawing backgrounds for the networked representation of each maqam */

#introbg1 {
	position: relative;
	left: 100px;
	width: 800px; 
	height: 100px;
	}

#introbox2
	{height: 110px;}

#introbg3 {
	position: relative;
	left: 100px;
	width: 800px; 
	height: 185px;
	background-image: url(images/introbg3.png);
	background-repeat: no-repeat;
	background-position: 270px 52px; 
	}
	
#introbg4 {
	position: relative;
	left: 100px;
	width: 800px; 
	height: 190px;
    background-image: url(images/introbg4.png);
	background-repeat: no-repeat;
	background-position: 272px 52px;  
	}

#rastbg {
	position: relative;
	left: 100px;
	width: 800px; 
	height: 420px;
	background-image: url(images/010_01MaqamRastNetwork.png);
	background-repeat: no-repeat;
	background-position: 58px 42px; 
	}

#suzdalarbg {
	position: relative;
	left: 100px;
	width: 800px; 
	height: 200px;
	background-image: url(images/010_03MaqamSuzdalarNetwork.png);
	background-repeat: no-repeat;
	background-position: 59px 51px;  
	}

#bayatishuribg {
	position: relative;
	left: 100px;
	width: 800px; 
	height: 350px;
	background-image: url(images/020_02MaqamBayatiShuriNetwork.png);
	background-repeat: no-repeat;
	background-position: 53px 47px;  
	}

#hijazbg {
	position: relative;
	left: 100px;
	width: 800px; 
	height: 285px;
	background-image: url(images/040_01MaqamHijazNetwork.png);
	background-repeat: no-repeat;
	background-position: 59px 40px;  
	}

#hijazkarbg {
	position: relative;
	left: 100px;
	width: 800px; 
	height: 200px;
	background-image: url(images/040_02MaqamHijazkarNetwork.png);
	background-repeat: no-repeat;
	background-position: 240px 0px;  
	}

#nakrizbg {
	position: relative;
	left: 100px;
	width: 800px; 
	height: 200px;
	background-image: url(images/061_01MaqamNakrizNetwork.png);
	background-repeat: no-repeat;
	background-position: 66px 43px;  
	}

#sitemapbg {
	position: relative;
	left: 0px;
	width: 800px; 
	height: 700px;
	background-image: url(images/SiteMapNetwork.png);
	background-repeat: no-repeat;
	background-position: 285px 26px;  
	}	

#maqamnetwork {position: relative; top: 20px; left: 0px;}    

/*#################################################################
The stylesheet named below from CSS Play codes a cross-browser-
compatible horizontal drop-line navigation menu.  I adapted this menu
to allow the jins and maqam images to give multiple options on hover.
This adaptation is applied to .jinslink, .maqamlink, #maqamnetwork div,
and their child element sub-styles.
Feb. 2010 Sami Abu Shumays
###################################################################*/
/* ================================================================ 
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/dd_valid_2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

#maqamnetwork div {position: absolute; width: 120px; height: 50px; /*z-index:100;*/}

/*how to make multiplicative id's?  how multiple dimensions so I don't have to write out the table? */

#L1T1 {left: 0px; top: 0px;}
#L1T2 {left: 0px; top: 85px;}
#L1T3 {left: 0px; top: 170px;}
#L1T4 {left: 0px; top: 255px;}
#L1T5 {left: 0px; top: 340px;}
#L1T6 {left: 0px; top: 425px;}
#L1T7 {left: 0px; top: 510px;}
#L1T8 {left: 0px; top: 595px;}
#L1T9 {left: 0px; top: 680px;}

#L2T1 {left: 175px; top: 0px;}
#L2T2 {left: 175px; top: 85px;}
#L2T3 {left: 175px; top: 170px;}
#L2T4 {left: 175px; top: 255px;}
#L2T5 {left: 175px; top: 340px;}
#L2T6 {left: 175px; top: 425px;}
#L2T7 {left: 175px; top: 510px;}
#L2T8 {left: 175px; top: 595px;}
#L2T9 {left: 175px; top: 680px;}

#L3T1 {left: 350px; top: 0px;}
#L3T2 {left: 350px; top: 85px;}
#L3T3 {left: 350px; top: 170px;}
#L3T4 {left: 350px; top: 255px;}
#L3T5 {left: 350px; top: 340px;}
#L3T6 {left: 350px; top: 425px;}
#L3T7 {left: 350px; top: 510px;}
#L3T8 {left: 350px; top: 595px;}
#L3T9 {left: 350px; top: 680px;}

#L4T1 {left: 525px; top: 0px;}
#L4T2 {left: 525px; top: 85px;}
#L4T3 {left: 525px; top: 170px;}
#L4T4 {left: 525px; top: 255px;}
#L4T5 {left: 525px; top: 340px;}
#L4T6 {left: 525px; top: 425px;}
#L4T7 {left: 525px; top: 510px;}
#L4T8 {left: 525px; top: 595px;}
#L4T9 {left: 525px; top: 680px;}

#L7thT1 {left: 485px; top: 0px;}
#L7thT2 {left: 485px; top: 85px;}
#L7thT3 {left: 485px; top: 170px;}
#L7thT4 {left: 485px; top: 255px;}
#L7thT5 {left: 485px; top: 340px;}
#L7thT6 {left: 485px; top: 425px;}
#L7thT7 {left: 485px; top: 510px;}
#L7thT8 {left: 485px; top: 595px;}
#L7thT9 {left: 485px; top: 680px;}

#L6thT1 {left: 440px; top: 0px;}
#L6thT2 {left: 440px; top: 85px;}
#L6thT3 {left: 440px; top: 170px;}
#L6thT4 {left: 440px; top: 255px;}
#L6thT5 {left: 440px; top: 340px;}
#L6thT6 {left: 440px; top: 425px;}
#L6thT7 {left: 440px; top: 510px;}
#L6thT8 {left: 440px; top: 595px;}
#L6thT9 {left: 440px; top: 680px;}

#maqamnetwork div ul {padding:0; margin:0; list-style-type: none; }

#maqamnetwork div li {float:left;}

#maqamnetwork div ul li a, #maqamnetwork div ul li a:visited {
	display:block; 
	height: 50px; 
	width: 120px; 
	text-decoration:none; 
	color: #F3EED8; 
	padding: 5px;
	font-size: 0.9em;
	}

/*
#maqamnetwork div img {display: none;} 
#maqamnetwork div ul li a img {border: none;}
    */
    
#maqamnetwork div table {border-collapse:collapse; margin:0; padding:0; font-size:1em;}

#maqamnetwork div ul li ul {
    visibility:hidden; 
    position:absolute;
    right:0; }

#maqamnetwork div ul li:hover a, #maqamnetwork div ul li a:hover {height: 60px;}

/*
#maqamnetwork div ul li:hover a img, #maqamnetwork div ul li a:hover img {
	display: block; position: absolute; left: -50px; top: 0; height: 50px;
	}
*/

#maqamnetwork div ul li:hover ul, #maqamnetwork div ul li a:hover ul {
    visibility: visible; 
    position: relative;
  /*  width: 800px;  */ /*uncomment width to display horizontally */
    top:-20px;
    height: 0px;
	left: -2px;
    right: 0px;
    margin: 0;
    padding: 0;
    z-index: 100;}

#maqamnetwork div ul li:hover ul li, #maqamnetwork div ul li a:hover ul li {
	clear: both;
    height: 30px;
    float: left;
    }    

#maqamnetwork div ul li:hover ul li a, #maqamnetwork div ul li a:hover ul li a {
    background:#EDE6C5; 
    color:#5D311E;
    height: 25px;
    padding: 5px 10px 0px 10px;
    border: 1px solid #5D311E; 
    width: 102px;
    }

#maqamnetwork div ul li:hover ul li a:hover, #maqamnetwork div ul li a:hover ul li a:hover {
    background:#F3EED8; 
    color:#BF4D47;
    }

#sitemapbg #maqamnetwork div a {
	display:block; 
	width: 120px; height: 50px;
	text-decoration:none; 
	font-size: 0.9em;
	padding: 5px;
	margin: 0;
	}
	
a.rst, a.jhk, a.nkr, a.mur, a.nah, a.akd, a.krd, a.zam, a.sba, a.byt, a.hjz, a.ajm {
	color: #F3EED8;
	}

a.skb, a.sik, a.mkh {
	color: #000;
	}

#sitemapbg #maqamnetwork div a:hover, #sitemapbg #maqamnetwork div:hover a {
	background:#F3EED8; 
    color:#BF4D47;
    border: 2px solid #5D311E;
    top: 0px; left: 0px;
    margin: 0;
	}


/*this keeps the footer stable during hover over notated jins list*/
#rastlist {height: 720px;} 
#suzdalarlist {height: 260px;}
#bayatishurilist {height: 560px;}
#hijazlist {height: 490px;}
#hijazkarlist {height: 330px;}
#nakrizlist {height: 410px;}


.jinslink {
    clear: both;
    position:relative; 
    width: 750px;
    padding:0; margin:0; 
    z-index:100;
    }

.jinslink ul {padding:0; margin:0; list-style-type: none;}

.jinslink ul li {float:left;}

.jinslink ul li a, .jinslink ul li a:visited {display:block; 
    text-decoration:none;}

.jinslink img {height: 70px; margin:0px; padding: 0px;} /* height declaration forces 84px images to render smaller */
.jinslink ul li a img {border: none;}
    
.jinslink table {border-collapse:collapse; margin:0; padding:0; font-size:1em;}

.jinslink ul li ul {
    visibility:hidden; 
    position:absolute;
    right:0; }

.jinslink ul li:hover a, .jinslink ul li a:hover {height: 100px;}

.jinslink ul li:hover ul, .jinslink ul li a:hover ul {
    visibility: visible; 
    position: relative;
/*    width: 800px;  */
    top:-30px;
    height: 0px;
/*  left: 200px;  if get rid of float-right of next*/
    right: 0px;
    margin: 0;
    padding: 0;}

.jinslink ul li:hover ul li, .jinslink ul li a:hover ul li {
    height: 2px;
    float: right;
    }    

.jinslink ul li:hover ul li a, .jinslink ul li a:hover ul li a {
    background:#EDE6C5; 
    color:#5D311E;
    height: 25px;
    padding: 5px 10px 0px 10px;
    border: 1px solid #5D311E;  
    }

.jinslink ul li:hover ul li a:hover, .jinslink ul li a:hover ul li a:hover {
    background:#F3EED8; 
    color:#BF4D47;
    }

/*  end jinslink styling */

/* begin maqamlink styling */

#root {width: 390px; float: left; /*height: 400px; */
	border: 2px solid #5D311E; 
	padding: 10px; 
	margin: 10px; 
	margin-right: 5px;
	font-size: 0.9em}
	
#leading {width: 390px; float: right;
	border: 2px solid #5D311E; 
	padding: 10px; 
	margin: 10px;
	margin-left: 5px;
	font-size: 0.9em}
	
#modulatory {width: 390px; float: left; clear: left;
	border: 2px solid #5D311E; 
	padding: 10px; 
	margin: 10px; 
	margin-right: 5px;
	font-size: 0.9em}
	
#secondary {width: 390px; float: right; clear: right;
	border: 2px solid #5D311E; 
	padding: 10px; 
	margin: 10px;
	margin-left: 5px;
	font-size: 0.9em}


#root a, #leading a, #secondary a {
	text-decoration: none; 
	display: block; 
	height: 24px;
	margin: 15px 0 15px 0; 
	}
#root a ul, #leading a ul, #secondary a ul {
	list-style-type: none; 
	margin: 0px; 
	padding: 0px; 
	display: inline; 
	float: left; clear: both; margin-right: 10px;
	}
#root a ul li, #leading a ul li, #secondary a ul li {
	float: left; 
	padding: 5px 10px 0px 10px; 
	width: 85px; 
	height: 27px;
	border: 1px solid #000000;
	}
#root a p, #leading a p, #secondary a p {padding-top: 8px;}

#modulatory a {display: block; 	
	text-decoration: none; 
	height: 59px;
	clear: both; 
	margin 15px 0 15px 0;}
#modulatory a ul {list-style-type: none; 
	width: 120px;	
	margin: 0px; 
	padding: 0px;  
	float: left;}
#modulatory a ul li {padding: 5px 10px 0px 10px; 
	width: 85px; 
	height: 27px;
	border: 1px solid #000000;}
#modulatory a p {padding-top: 8px;}

.stepdown {top: 10px;}

.maqamlink {
    clear: both;
    position:relative; 
    width: 800px; has no effect
    padding:0; margin:0; 
    z-index:100;
    }

.maqamlink h3 {padding:0; margin: 0; position: relative; left: 40px;}

.maqamlink ul {padding:0; margin:0; list-style-type: none;}

.maqamlink ul li {float:left;}

.maqamlink ul li a, .maqamlink ul li a:visited {display:block; 
    text-decoration:none; border: 2px solid #5D311E; margin: 10px 0 10px 0;}

.maqamlink img {height: 55px; margin:0px; padding: 0px; display: block; margin-right: 160px;} /* height declaration forces 84px images to render smaller */
.maqamlink img.hilite {background-color: #EAE0B4;}
.maqamlink ul li a img {border: none;}
    
.maqamlink table {border-collapse:collapse; margin:0; padding:0; font-size:1em;}

.maqamlink ul li ul {
    visibility:hidden; 
    position:absolute;
    right:0; }

/*
.maqamlink ul li:hover a, .maqamlink ul li a:hover {height: 200px;}
*/

.maqamlink ul li:hover ul, .maqamlink ul li a:hover ul {
    visibility: visible; 
    position: relative;
    top:-53px;
    height: 0px;
/*  left: 200px; */
    right: 1px;
    margin: 0;
    padding: 0;}

.maqamlink ul li:hover ul li, .maqamlink ul li a:hover ul li {
    height: 2px;
    float: right;
    }    

.maqamlink ul li:hover ul li a, .maqamlink ul li a:hover ul li a {
    background:#EDE6C5; 
    color:#5D311E;
    height: 25px;
    padding: 5px 10px 0px 10px;
    border: 1px solid #5D311E;  
    }

.maqamlink ul li:hover ul li a:hover, .maqamlink ul li a:hover ul li a:hover {
    background:#F3EED8; 
    color:#BF4D47;
    }


/*New Styles Added for Maqam Analysis: A Primer*/

.jinsline {
	position: relative;
	width: 900px;
	height: 39px;
	margin: 0;
	padding: 0;
	border-top: 1px dotted #321;
	}

.jinsline h3 {
	position: absolute; 
	left: 0px;
	top: -15px;
	font-size: 1.4 em;
	}

.jinsline div {position: absolute;}

.jinsline audio {position: relative; width: 60px; margin-left: 10px;}

.jins4low {left: 0px;}
.jins5low {left: 40px;}
.jins6low {left: 80px;}
.jins7low {left: 120px;}
.jins1 {left: 160px;}
.jins2 {left: 200px;}
.jins3 {left: 240px;}
.jins4 {left: 280px;}
.jins5 {left: 320px;}
.jins6 {left: 360px;}
.jins7 {left: 400px;}
.jins8 {left: 440px;}
.jins9 {left: 480px;}
.jins10 {left: 520px;}
.jins11 {left: 560px;}
.jins12 {left: 600px;}
.jins13 {left: 640px;}
.jins14 {left: 680px;}
.jins15 {left: 720px;}

.jinsline a {display: block; 
	text-decoration: none; 
	font-size: 0.9em; 
	height: 23px; 
	padding: 2px; 
	position: absolute; 
	top: 3px;}

a.threenote {width: 80px;}
a.fournote {width: 120px;}
a.fivenote {width: 160px;}
a.sixnote {width: 200px;}
a.sevennote {width: 240px;}
a.eightnote {width: 280px;}

.jinsline a:hover {color: #000; z-index: 0;}


.jinsline p {position: absolute; right: 10px; font-size: 0.9em; top: -12px;}
/*
.jinsline p {
	float: right;
	display: inline;
	top: -10px;
	}

*/
.jinsline p a {display: inline; font-size: 1.2em; position: relative; text-decoration: underline;}