/*---------------------------------------------------------------------------*
 * CSS stylings (c) 2007 Sandeep D. Ranade
 *		Created: 09/12/2007
 *		Last Update: 10/8/2007
 *		Leaf Level Page.
 *---------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------*
 * 	HTML elements 
 *---------------------------------------------------------------------------*/
 /*
 * html: 
 * 		standard defaults to reset a page appearance.
 */
html {
	background-color: white;
	color: black;
}
/*
 * body:
 *		resets margings, etc. Sets the default font style.
 */
body {
	font-family: Verdana;
	font-size: 9pt;
	text-align: center;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}
/*
 * paragraph:
 *		normal paragraph base class.
 */
p {
	font-family: Verdana;
	text-align: left;
	font-size: 9pt;
	font-style: normal;
	font-weight: normal;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}
/* 
 * p.normal:
 *		a normal paragraph, 1 level of indentation.
 *		used in conjenction with h1 levels of titles.
 */
p.normal {
	position: relative;
	left: 40px;
	text-align: left;
	margin: 0.5em 80px 0em 1.5em;
	padding: 0.5em 0 0.5em 0;
}

/* 
 * unpadded list. default. for list of small one-line items.
 */
li {
	clear: both;
	list-style-type: disc;
	list-style-position: outside; /*this justifies the left marker of the text of the link to left */;
	text-align: left;
	padding: 0px 50px 0px 0.3em;
	position: relative;
	margin-left: 4em;
	margin-top: 0px;
	margin-bottom: 0px;
}

/*---------------------------------------------------------------------------*
 * 	Links 
 *---------------------------------------------------------------------------*/
/* 
 * default link styles on pages with content.
 */
a:link {
	color: blue;
	text-decoration: underline;
}
a:visited {
	color: purple;
}
a:hover {
	color: black; /* this is nice periwinkle color */
}
/*
 * The footer for a CS level page will have more subtle footer links ...
 */
a.footer:link {
	color: #666666;
	text-decoration: underline;
}
a.footer:visited {
	color: #666666;
}
a.footer:hover {
	color: black;
}
/*---------------------------------------------------------------------------*
 * 	Appearance 
 *---------------------------------------------------------------------------*/
/* 
  * noborder:
  *		removes border from images, etc.
  */
.noborder {
	border-style: solid;
	border-width: 0;
}
/*
 * sets margins to center element horizontally
 */
.centered-vertically {
	margin-left: auto;
	margin-right: auto;
}
/*
 * Specially for the header image that is centered ... an extra bit of padding on top
 */
.img-centered-vertically {
	margin-left: auto;
	margin-right: auto;
	margin: 10px 0px 0px 0px;
}
/*
 * this is the top slice of the actual "blue" page ... the rounded upper corners.
 */
#main-top {
	width: 815px;
	height: 32px;
	background: transparent url('../images/common/top.png') no-repeat;
	margin-left: auto;
	margin-right: auto;
}
/*
 * The body of the "blue page". this extends the page to fit content.
 */
#main-body {
	position: relative;
	width: 815px;
	background: transparent url('../images/common/mid.png') repeat-y;
	margin-left: auto;
	margin-right: auto;
}
/*
 * this is the bottom slice of the "blue page". bottom rounded corners.
 */
#main-bottom {
	width: 815px;
	height: 36px;
	background: transparent url('../images/common/bottom.png') no-repeat;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
}
/*
 * A line seperator for page elements. No floats on either side. Centering works on both IE and FF
 */
#seperator {
	width: 800px;
	height: 10px;
	background: transparent url('../images/common/seperator.png') no-repeat;
	margin-left: auto;
	margin-right: auto;
	clear: both;
	padding: 0px 0px 0px 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	display: block;
}
/* 
 * an invisible seperator between elements. adds a visual seperation.
 */
#break {
	clear: both;
	height: 5px;
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}
/* 
 * an invisible seperator between elements. adds a visual seperation. 0 width ...
 */
#break-0 {
	clear: both;
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	padding: 0px 0px 0px 0px;
	margin-top: -20px;
	margin-bottom: 0px;
}
/*---------------------------------------------------------------------------*
 * 	Columns/Positioning 
 *---------------------------------------------------------------------------*/
/*
  * For CS level pages, the layout is: <Icon> <text link and description of page>.
  * This is the icon part of this structure.
  */
#cs-icon-column {
	position: relative;
	right: 20px;
	left: 20px;
	float: left;
	width: 120px;
	margin-left: auto;
	margin-right: auto;
	display: inline;
	text-align: right;
}
/*
 * Text part of the page layout for CS level pages
 */
#cs-icon-text {
	position: relative;
	left: 50px;
	right: 2em;
	top: 2em;
	bottom: 2em;
	float: left;
	text-align: left;
	display: inline;
	width: 600px;
}
/*---------------------------------------------------------------------------*
 * 	Text 
 *---------------------------------------------------------------------------*/
