/******************************************************/
/*                                                    */
/*                  Stylesheet for                    */
/*   Michael Geraci dot Com - By Michael P. Geraci    */
/*    www.michaelgeraci.com - copyright 2006-2010     */
/*                                                    */
/******************************************************/

/*
	green: bbd199
	cream: f3f4d3
	text: 444
*/



/* ========== */
/* = Global = */
/* ========== */

body{
	background: #bbd199;
	font-family: georgia;
}

a{outline: none;}

a{color: #444;}
a:hover{color: #f3f4d3;}

a.nou{text-decoration: none;}

a.u{text-decoration: underline;}

#galleryThumbs a.on{color: #444; text-decoration: none; padding: 0 1px 2px 1px; background: #f3f4d3;}

#g-piece-content a.on{color: #f3f4d3; text-decoration: none;}


/* ======================== */
/* = Centered Content Box = */
/* ======================== */

#content{
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: auto;
	margin-left: auto; 	/* opera does not like 'margin:20px auto' */
	border: 0px;
	text-align:left; /* part 2 of 2 centering hack */
	width: 900px;
}


/* ========================================== */
/* = List Styles; for the appropriate pages   */
/* =  including composition, recording,       */
/* =    photography, and web design           */
/* ========================================== */

/* list of pieces on the left hand side */
#pieceList{
	float: left;
	padding-right: 50px;
	margin-left: 5px;
	border-style: solid;
	border-width: 0 2px 0 0;
	border-color: #f3f4d3;
}

#pieceList ul{
	margin-top: 0px;
	margin-bottom: 0px;
}

#pieceList li{
	margin-left: -30px;
	font-size: 10pt;
	color: #444;
	padding: 0 0 10px 0px;
	list-style-type: none;
}

#pieceList li span{font-style: oblique;}

#pieceList li a{color: #444; text-decoration: none;}
#pieceList li a:hover{color: #444; text-decoration: underline;}

#pieceList li a.on{color: #f3f4d3; text-decoration: none;}


/* the pieces' content on the right hand side */
#pieceContent{
	float: left;
	width: 500px;
	font-size: 13px;
	font-style: normal;
	text-align: center ;
	margin: 0 0 0 -2px;
	padding-left: 10px;
	color: #444;
	border-style: solid;
	border-width: 0 0 0 2px;
	border-color: #f3f4d3;
}

/* the title of the piece */
#pieceContent span{font-size: 16px;}


/* ========================= */
/* =   Gallery Templates   = */
/* =  Used in Photography  = */
/* =  and Graphic Design   = */
/* ========================= */

/* the thumnail div on the left */
#galleryThumbs{
	float: left;
	width: 190px;
	border-style: solid;
	border-width: 0 2px 0 0;
	border-color: #f3f4d3;
	margin-left: -15px;
}

/* the page navigation for thumbnails */
#pageNav{
	width: 210px;
	height: 17px;
	margin-left: -20px;
	float: left;
	text-align: left;
	font-size: 10pt;
	text-align: center;
}

/* no underlines on page links */
#pageNav a{text-decoration: none;}

/* when links aren't active in page navigation */
span.gray{color: #909e7a;}

/* thumbnail ul */
#galleryThumbs ul{
	margin-left: -10px;
	margin-top: 0px;
	padding: 0px;
}

#galleryThumbs li{
	list-style-type: none;
	float: left;
	padding: 10px;
}

/* the thumbnails */
#galleryThumbs ul li img{
	width: 75px;
	height: 75px;
	border: 0px;
}

/* the div on the right side */
#galleryContent{
	font-size: 10pt;
	font-style: normal;
	float: left;
	margin: 0 0 0 -2px;
	padding: 0 0 30px 20px;
	color: #444;
	border: solid;
	border-width: 0 0 0 2px;
	border-color: #f3f4d3;
}

/* if no piece is selected, the click on a thumbnail notice */
span#clickThumbnail{
	font-size: 16px;
	font-style: oblique;
	float: left;
	margin-left: 10px;
}

/* the div containing the left and right arrows */
#pictureArrows{
	padding-bottom: 10px;
	float: left;
}

#arrowsleft{
	display: block;
	width: 32;
	height: 15;
	float: left;
}