/*
  * Normal paragraph text. 
  */
#para-text {
	font-style: normal;
	font-size: 9pt;
	text-align: left;
	position: relative;
	left: 50px;
	display: inline;
	float: left;
	padding: 0px 50px 0px 50px;
}
/*
 *Title text for all pages.
 */
#title-text {
	font-size: 11pt;
	font-style: italic;
	font-weight: bold;
	text-align: left;
	display: inline;
	float: left;
	position: relative;
	left: 50px;
	top: 0px;
}
/*
 * This is needed to ensure that the footer has no elements floating to right/left of it.
 * without this, FF renders the footer link bar on the right of the page and wraps it.
 */
.footer {
	clear: both;
}
/*
 * bottom text is smaller, and more subtle.
 * Link properties are different: see a.footer
 */
#bottom-text {
	font-size: 9pt;
	font-style: normal;
	font-family: Verdana;
	font-weight: normal;
	text-align: center;
	margin-top: -10px;
	color: #666666;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 5%;
}

/*
 * toprightlinks is smaller, and more subtle.
 * Link properties are different: see a.footer
 */
#toprightlinks {
	font-size: 9pt;
	text-align: left;
	display: inline;
	float: right;
	position: relative;
	right: 5px;
	top: 0px;
}

/*
 * toplefttlinks is smaller, and more subtle.
 * Link properties are different: see a.footer
 */
#topleftlinks {
	font-size: 9pt;
	text-align: left;
	display: inline;
	float: left;
	position: relative;
	left: 5px;
	top: 0px;
}

/*
 * special casing for missing file: need absolute paths to make sure the file can be rendered from any directory path
 */
 /*
 * this is the top slice of the actual "blue" page ... the rounded upper corners.
 */
#main-top-absolute {
	width: 815px;
	height: 32px;
	background: transparent url('http://www.sandeepranade.com/images/common/top.png') no-repeat;
	margin-left: auto;
	margin-right: auto;
}
/*
 * The body of the "blue page". this extends the page to fit content.
 */
#main-body-absolute {
	position: relative;
	width: 815px;
	background: transparent url('http://www.sandeepranade.com/images/common/mid.png') repeat-y;
	margin-left: auto;
	margin-right: auto;
}
/*
 * this is the bottom slice of the "blue page". bottom rounded corners.
 */
#main-bottom-absolute {
	width: 815px;
	height: 36px;
	background: transparent url('http://www.sandeepranade.com/images/common/bottom.png') no-repeat;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
}
/*
 * A line seperator for page elements. No floats on either side. Centering works on both IE and FF
 */
#seperator-absolute {
	width: 800px;
	height: 10px;
	background: transparent url('http://www.sandeepranade.com/images/common/seperator.png') no-repeat;
	margin-left: auto;
	margin-right: auto;
	clear: both;
	padding: 0px 0px 0px 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	display: block;
}


/*
 * for lists of sentences, items longer than one-line.
 */
li.padded {
	padding: 0.1em 50px 0.1em 0.3em;
}
/*
 * for a second level deep list
 */
li.level2 {
	margin-left: 6em;
	list-style-type: circle;
}
/*
 * p.normal2
 *		normal paragraph with 2 levels of indentation.
 *		used in conjunction with h2 levels of titles.
 */
p.normal2 {
	position: relative;
	left: 65px;
	text-align: left;
	margin: 0.5em 100px 0em 1.5em;
	padding: 0.5em 0 0.5em 0;
}
/*
 * p.normal3
 *		normal paragraph with 3 levels of indentation.
 *		used in conjunction with h2 levels of titles.
 */
p.normal3 {
	position: relative;
	left: 90px;
	text-align: left;
	margin: 0.5em 100px 0em 1.5em;
	padding: 0.5em 0 0.5em 0;
}
/*
 *	p.quote:
 *		a quote. indented 3 levels in on both sides. italics.
 */
p.quote {
	position: relative;
	left: 80px;
	text-align: left;
	margin: 0em 200px 0em 1.5em;
	padding: 0.5em 0 0.5em 0;
	font-style: italic;
	clear: both;
}
/*
 * p.code
 *		code samples
 */
p.code {
	font-family: "Courier New", Courier, monospace;
	font-style: normal;
	font-size: 9pt;
	font-weight: bold;
	color: #336699;
	position: relative;
	left: 60px;
	width: 700px;
	margin: 0em 50px 0em 0em;
	padding: 0em 0 0em 0;
}
/*
 * p.code2
 *		code indented 1 level deep
 */
p.code2 {
	font-family: "Courier New", Courier, monospace;
	font-style: normal;
	font-weight: bold;
	font-size: 9pt;
	color: #336699;
	position: relative;
	left: 100px;
	width: 660px;
	margin: 0em 50px 0em 0em;
	padding: 0em 0 0em 0;
}
/*
 * p.code3
 *		code indented 2 level deep
 */
p.code3 {
	font-family: "Courier New", Courier, monospace;
	font-style: normal;
	font-weight: bold;
	font-size: 9pt;
	color: #336699;
	position: relative;
	left: 140px;
	width: 600px;
	margin: 0em 50px 0em 0em;
	padding: 0em 50px 0em 0;
}
/*
 * p.code-comment
 *		code comment level 0 deep
 */
p.code-comment {
	font-family: "Courier New", Courier, monospace;
	font-style: normal;
	font-weight: bold;
	font-size: 9pt;
	color: #33CC33;
	position: relative;
	left: 60px;
	width: 700px;
	margin: 0em 50px 0em 0em;
	padding: 0em 0 0em 0;
}
/*
 * .credit-note
 *		Credit note.
 */
.credit-note {
	font-size: 8pt;
	color: gray;
}

.credit-note-centered {
	font-size: 8pt;
	color: gray;
	text-align:center;
}

.red-text {
	color: red;
	font-weight: bold;
}
.blue-text {
	color: blue;
	font-weight: bold;
}
.green-text {
	color: green;
	font-weight: bold;
}
/*
 * p.code-comment2
 *		code comment level 1 deep
 */
p.code-comment2 {
	font-family: "Courier New", Courier, monospace;
	font-style: normal;
	font-weight: bold;
	font-size: 9pt;
	color: #33CC33;
	position: relative;
	left: 100px;
	width: 660px;
	margin: 0em 50px 0em 0em;
	padding: 0em 0 0em 0;
}
/*
 * p.code-comment3
 *		comments indented 2 levels deep
 */
p.code-comment3 {
	font-family: "Courier New", Courier, monospace;
	font-style: normal;
	font-weight: bold;
	font-size: 9pt;
	color: #33CC33;
	position: relative;
	left: 140px;
	width: 600px;
	margin: 0em 50px 0em 0em;
	padding: 0em 50px 0em 0;
}
/*---------------------------------------------------------------------------*
 * 	Appearance 
 *---------------------------------------------------------------------------*/
/*
  * leaf-img-centered-vertically
  *		5 px padding on top and bottom, centered vertically.
  */
.leaf-img-centered-vertically {
	margin-left: auto;
	margin-right: auto;
	margin: 5px 0px 5px 0px;
}
/*
 * these are notes on the title (like a download size, details, or dates)
 */
#title-notes-h2 {
	font-weight: normal;
}
/*
 * these are notes as normal text (like a download size, details, or dates)
 */
#normal-notes {
	font-weight: normal;
	font-style: italic;
	font-size: 9pt;
}
/*---------------------------------------------------------------------------*
 * 	Columns/Positioning 
 *---------------------------------------------------------------------------*/
/*
  * For leaf pages, the layout is: <bullet> <title>.
  *                                <content etc>
  * This is the H1 bullet part of this structure.
  */
#bullet-column-h1 {
	position: relative;
	left: 20px;
	float: left;
	width: 20px;
	height: 20px;
	vertical-align: middle;
	display: inline;
	text-align: left;
}
/*
 * H1 Title part of the page layout for leaf level pages
 */
#bullet-title-h1 {
	position: relative;
	left: 40px;
	float: left;
	text-align: left;
	display: inline;
	width: 700px;
	margin: 0px 0px 0px 0px;
	font-size: 11pt;
	font-style: italic;
	font-weight: bold;
	text-align: left;
}
/*
 * This is the H2 bullet part of this structure.
 */
#bullet-column-h2 {
	position: relative;
	left: 60px;
	float: left;
	width: 15px;
	height: 15px;
	vertical-align: middle;
	display: inline;
	text-align: left;
}
/*
 * H2 Title part of the page layout for leaf level pages
 */
#bullet-title-h2 {
	position: relative;
	left: 70px;
	float: left;
	text-align: left;
	display: inline;
	width: 700px;
	margin: 0px 0px 0px 0px;
	font-size: 10pt;
	font-style: italic;
	font-weight: bold;
	text-align: left;
}
/*
 * H3 Title part of the page layout for leaf level pages
 */
#bullet-title-h3 {
	position: relative;
	left: 85px;
	float: left;
	text-align: left;
	display: inline;
	width: 700px;
	margin: 0px 0px 0px 0px;
	font-size: 10pt;
	font-style: italic;
	font-weight: bold;
	text-align: left;
	text-decoration: underline;
}
/*
 * H2 title only. no bullet. is alligned differently. 
 */
#title-h2 {
	position: relative;
	left: 40px;
	float: left;
	text-align: left;
	display: inline;
	width: 700px;
	margin: 0px 0px 0px 0px;
	font-size: 10pt;
	font-style: italic;
	font-weight: bold;
}
/*
 * H1 bold title only. no bullet. is alligned differently. 
 */
#title-h1-bold {
	position: relative;
	left: 60px;
	float: left;
	text-align: left;
	display: inline;
	width: 700px;
	margin: 0px 0px 0px 0px;
	font-size: 10pt;
	font-weight: bold;
}
/*---------------------------------------------------------------------------*
 * 	Special Layouts for specific pages 
 *---------------------------------------------------------------------------*/