#arrowsright{
	display: block;
	width: 32;
	height: 15;
	float: right;
}

img#thePicture{
	float: left;
	clear: both;
}

#pictureInfo{
	float: left;
	clear: both;
	margin-top: 3px;
}



/* ========================== */
/* =      Program Notes     = */
/* =  used in compositions  = */
/* =     and recordings     = */
/* ========================== */

.pieceBottomSpacer{
	float: left;
	clear: both;
	width: 800px;
}

.programNotes{
	display: none;
	width: 400px;
	margin: 20px 0 0 52px;
	text-align: left;
}

.aboutThePiece{
	float: left;
	width: 400px;
	padding-bottom: 10px;
	font-weight: bold;
}

.programNotesOpen{
	float: left;
	margin-top: 20px;
	margin-left: 52px;
	margin-bottom: 30px;
}


/* ============== */
/* = Bio/Resume = */
/* ============== */

div.text{ /* text columns for index and links page */
	width: 430px;
	color: #444;
	float: left;
	margin-left: 15px;
	font-size: 16px;
}

.text h1{ /* headers in text columns */
	font-style: oblique;
	font-weight: normal;
	font-size: 16px;
	margin-bottom: 5px;
}


/* ===================== */
/* = Compositions Page = */
/* ===================== */

#pageComposition{margin-left: 20px;}


/* =================== */
/* = Recordings Page = */
/* =================== */

#pageRecordings{margin-left: 15px;}

#pageRecordings #pieceList{padding-right: 20px;}

#pageRecordings #pieceContent{
	font-size: 10pt;
	font-style: normal;
	float: left;
	width: 600px;
	margin: 0 0 0 -2px;
	padding: 0 0 30px 20px;
	color: #444;
	border-style: solid;
	border-width: 0 0 0 2px;
	border-color: #f3f4d3;
}

#rImage{
	float: left;
	width: 200px;
	margin-right: 20px;
}

#rImage img{border: 0px;}

#rInfo{
	text-align: left;
	float: left;
	width: 380px;
}

#rInfo span.line{
	float: left;
	margin-bottom: 5px;
	font-size: 14px;
}

#rInfo span.song{
	font-style: oblique;
	line-height: 20px;
	font-size: 13px;
}

.clearBreak{clear:both;}

#pageRecordings .programNotesOpen{margin-left: 0px;}

#pageRecordings .programNotes{
	margin-top: 0px;
	margin-left: 0px;
	width: 580px;
}


/* ======================= */
/* = Graphic Design Page = */
/* ======================= */

#pageGraphic{
	width: 900px;
	margin-left: 10px;
}


/* ==================== */
/* = Photography Page = */
/* ==================== */

#pagePhotography{
	width: 900px;
	margin-left: 10px;
}

#pagePhotography #pieceList{width: 400px;}

/* the links to current and browse in the photoblog */
#photoblogNav{
	padding-bottom: 10px;
	float: right;
}

#pictureDiv{
	float: left;
	clear: both;
}

#pictureDiv.loading{background: url(/images/loading.gif) no-repeat center center;}


/* Photo All Section */

#photoAll{
	float: left;
	width: 675px; /* make 900px to test row placement; 675 normally */
	margin-left: 110px;
	margin-top: 15px;
	padding-bottom: 40px;
	font-size: 11pt;
	text-align: center;
}

#photoAll a{text-decoration: none;}

#photoAll ul{
	list-style: none;
	margin: 0px;
	margin-top: 5px;
	padding: 0px;
}

#photoAll ul img{
	border: 0px;
	padding: 0px;
	float: left;
}

#photoAll a.on:link{color: #444; text-decoration: none; padding: 0 1px 2px 1px; background: #f3f4d3;}
#photoAll a.on:active{color: #444; text-decoration: none; padding: 0 1px 2px 1px; background: #f3f4d3;}
#photoAll a.on:visited{color: #444; text-decoration: none; padding: 0 1px 2px 1px; background: #f3f4d3;}
#photoAll a.on:hover{color: #444; text-decoration: none; padding: 0 1px 2px 1px; background: #f3f4d3;}


/* =================== */
/* = Web Design Page = */
/* =================== */

#pageWeb{margin-left: 15px;}