/*
 * ======== Projects: Computer Science ======================================*
 */
/*
 * projects-list-column-left:
 *		this is the left most column for the list of projects.
 */
#projects-list-column-left {
	position: relative;
	left: 60px;
	float: left;
	width: 300px;
	vertical-align: middle;
	display: inline;
	text-align: left;
	font-weight: bold;
	font-style: italic;
	padding-top: 0.2em;
}
/*
 * projects-list-column-middle:
 *		this is the middle column for the list of projects.
 */
#projects-list-column-middle {
	position: relative;
	left: 2em;
	padding-left: 2em;
	float: left;
	width: 200px;
	vertical-align: middle;
	display: inline;
	text-align: left;
	font-weight: bold;
	padding-top: 0.2em;
	font-style: italic;
}
/*
 * projects-list-column-right:
 *		this is the right most column for the list of projects.
 */
#projects-list-column-right {
	position: relative;
	left: 2em;
	padding-left: 2em;
	float: left;
	width: 200px;
	vertical-align: middle;
	display: inline;
	text-align: left;
	font-weight: bold;
	font-style: italic;
	padding-top: 0.2em;
}
/*
 * ======== Gharana: Classical Singing ======================================*
 */
/*
 * left-float-image:
 *		images on the left hand side, indented as a normal paragraph would be.
 *		pairs with right-image-description below.
 */
#left-float-image {
	position: relative;
	left: 90px;
	width: 200px;
	float: left;
	display: inline;
	padding-right: 1em;
}
/*
 * right-image-description:
 *		images on the left hand side, indented as a normal paragraph would be.
 *		pairs with left-float-image above.
 */
#right-image-description {
	position: relative;
	float: left;
	left: 100px;
	width: 470px;
	display: inline;
	padding-right: 2em;
}
/*
 *======== Concerts: Classical Singing ======================================*
 */
/*
 * bullet-text-h2:
 *		goes with bullet-column-h1. the text is a standard font, as a normal para.
 *		used for a list of descriptions without a clear title. Concert descriptions :-)
 */
#bullet-text-h2 {
	position: relative;
	left: 70px;
	float: left;
	text-align: left;
	display: inline;
	width: 700px;
	margin: 0px 0px 0px 0px;
	font-size: 9pt;
	font-style: normal;
	font-weight: normal;
	text-align: left;
}
/*
 *======== Works: Classical Singing ======================================*
 */
/* 
 * bullet-column-listen-or-watch:
 *		bullet for listen/watch icon on the works page.
 *		pairs with bullet-listen-or-watch-title below.
 */
#bullet-column-listen-or-watch {
	position: relative;
	left: 45px;
	float: left;
	width: 35px;
	height: 35px;
	vertical-align: middle;
	display: inline;
	text-align: right;
}
/*
 * bullet-listen-or-watch-title:
 *		title after a bullet for a downloadable work. pairs with bullet-column-listen-or-watch above.
 */
#bullet-listen-or-watch-title {
	position: relative;
	left: 55px;
	float: left;
	text-align: left;
	display: inline;
	width: 685px;
	margin: 0em 0px 0em 0px;
	font-size: 11pt;
	font-style: italic;
	font-weight: bold;
	text-align: left;
	padding: 0.5em 0px 0.5em 0px;
}
/*
 *======== Works downloads: Classical Singing ======================================*
 */
/*
 * p.works-description:
 *		an unpadded version of paragraph text for download attributes on the works page.
 */
p.works-description {
	position: relative;
	left: 65px;
	text-align: left;
	margin: 0em 80px 0em 1.5em;
	padding: 0em 0 0em 0;
	font-style: italic;
	font-size: 9pt;
	font-weight: normal;
}
/*
 * p.works-description-padded:
 *		paragraphs that describe the work being downloaded need some padding to seperate from 
 *		the para that describes download attributes.
 */
p.works-description-padded {
	position: relative;
	left: 65px;
	text-align: left;
	margin: 0em 80px 0em 1.5em;
	padding: 0.5em 0 0.5em 0;
	font-style: italic;
	font-size: 9pt;
	font-weight: normal;
}
/*
 *======== Ragamatics: Classical Singing ======================================*
 */
/*
 * ragamatics-watch-bullet:
 *		a "Watch" bullet for papers listed on main ragamatics page.
 */
#ragamatics-watch-bullet {
	position: relative;
	left: 45px;
	float: left;
	width: 35px;
	height: 35px;
	display: inline;
	text-align: right;
}
/*
 * ragamatics-paper-title:
 *		On the main ragamatics page, papers are listed using this as the title style.
 *		not a page title, as the name may sound like.
 */
#ragamatics-paper-title {
	position: relative;
	left: 55px;
	float: left;
	text-align: left;
	display: inline;
	width: 685px;
	margin: 0em 0px 0em 0px;
	font-size: 10pt;
	font-style: italic;
	font-weight: bold;
	text-align: left;
	padding: 0.5em 0px 0.5em 0px;
}
/*
 * ragamatics-watch-bullet-title:
 *		a "watch" icon on a title level page.
 */
#ragamatics-watch-bullet-title {
	position: relative;
	left: 15px;
	float: left;
	width: 35px;
	height: 35px;
	display: inline;
	text-align: right;
}
/*
 * ragamatics-page-title:
 *		the title of a page. the reason this is seperate is because the icon is not a normal
 *		bullet, it's a "watch" icon. margins are adjusted accordingly
 */
#ragamatics-page-title {
	position: relative;
	left: 20px;
	float: left;
	text-align: left;
	display: inline;
	width: 685px;
	margin: 0em 0px 0em 0px;
	font-size: 11pt;
	font-style: italic;
	font-weight: bold;
	text-align: left;
	padding: 0.5em 0px 0.5em 0px;
}
/*
 * equation:
 *		normal png image as equation. There is no padding for this image.
 *		used for equations that has just inline text (such has scripted characters, etc).
 */
.equation {
	padding: 0em 0px 0em 0px;
	margin-bottom: auto;
	margin-top: auto;
}
/*
 * equation-padded:
 *		for equations intendted to be inline, with brackets, braces etc that extend below
 *		the text's bottom margin, we pad them a little (suck them down for the text's lower margins
 *		to allign with the para text.)
 */
.equation-padded {
	padding: 0em 0px 0em 0px;
	margin-bottom: -0.3em;
	margin-top: auto;
}
/*
 * p.normal-equation :
 * 		this is a normally indented paragraph that contains equations. the line spacing is higher
 * 		to accomoadate png equations.
 */
p.normal-equation {
	position: relative;
	left: 40px;
	text-align: left;
	margin: 0.5em 80px 0em 1.5em;
	padding: 0.5em 0 0.5em 0;
	line-height: 2em;
}
/*
 * shuddha: 
 * 		a shuddha swar is bold.
 */
.shuddha {
	font-weight: bold;
}
/*
 * swar: 
 * 		a swar is bold.
 */
.swar {
	font-weight: bold;
}
/*
 * komal:
 *		a komal swar is underlined and bold.
 */
.komal {
	text-decoration: underline;
	font-weight: bold;
}
/*
 * komal:
 *		a komal swar is underlined and bold.
 */
.teevra {
	text-decoration: overline;
	font-weight: bold;
}
/*
 * swar-in:
 *		for hamming distance/ complementary ragas, an in-swar that is included in the set.
 */
.swar-in {
	font-weight: bold;
	color: green;
}
/*
 * swar-out:
 *		for hamming distance/ complementary ragas, an out-swar that is not included in the set.
 */
.swar-out {
	font-weight: bold;
	color: maroon;
}
/*
 * swar-optional:
 *		for hamming distance/ complementary ragas, an optional-swar that is included or not, in the set.
 */
.swar-optional {
	font-weight: bold;
	color: purple;
}
/*
 * swar-shifted:
 *		in delta fingerprinting, a shifted swar is one that has undergone a circular shift.
 */
.swar-shifted {
	font-weight: bold;
	color: #3366FF;
	text-decoration: underline;
}
/*
 * ragamatics-point:
 *		emphatic call of attention to a point
 */
.ragamatics-point {
	font-weight: bold;
	font-style: italic;
	color: maroon;
}
/*
 * alert-note:
 *		a note to alert readers of work in progress, copyright, or any other warning.
 */
p.alert-note {
	font-size: 9pt;
	font-style: italic;
	color: #CC0000;
	text-align: center;
}
/*
 * img-label:
 *		a centered image label
 */
p.img-label{
	font-size: 9pt;
	font-style: italic;
	text-align: center;
}

.gray-border {
	border:			1px solid #CCCCCC;
}
/*
 *======== Poetry: Hobbies: Cool Stuff======================================*
 */
/*
 * poetry-column-left:
 *		this is the left column for poetry.
 *		It fills the left half of the body with appropriate padding
 */
#poetry-column-left {
	position: relative;
	left: 60px;
	float: left;
	width: 300px;
	vertical-align: middle;
	display: inline;
	text-align: left;
	padding-right: 0.5em;
	margin-bottom: 0.5em;
}
/* 
 * poetry-column-right:
 *		this is the right column for poetry.
 *		It fills the right half of the body with appropriate padding
 */
#poetry-column-right {
	position: relative;
	left: -2em;
	margin-right: 1em;
	float: right;
	width: 400px;
	vertical-align: middle;
	display: inline;
	text-align: left;
	padding-bottom: -0.5em;
	margin-bottom: 0.5em;
	line-height: 1.5em;
}
/*
 * poetry-column-level1:
 *		this is the level1 indented column for poetry.
 */