#pageWeb #pieceList{
	padding-right: 30px;
	width: 300px;
}

#pageWeb #pieceContent{
	font-size: 10pt;
	font-style: normal;
	float: left;
	width: 500px;
	margin: 0 0 0 -2px;
	padding: 0 0 30px 20px;
	color: #444;
	border-style: solid;
	border-width: 0 0 0 2px;
	border-color: #f3f4d3;
}

#pageWeb img{
	padding: 5px 0 5px 0;
	border: 0px;
}

a.webTitle:link{color: #444; text-decoration: none; font-size: 16px;}
a.webTitle:active{color: #444; text-decoration: none; font-size: 16px;}
a.webTitle:visited{color: #444; text-decoration: none; font-size: 16px;}
a.webTitle:hover{color: #444; text-decoration: underline; font-size: 16px;}


/* ============== */
/* = Links Page = */
/* ============== */

/* text columns for index and links page */
div.linksText{
	width: 430px;
	color: #444;
	float: left;
	margin-left: 15px;
	font-size: 16px;
	font-style: oblique;
}

/* headers in text columns */
.linksText h1{
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
	margin-bottom: 5px;
}


/* ============================================================= */
/* = Index Circular Menu - Inspired by CSSplay's Circular Menu = */
/* ============================================================= */

#outer{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 500px;
	height: 500px;
	margin-left: -250px; /* half of width */
	margin-top: -250px;  /* half of height */
}

#index{padding: 0; margin: 0 auto; list-style: none; position: relative; width: 500px; height: 500px; background:url(/images/index/background.gif) no-repeat;}
#index li{display: block; width: 120px; height: 120px; position: absolute; overflow: hidden;}
#index li a{text-decoration: none;}
#index li a b{
	position: relative;
	bottom: 100px;
}

#index li.bio{display: block; position: ablsolute; left: 190px; top: 4px;}
#index a.bio_off{display: block; width: 120px; height: 120px; background:url(/images/index/bio.gif) 0 0 no-repeat;}
#index a.bio_on{display: block; width: 120px; height: 120px; background:url(/images/index/bio.gif) -120px 0px;}

#index li.composition{left: 380px; top: 235px;}
#index a.composition_off{display: block; width: 120px; height: 120px; background:url(/images/index/composition.gif) 0 0 no-repeat;}
#index a.composition_on{display: block; width: 120px; height: 120px; background:url(/images/index/composition.gif) -120px 0px;}

#index li.recordings{display: block; position: ablsolute; left: 40px; top: 75px;}
#index a.recordings_off{display: block; width: 120px; height: 120px; background:url(/images/index/recordings.gif) 0 0 no-repeat;}
#index a.recordings_on{display: block; width: 120px; height: 120px; background:url(/images/index/recordings.gif) -120px 0px;}

#index li.graphic{display: block; position: ablsolute; left: 345px; top: 75px;}
#index a.graphic_off{display: block; width: 120px; height: 120px; background:url(/images/index/graphic.gif) 0 0 no-repeat;}
#index a.graphic_on{display: block; width: 120px; height: 120px; background:url(/images/index/graphic.gif) -120px 0px;}

#index li.photo{display: block; position: ablsolute; left: 3px; top: 235px;}
#index a.photo_off{display: block; width: 120px; height: 120px; background:url(/images/index/photography.gif) 0 0 no-repeat;}
#index a.photo_on{display: block; width: 120px; height: 120px; background:url(/images/index/photography.gif) -120px 0px;}

#index li.web{display: block; position: ablsolute; left: 110px; top: 370px;}
#index a.web_off{display: block; width: 120px; height: 120px; background:url(/images/index/web.gif) 0 0 no-repeat;}
#index a.web_on{display: block; width: 120px; height: 120px; background:url(/images/index/web.gif) -120px 0px;}

#index li.links{display: block; position: ablsolute; left: 280px; top: 370px;}
#index a.links_off{display: block; width: 120px; height: 120px; background:url(/images/index/links.gif) 0 0 no-repeat;}
#index a.links_on{display: block; width: 120px; height: 120px; background:url(/images/index/links.gif) -120px 0px;}


/* =================== */
/* = Inside Top Menu = */
/* =================== */

#menu{
	float: left;
	margin: 10px 0 50px 10px;
	padding: 0px;
	width: 900px;
}

#menu li{
	list-style: none;
	float: left;
	overflow: hidden;
}