#poetry-column-level1 {
	position: relative;
	left: 60px;
	float: left;
	width: 700px;
	vertical-align: middle;
	display: block;
	text-align: left;
	padding-right: 0.5em;
	margin-bottom: 2em;
}
/* 
 * poetry-column-level2:
 *		this is the level2 indented column for poetry.
 */
#poetry-column-level2 {
	position: relative;
	left: 120px;
	float: left;
	width: 640px;
	vertical-align: middle;
	display: block;
	text-align: left;
	padding-right: 0.5em;
	margin-bottom: 2em;
}
/*
 * ======== Family: Cool Stuff ======================================*
 */
/*
 * family-float-photo:
 *		images on the left hand side, indented as a normal paragraph would be.
 *		pairs with family-float-description below.
 */
#family-float-photo {
	position: relative;
	left: 40px;
	width: 350px;
	float: left;
	display: inline;
	padding-right: 1em;
}

#family-float-photo-right {
	position: relative;
	left: 0px;
	right: 40px;
	width: 350px;
	float: right;
	display: inline;
	padding-right: 5em;
}

/*
 * family-float-description:
 *		para on the right hand side, indented as a normal paragraph would be.
 *		pairs with family-float-photo above.
 */
#family-float-description {
	position: relative;
	float: left;
	left: 40px;
	width: 350px;
	display: inline;
	padding-right: 2em;
}
#family-float-description-left {
	position: relative;
	float: left;
	left: 40px;
	width: 350px;
	display: inline;
	padding-right: 1em;
}

/*
 * family-float-photo:
 *		images on the left hand side, indented as a normal paragraph would be.
 *		pairs with family-float-description below.
 */
#family-para {
	position: relative;
	left: 40px;
	width: 750px;
	float: left;
	display: inline;
	padding-right: 1em;
}
/*
 * ======== Gallery: Cool Stuff ======================================*
 */
/*
 * thumbnail-photo:
 *		This floats the thumbnail images with little padding ...
 */
#thumbnail-photo {
	position: relative;
	left: 50px;
	width: 120px;
	height: 120px;
	float: left;
	display: inline;
	padding: 0 0 0 0x;
	margin: 0 0 0 0;
	text-align: center;
}
/*
 * thumbnail-photo-padded:
 *		This floats the thumbnail images with little padding ...
 */
#thumbnail-photo-padded {
	position: relative;
	left: 50px;
	width: 120px;
	height: 120px;
	float: left;
	display: inline;
	padding: 0 0 0 0x;
	margin: 0 30 0 0;
	text-align: center;
}
/*
 * thumbnail-text-padded:
 *		This floats the thumbnail text with little padding ...
 */
#thumbnail-text-padded {
	position: relative;
	left: 50px;
	width: 120px;
	height: 40px;
	float: left;
	display: inline;
	padding: 0 0 0 0x;
	margin: 0 30 0 0;
	text-align: center;
}


/*
 * thumbnail-photo-long:
 *		This floats the thumbnail images (2:1 ration, long) with little padding ...
 */
#thumbnail-photo-long {
	position: relative;
	left: 50px;
	width: 240px;
	height: 120px;
	float: left;
	display: inline;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	text-align: center;
}
/*
 * photo-text-top:
 *		this is the text that is the caption of the photo (when photo thumbnail exists above the text).
 */
p.photo-text-top {
	text-align: center;
}
/*
 * photo-text-bottom:
 *		this is the text that is the caption of the photo (when photo thumbnail exists below the text).
 */
p.photo-text-bottom {
	text-align: center;
	margin: 5em 0 0 0;
}
/*
 * ======== Graphics: Hobbies : Cool Stuff ======================================*
 */
/*
 * graphics-thumbnails:
 *		This floats the thumbnail for graphics / icons
 */
#graphics-thumbnails {
	position: relative;
	left: 50px;
	width: 100px;
	height: 100px;
	float: left;
	display: inline;
	padding: 0 0 0 0x;
	margin: 0 0 0 0;
	text-align: center;
}
/*
 * ======== Photo Meuseum, Memorable Times : Gallery: Cool Stuff ======================================*
 */
/*
 * gallery-photo:
 *		This floats the gallery images/caption to the left side with no padding ...
 */
#gallery-photo-left {
	position: relative;
	left: 60px;
	width: 350px;
	float: left;
	display: inline;
	padding: 0 0 0 0x;
	margin: 0 0 0 0;
	text-align: center;
}
/*
 *gallery-caption:
 *		this is the float/container that contains the photo or photo's caption caption
 */
#gallery-photo-right {
	position: relative;
	left: 60px;
	width: 350px;
	float: left;
	display: inline;
	padding: 0 0 0 0x;
	margin: 0 0 0 0;
	text-align: center;
}
/*
 * photo-caption-left:
 *		this is the text that is the caption of the photo, when photo is to the right.
 */