#menu li a{
	margin-right: 40px;
	text-decoration: none;
}

#menu li a b{
	position: relative;
	bottom: 100px;
}

#menu a.bio_off{float: left; display: block; width: 90px; height: 90px; background:url(/images/inside/bio.gif) 0 0 no-repeat;}
#menu a.bio_on{float: left; display: block; width: 90px; height: 90px; background:url(/images/inside/bio.gif) -90px 0 no-repeat;}

#menu a.composition_off{float: left; display: block; width: 90px; height: 90px; background:url(/images/inside/composition.gif) 0 0 no-repeat;}
#menu a.composition_on{float: left; display: block; width: 90px; height: 90px; background:url(/images/inside/composition.gif) -90px 0 no-repeat;}

#menu a.recordings_off{float: left; display: block; width: 90px; height: 90px; background:url(/images/inside/recordings.gif) 0 0 no-repeat;}
#menu a.recordings_on{float: left; display: block; width: 90px; height: 90px; background:url(/images/inside/recordings.gif) -90px 0 no-repeat;}

#menu a.graphic_off{float: left; display: block; width: 90px; height: 90px; background:url(/images/inside/graphic.gif) 0 0 no-repeat;}
#menu a.graphic_on{float: left; display: block; width: 90px; height: 90px; background:url(/images/inside/graphic.gif) -90px 0 no-repeat;}

#menu a.photo_off{float: left; display: block; width: 90px; height: 90px; background:url(/images/inside/photography.gif) 0 0 no-repeat;}
#menu a.photo_on{float: left; display: block; width: 90px; height: 90px; background:url(/images/inside/photography.gif) -90px 0 no-repeat;}

#menu a.web_off{float: left; display: block; width: 90px; height: 90px; background:url(/images/inside/web.gif) 0 0 no-repeat;}
#menu a.web_on{float: left; display: block; width: 90px; height: 90px; background:url(/images/inside/web.gif) -90px 0 no-repeat;}

#menu a.links_off{float: left; display: block; width: 90px; height: 90px; background:url(/images/inside/links.gif) 0 0 no-repeat;}
#menu a.links_on{float: left; display: block; width: 90px; height: 90px; background:url(/images/inside/links.gif) -90px 0 no-repeat;}


/* ================= */
/* = Hover Classes = */
/* ================= */

a.previous_off{
	display: block;
	float: left;
	width: 12px;
	height: 15px;
	margin: 2px 0 0 0;
	background: url("/images/previous.gif") 0 0 no-repeat;
}

a.previous_on{
	display: block;
	float: left;
	width: 12px;
	height: 15px;
	margin: 2px 0 0 0;
	background: url("/images/previous.gif") 0 -15px no-repeat;
}

a.next_off{
	display: block;
	float: left;
	width: 12px;
	height: 15px;
	margin: 2px 0 0 0;
	background: url("/images/next.gif") 0 0 no-repeat;
}

a.next_on{
	display: block;
	float: left;
	width: 12px;
	height: 15px;
	margin: 2px 0 0 0;
	background: url("/images/next.gif") 0 -15px no-repeat;
}

img.nextPreviousGray{
	display: block;
	float: left;
	width: 12px;
	height: 15px;
	margin: 2px 0 0 0;
}


/* =============== */
/* = Logo Design = */
/* =============== */

#logo{color: #444;}

img#logoTitle{
	float: left;
	margin-left: 170px;
	margin-bottom: 30px;
}

#formContainer{
	float: left;
	width: 650px;
	margin-left: 120px;
}

span#formNotice{
	float: left;
	clear: both;
	margin-bottom: 20px;
}

#formContainer form{
	float: left;
	width: 430px;
	margin-left: 40px;
}

td.inputLabel{width: 120px;}

span.logoTextAreaLabel{
	margin-bottom: 5px;
	float: left;
}

#formContainer form table td{border-bottom: 20px solid #bbd199;}

span.logoLabel{
	position: relative;
	top: 2px;
}

input.mailform_input{width: 290px;}