p.photo-caption-left {
	text-align: right;
	margin: 9em 1em 0 0;
}
/*
 * photo-caption-right:
 *		this is the text that is the caption of the photo, when photo is to the left.
 */
p.photo-caption-right {
	text-align: left;
	margin: 9em 0 0 1em;
}
/*
 *gallery-photo-long-left:
 *		this is the float/container that contains a long (600 pix width) photo
 */
#gallery-photo-long-left {
	position: relative;
	left: 60px;
	width: 600px;
	float: left;
	display: inline;
	padding: 0 0 0 0x;
	margin: 0 0 0 0;
	text-align: center;
}
/*
 *gallery-photo-short-right:
 *		this is the float/container that contains the photo's caption
 */
#gallery-photo-short-right {
	position: relative;
	left: 60px;
	width: 100px;
	float: left;
	display: inline;
	padding: 0 0 0 0x;
	margin: 0 0 0 0;
	text-align: center;
}
/*
 *gallery-photo-long-right:
 *		this is the float/container that contains a long (600 pix width) photo
 */
#gallery-photo-long-right {
	position: relative;
	left: 60px;
	width: 100px;
	float: left;
	display: inline;
	padding: 0 0 0 0x;
	margin: 0 0 0 0;
	text-align: center;
}
/*
 *gallery-photo-short-left:
 *		this is the float/container that contains the photo's caption
 */
#gallery-photo-short-left {
	position: relative;
	left: 60px;
	width: 600px;
	float: left;
	display: inline;
	padding: 0 0 0 0x;
	margin: 0 0 0 0;
	text-align: center;
}
/*
 * photo-caption-short-left:
 *		this is the text that is the caption of the photo, when photo are long (600 pix)
 */
p.photo-caption-short-left {
	text-align: right;
	margin: 3em 0.5em 0 0;
}
/*
 * photo-caption-short-right:
 *		this is the text that is the caption of the photo, when photo are long (600 pix)
 */
p.photo-caption-short-right {
	text-align: left;
	margin: 3em 0 0 0.5em;
}
/*
 * ======== Compositions : Works : Classical Singing ======================================*
 */
/*
 * composition-left:
 *		This floats the composition's left column to the left side
 */
#composition-left {
	position: relative;
	left: 0px;
	width: 200px;
	float: left;
	display: inline;
	padding: 0 0 0 0x;
	margin: 0 0 0 0;
	text-align: center;
}
/*
 * composition-middle:
 *		This floats the composition's middle column to the left side
 */
#composition-middle {
	position: relative;
	left: 0px;
	width: 250px;
	float: left;
	display: inline;
	padding: 0 0 0 0x;
	margin: 0 0 0 0;
	text-align: center;
}
/*
 * composition-right:
 *		This floats the composition's right column to the left side
 */
#composition-right {
	position: relative;
	left: 0px;
	width: 280px;
	float: left;
	display: inline;
	padding: 0 0 0 0x;
	margin: 0 0 0 0;
	text-align: center;
}
/*
 * p.composition-title 
 *		title on a composition page.
 */
p.composition-title {
	position: relative;
	left: 45px;
	float: left;
	text-align: left;
	display: inline;
	margin: 0px 0px 0px 0px;
	font-size: 10pt;
	font-style: italic;
	font-weight: bold;
	text-align: left;
}
/*
 * p.composition-bullet 
 *		bullet for a composition 
 */
#composition-bullet {
	position: relative;
	left: 30px;
	float: left;
	width: 15px;
	height: 15px;
	vertical-align: middle;
	display: inline;
	text-align: left;
}
/*
 * p.composition-left-text 
 *		text in the left column.
 */
p.composition-left-text {
	position: relative;
	left: 45px;
	float: left;
	text-align: left;
	display: inline;
	margin: 0px 0px 0px 0px;
	font-size: 10pt;
	font-style: italic;
	font-weight: normal;
	text-align: left;
	padding: 0 0.5em 0 0.5em;
}
/*
 * p.composition-middle-text 
 *		text in the middle column.
 */
p.composition-middle-text {
	position: relative;
	left: 45px;
	float: left;
	text-align: left;
	display: inline;
	margin: 0px 0px 0px 0px;
	font-size: 10pt;
	font-style: normal;
	font-weight: normal;
	text-align: left;
	padding: 0 0.5em 0 0.5em;
}
/*
 * p.composition-wight-text 
 *		text in the right column.
 */
p.composition-right-text {
	position: relative;
	left: 45px;
	float: left;
	text-align: left;
	display: inline;
	margin: 0px 0px 0px 0px;
	font-size: 10pt;
	font-style: normal;
	font-weight: normal;
	text-align: left;
	padding: 0 0.5em 0 0.5em;
}
/*
 * ======== Complementary Ragas : Ragamatics: Classical Singing ======================================*
 * These are text look and feel styles for complementary ragas
 */