#formContainer form textarea{
	padding: 5px;
	width: 410px;
	resize: none;
	float: left;
}

#logoBelow{
	float: left;
	clear: both;
	width: 880px;
	font-size: 12px;
	text-align: center;
	margin: 20px 0px 20px 0px;
}

/* ===================== */
/* = Logo Form Borders = */
/* ===================== */

#logoT{
	background: url("/images/logo/t.jpg") 0 0 repeat-x;
	width: 530px;
	height: 30px;
	float: left;
}

#logoB{
	background: url("/images/logo/b.jpg") 0 0 repeat-x;
	width: 530px;
	height: 30px;
	margin-top: 30px;
	float: left;
}

#logoL{
	background: url("/images/logo/l.jpg") 0 0 repeat-y;
	width: 60px;
	height: 2375px;
	float: left;
}

#logoR{
	background: url("/images/logo/r.jpg") 0 0 repeat-y;
	width: 30px;
	height: 2375px;
	float: right;
}

#logoTL{
	background: url("/images/logo/tl.jpg") 0 0 no-repeat;
	width: 60px;
	height: 60px;
	float: left;
	clear: left;
}

#logoTR{
	background: url("/images/logo/tr.jpg") 0 0 no-repeat;
	width: 60px;
	height: 60px;
	float: left;
	clear: right;
}

#logoBL{
	background: url("/images/logo/bl.jpg") 0 0 no-repeat;
	width: 60px;
	height: 60px;
	float: left;
	clear: left;
}

#logoBR{
	background: url("/images/logo/br.jpg") 0 0 no-repeat;
	width: 60px;
	height: 60px;
	float: left;
	clear: right;
}


/* ========= */
/* = Admin = */
/* ========= */
table#adminPictureTable{
	border-collapse: collapse;
	cellpadding: 5px;
}

table#adminPictureTable td{padding: 5px;}

table#adminPictureTable td.number{padding-left: 10px;}

tr#adminTopRow{font-weight: bold;}

td.number{width: 40px;}
td.id, td.year, td.width, td.height, td.anImage, td.adminEdit{width: 75px;}
td.title{width: 215px;}
td.info{width: 300px;}

#adminNumber, #adminID, #adminYear, #adminWidth, #adminHeight,
#adminAddNumber, #adminAddID, #adminAddYear, #adminAddWidth, #adminAddHeight{width: 50px;}
#adminTitle, #adminAddTitle{width: 190px;}
#adminInfo{width: 275px;}

#adminAddDiv{display: none;}

#adminTableVar{display: none;}

#picturePreview{
	display: none;
	position: fixed;
	top: 5px;
	left: 5px;
}


/* ======== */
/* = Tags = */
/* ======== */

#allTags{
	line-height: 25px;
	text-align: justify;
	font-size: 40px;
}

#allTags a.tagCount1{font-size: 13px;}
#allTags a.tagCount2{font-size: 14px;}
#allTags a.tagCount3{font-size: 15px;}
#allTags a.tagCount4{font-size: 16px;}
#allTags a.tagCount5{font-size: 17px;}
#allTags a.tagCount6{font-size: 18px;}
#allTags a.tagCount7{font-size: 19px;}
#allTags a.tagCount8{font-size: 20px;}
#allTags a.tagCount9{font-size: 21px;}
#allTags a.tagCount10{font-size: 22px;}
#allTags a.tagCount11{font-size: 23px;}
#allTags a.tagCount12{font-size: 24px;}
#allTags a.tagCount13{font-size: 24px;}
#allTags a.tagCount14{font-size: 25px;}
#allTags a.tagCount15{font-size: 26px;}
#allTags a.tagCount16{font-size: 27px;}
#allTags a.tagCount17{font-size: 28px;}
#allTags a.tagCount18{font-size: 29px;}
#allTags a.tagCount19{font-size: 30px;}
#allTags a.tagCount20{font-size: 31px;}
#allTags a.tagCount21{font-size: 32px;}
#allTags a.tagCount22{font-size: 33px;}


/* =========================== */
/* = Tags list on each photo = */
/* =========================== */

span#tags{color: #7A8E5A;}
span#tags a{color: #7A8E5A;}
span#tags a:hover{color: #444;}