.subtracted-swar {
	color: red;
	font-weight: bold;
}
.remaining-swar {
	color: green;
	font-weight: bold;
}
.fuzzy-swar {
	color: purple;
	font-weight: bold;
}
.stable-raga {
	color: teal;
	font-weight: bold;
}
.unstable-raga {
	color: maroon;
	font-weight: bold;
}
.complement-of-object {
	text-decoration: overline;
	font-weight: bold;
}
/*
 * raga-column-left:
 *		this is the left column for raga examples.
 *		It fills the left half of the body with appropriate padding
 */
#raga-column-left {
	position: relative;
	left: 60px;
	float: left;
	width: 250px;
	vertical-align: middle;
	display: inline;
	text-align: left;
	padding-right: 0.5em;
	margin-bottom: 0.5em;
}
/* 
 * raga-column-right:
 *		this is the right column for eaga example.
 *		It fills the right half of the body with appropriate padding
 */
#raga-column-right {
	position: relative;
	left: -2em;
	margin-right: 1em;
	float: right;
	width: 450px;
	vertical-align: middle;
	display: inline;
	text-align: left;
	padding-bottom: -0.5em;
	margin-bottom: 0.5em;
	line-height: 1.5em;
}
/*
 *======== delta fingerprinting of ragas : ragamatics : classical singing ======================================*
 */
/* 
 * p.equation:
 *		an equation laid out to accomodate numbering.
 */
p.equation {
	position: relative;
	left: 60px;
	width: 600px;
	float: left;
	text-align: left;
	display: inline;
	margin: 0 0 0 0em;
	padding: 0em 0em 0em 0em;
}
/* 
 * p.equation-number:
 *		an equation-number for the above equation style 
 */
p.equation-number {
	position: relative;
	left: 40px;
	width: 9em;
	float: left;
	text-align: right;
	display: inline;
	font-weight: bold;
	margin: 0 0 0 0em;
	padding: 0em 0em 0em 0em;
}
/*
 * shifted-swar:
 *		a swar that is circular shifted
 */
.shifted-swar {
	text-decoration: underline;
	font-weight: bold;
	color: maroon;
}
/*
 * strong-point:
 *		a strong point being made, a conclusion, etc.
 */
.strong-point {
	color: navy;
	font-weight: bold;
	font-style: italic;
}
/*
 * ======== All My Compositions : Works : Classical Singing ======================================*
 */
/*
 * raga-name:
 *		This floats the raga's left column to the left side
 */
#raga-name {
	position: relative;
	left: 0px;
	width: 150px;
	float: left;
	display: inline;
	padding: 0 0 0 0x;
	margin: 0 0 0 0;
	text-align: center;
}
/*
 * taal-name:
 *		This floats the composition's middle column to the left side
 */
#taal-name {
	position: relative;
	left: 0px;
	width: 150px;
	float: left;
	display: inline;
	padding: 0 0 0 0x;
	margin: 0 0 0 0;
	text-align: center;
}
/*
 * composition-name:
 *		This floats the composition's right column to the left side
 */
#composition-name {
	position: relative;
	left: 0px;
	width: 250px;
	float: left;
	display: inline;
	padding: 0 0 0 0x;
	margin: 0 0 0 0;
	text-align: center;
}
/*
 * creator-name:
 *		This floats the composition's right column to the left side
 */
#creator-name {
	position: relative;
	left: 0px;
	width: 200px;
	float: left;
	display: inline;
	padding: 0 0 0 0x;
	margin: 0 0 0 0;
	text-align: center;
}
/*
 * p.raga-name-text 
 *		text in the left column.
 */
p.raga-name-text {
	position: relative;
	left: 45px;
	float: left;
	text-align: left;
	display: inline;
	margin: 0px 0px 0px 0px;
	font-size: 10pt;
	font-style: italic;
	font-weight: bold;
	text-align: left;
	padding: 0 0.5em 0 0.5em;
}
/*
 * p.taal-name-text 
 *		text in the middle column.
 */
p.taal-name-text {
	position: relative;
	left: 45px;
	float: left;
	text-align: left;
	display: inline;
	margin: 0px 0px 0px 0px;
	font-size: 10pt;
	font-style: normal;
	font-weight: normal;
	text-align: left;
	padding: 0 0.5em 0 0.5em;
}
/*
 * p.composition-name-text 
 *		text in the right column.
 */
p.composition-name-text {
	position: relative;
	left: 45px;
	float: left;
	text-align: left;
	display: inline;
	margin: 0px 0px 0px 0px;
	font-size: 10pt;
	font-style: normal;
	font-weight: normal;
	text-align: left;
	padding: 0 0.5em 0 0.5em;
}
/*
 * p.creator-name-text 
 *		text in the right column.
 */
p.creator-name-text {
	position: relative;
	left: 45px;
	float: left;
	text-align: left;
	display: inline;
	margin: 0px 0px 0px 0px;
	font-size: 10pt;
	font-style: normal;
	font-weight: normal;
	text-align: left;
	padding: 0 0.5em 0 0.5em;
}