/*
	MAIN PRESENTATION ITEMS
*/


body	{
	text-align: center;
	color: #211;
	font-family: helvetica, arial, sans-serif;
	font-size: 80%; /* 76% is smallest */
	margin: 0;
	border: 0;
	padding: 0 12px 0 12px;
	background-color: #bbb;
	background-image: url(http://www.halfofone.com/i/diagonalccc-bg.gif);
	background-repeat: repeat;
	background-position: top left;
	}

img		{
	display: block;
	border: 0;
	}


/*
	WEBSITE CONTAINER
*/


#sitewrap	{
	margin: 0px auto;
	border: 0;
	padding: 0 3px 0 3px; /* subtract 6 for the bmh */
	background-color: #aaa;
	background-image: url(/i/sitewrapbgtrans.gif);
	background-repeat: repeat-y;
	background-position: top left;
	width: 706px;  /* bmh */
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 700px;
	}
html> div#sitewrap {
	width: 700px;
	}


/*
	TOP, NAV, TITLE-HOME, NAV LINKS
*/

#top	{
	text-align: left;
	margin: 0;
	border-top: 1px solid #eaeaea;
	padding: 0; /* was 2px at top */
	background-color: transparent;
/*	
background-image: url(/i/topedgegradbg.gif);
background-repeat: repeat-x;
background-position: top left;
*/
	width: 700px;
	height: 90px;
	}

#nav	{
	margin: 0;
	border-top: 1px solid #ccc;
	padding: 0;
	background-color: #999;
	width: 700px;
	height: 48px;
	}
#nav h1	{
	float: left;
font-size: 1em; /* ensure h1 is 1em, then specify size in a */
line-height: 1em; /* ensure consistent line-height */
	margin: 0;
	border: 0;
	padding: 0;
	background-color: transparent;
width: 274px; /* must use width */
height: 48px; /* OK height too */
	}

a.homelink:link, a.homelink:visited {/* img based button NOW */
	display: block;
	font-size: 2.3em;
	font-weight: normal;
	text-decoration: none;
	color: #633;
	margin: 0;
	border: 0;
	padding: 0;
width: 274px;
height: 48px;
background-color: transparent;
background-image: url(/i/TV.gif);
background-repeat: no-repeat;
background-position: top left;
	}
a.homelink:hover {
	display: block;
	font-size: 2.3em;
	font-weight: normal;
	text-decoration: none;
	color: #211;
	margin: 0;
	border: 0;
	padding: 0;
width: 274px;
height: 48px;
background-color: transparent;
background-image: url(/i/TV-over.gif);
background-repeat: no-repeat;
background-position: top left;
	}
a.homelink:active {
	display: block;
	font-size: 2.3em;
	font-weight: normal;
	text-decoration: none;
	color: #633;
	margin: 0;
	border: 0;
	padding: 0;
width: 274px;
height: 48px;
background-color: transparent;
background-image: url(/i/TV.gif);
background-repeat: no-repeat;
background-position: top left;
	}
a.homeover:link, a.homeover:visited {background-image: url(/i/TV-over.gif);}
a.homeover:active {background-image: url(/i/TV-over.gif);}

#nav ul {
	float: right;
/*	text-align: right;  */
	margin: 0;
	border: 0;
	padding: 0;
	width: 210px;
	}
#nav ul li {/* img based buttons NOW */
	list-style: none;
float: left;
	margin: 0;
	border: 0;
	padding: 0;
	height: 48px;
	}
	
a.portlink:link, a.portlink:visited {/* img based buttons NOW */
display: block;
	font-size: 1.3em;
	font-weight: bold;
	text-decoration: none;
	color: #966;
	margin: 0;
	border: 0;
	padding: 0;
width: 93px;
height: 48px;
background-color: transparent;
background-image: url(/i/port.gif);
background-repeat: no-repeat;
background-position: top left;
	}
a.portlink:hover {
display: block;
	font-size: 1.3em;
	font-weight: bold;
	text-decoration: none;
	color: #633;
	margin: 0;
	border: 0;
	padding: 0;
width: 93px;
height: 48px;
background-color: transparent;
background-image: url(/i/port-over.gif);
background-repeat: no-repeat;
background-position: top left;
	}
a.portlink:active {
display: block;
	font-size: 1.3em;
	font-weight: bold;
	text-decoration: none;
	color: #966;
	margin: 0;
	border: 0;
	padding:  0;
width: 93px;
height: 48px;
background-color: transparent;
background-image: url(/i/port.gif);
background-repeat: no-repeat;
background-position: top left;
	}
a.portover:link, a.portover:visited {background-image: url(/i/port-over.gif);}
a.portover:active {background-image: url(/i/port-over.gif);}

a.infolink:link, a.infolink:visited {/* img based buttons NOW */
display: block;
	font-size: 1.3em;
	font-weight: bold;
	text-decoration: none;
	color: #966;
	margin: 0;
	border: 0;
	padding: 0;
width: 117px;
height: 48px;
background-color: transparent;
background-image: url(/i/info.gif);
background-repeat: no-repeat;
background-position: top left;
	}
a.infolink:hover {
display: block;
	font-size: 1.3em;
	font-weight: bold;
	text-decoration: none;
	color: #633;
	margin: 0;
	border: 0;
	padding: 0;
width: 117px;
height: 48px;
background-color: transparent;
background-image: url(/i/info-over.gif);
background-repeat: no-repeat;
background-position: top left;
	}
a.infolink:active {
display: block;
	font-size: 1.3em;
	font-weight: bold;
	text-decoration: none;
	color: #966;
	margin: 0;
	border: 0;
	padding:  0;
width: 117px;
height: 48px;
background-color: transparent;
background-image: url(/i/info.gif);
background-repeat: no-repeat;
background-position: top left;
	}
a.infoover:link, a.infoover:visited {background-image: url(/i/info-over.gif);}
a.infoover:active {background-image: url(/i/info-over.gif);}

/*
	SUBNAV
*/

#subnav	{
clear: both;
	margin: 0;
	border: 0;
	padding: 0;
	background-color: #aaa;
	width: 700px;
	height: 36px;
	}

#subnav ul {
/*	float: right; */
	list-style: none;
/*	text-align: center; */
	margin: 0 0 0 373px; /* move the ul over to the right side */
	border: 0;
/*	border-top: 1px solid #ccc; for testing only */
	padding: 0;
	width: 327px;
	}
#subnav ul li.prev {
	display: block;
	float: left;
	text-align: right;
	margin: 0;
	border: 0;
	padding: 0;
	width: 115px;
	}
#subnav ul li.dividercenter {
	display: block;
	float: left;
	text-align: center;
	margin: 0;
	border: 0;
	padding: 0;
	width: 97px;
	}
#subnav ul li.next {
	display: block;
	float: left;
	text-align: left;
	margin: 0;
	border: 0;
	padding: 0;
	width: 115px;
	}

a.subnavlink:link, a.subnavlink:visited {
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
	color: #633;
	margin: 0;
	border: 0;
	padding: 3px;
	background-color: transparent;
	}
a.subnavlink:hover {
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
	color: #111;
	margin: 0;
	border: 0;
	padding: 3px;
	background-color: transparent;
	}
a.subnavlink:active {
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
	color: #633;
	margin: 0;
	border: 0;
	padding: 3px;
	background-color: transparent; 
	}



/*
	CONTENT LAYOUT
*/

div#contentwrap {
	font-size: 0.9em;
	line-height: 1.4em;
	text-align: left;
	margin: 0;
	border: 0;
	padding: 1px 12px 32px 12px; /* l+r= 24 */
	background-color: transparent;
	width: 700px;  /* bmh */
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 676px;
	}
html> div#contentwrap {
	width: 676px;
	}

div#full {
	margin: 0;
	border: 0;
	padding: 1px 102px 0 78px; /* l+r= 180 */ 
	background-color: transparent;
	width: 676px;  /* bmh */
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 496px;
	}
html> div#full {
	width: 496px;
	}

.setwrap	{/* just a simple container */
	}

div.whole	{/* no right padding needed */
	margin: 0;
	border: 0;
	padding: 1px 0px 0 21px; /* l+r= 21 */ 
	background-color: transparent;
	width: 676px;  /* bmh */
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 655px;
	}
html> div.whole {
	width: 655px;
	}
div.underwhole	{
	margin: 0;
	border: 0;
	padding: 3px 0 0 36px;
}

div.halfleft	{/* padding-left: 21px; to make 33px */
float: left;
	margin: 0;
	border: 0;
	padding: 1px 17px 0 21px; /* l+r= 38 */ 
	background-color: transparent;
	width: 338px;  /* bmh */
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 300px;
	}
html> div.halfleft {
	width: 300px;
	}
div.halfright	{/* no right padding needed */
float: right;
	margin: 0;
	border: 0;
	padding: 1px 0 0 18px; /* l+r= 18 */ 
	background-color: transparent;
	width: 338px;  /* bmh */
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 320px;
	}
html> div.halfright {
	width: 320px;
	}

div.twothirdsleft	{/* padding-left: 21px; to make 33px */
float: left;
	margin: 0;
	border: 0;
	padding: 1px 0 0 21px; /* l+r= 21 */ 
	background-color: transparent;
	width: 441px;  /* bmh */
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 420px;
	}
html> div.twothirdsleft {
	width: 420px;
	}
div.thirdright	{/* no right padding needed or left */
float: right;
	margin: 0;
	border: 0;
	padding: 1px 0 0 0; /* l+r= 0 */ 
	background-color: transparent;
	width: 235px;
	}

div.thirdleft	{/* padding-left: 21px; to make 33px */
float: left;
	margin: 0;
	border: 0;
	padding: 1px 0 0 21px; /* l+r= 21 */ 
	background-color: transparent;
	width: 235px;  /* bmh */
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 214px;
	}
html> div.thirdleft {
	width: 214px;
	}
div.twothirdsright	{/* no right padding needed or left */
float: right;
	margin: 0;
	border: 0;
	padding: 1px 0 0 33px; /* l+r= 18 */ 
	background-color: transparent;
	width: 441px;  /* bmh */
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 408px;
	}
html> div.twothirdsright {
	width: 408px;
	}


/*
	BOT, h1, END GRADIENT
*/

div#bot	{
clear: both;
	font-size: 0.9em;
	line-height: 1.4em;
	text-align: right;
	margin: 0;
	border: 0;
	padding: 9em 0 0 0;
	background-color: transparent;
	width: 676px;
	}

div#logo {
	float: right;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	background-image: url(/i/h1logo.gif);
	background-repeat: no-repeat;
	background-position: top left;
	width: 16px;
	height: 16px;
}
a#h1logo:link, a#h1logo:visited {
display: block;
	font-weight: bold;
	text-decoration: none;
	color: #633;
	margin: 0;
	border: 0;
	padding: 0;
	background-color: transparent;
	height: 16px;
	width: 16px;
	}
a#h1logo:hover {
display: block;
	font-weight: bold;
	text-decoration: none;
	color: #211;
	margin: 0;
	border: 0;
	padding: 0;
	background-color: transparent;
	background-image: url(/i/h1logo-over.gif);
	background-repeat: no-repeat;
	background-position: top left;
	height: 16px;
	width: 16px;
	}
a#h1logo:active {
display: block;
	font-weight: bold;
	text-decoration: none;
	color: #633;
	margin: 0;
	border: 0;
	padding: 0;
	background-color: transparent; 
	height: 16px;
	width: 16px;
	}

#endgradient	{
	margin: 0px auto;
	border: 0;
	padding: 0 15px 0 15px; /* subtract 30 for the bmh */
	background-color: transparent;
	background-image: url(/i/end.gif);
	background-repeat: repeat-y;
	background-position: top left;
height: 50px; /* or more */ 
	width: 706px;  /* bmh */
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 676px;
	}
html> div#endgradient {
	width: 676px;
	}


/*
	LINKS
*/

a:link, a:visited {
	text-decoration: none;
	color: #633;
	background: transparent; 
	}
a:hover {
	text-decoration: none;
	color: #211;
	background: transparent; 
	}
a:active {
	text-decoration: none;
	color: #633;
	background: transparent;  
	}

a.plink:link, a.plink:visited {font-weight: bold;}
a.plink:hover {font-weight: bold;}
a.plink:active {font-weight: bold;}


/*
	TYPOGRAPHY
*/

h1	{/* Timothy Vermeulen home title link */
font-size: 1em; /* ensure h1 is 1em, then specify size in a */
line-height: 1em; /* ensure consistent line-height */
margin: 0;
border: 0;
padding: 0;
	}

h2	{/* section titles (unused, due to efficiently designed nav) */
	}

h3	{/* subtitle, set titles  */
	color: #555;
	font-size: 1.4em; /* 1 tenth larger to compensate for 0.9em in contentwrap */
	font-weight: bold;
	line-height: 1.3em;
	margin: 20px 0 0 0; /* make this area fixed, not scalable */
	border: 0;
	padding: 0;
	}
h3.set	{ }
h3.subtitle	{margin: 1.4em 0 0 0;}

h4	{/* piece titles */
	color: #6b6b6b;
	font-size: 1.4em; /* 1 tenth larger to compensate for 0.9em in contentwrap */
	font-weight: bold;
	text-decoration: none;
	line-height: 1.3em;
	margin: 1.3em 0 0 0;
	border: 0;
	padding: 0;
	}
h4.piece	{margin: 0.4em 0 0 0;}

h5	{/* */
	color: #444;
	font-size: 1.2em;
	font-weight: bold;
	font-style: normal;
	line-height: 1.2em;
	margin: 1.2em 0 0 0;
	border: 0;
	padding: 0;
	}
h5.setdate	{margin: 0 0 0 0; font-size: 1.2em; color: #6b6b6b;}
h5.piecedate	{margin: 0 0 0 0; font-size: 1.2em; color: #6b6b6b;}
span.piecedate	{line-height: 1em; color: #666;}

h6	{/* */
	color: #444;
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
	line-height: 1.2em;
	margin: 1.2em 0 0 0;
	border: 0;
	padding: 0;
	}
h6.piececaption	{color: #6b6b6b; margin: 0.6em 0 0 0; padding: 0 0 0 6px;}

ul	{
	list-style-type: disc;
	margin: 1em 0 0 0;
	border: 0;
	padding-left: 24px;
	}
ul li	{
	list-style-type: disc;
	list-style-position: inside;
	line-height: 1.4em;
	margin: 0;
	border: 0;
	padding: 0;
	}

ol	{
	list-style-type: decimal;
	margin: 1em 0 0 0;
	border: 0;
	padding-left: 24px;
	}
ol li	{
	list-style-type: decimal;
	list-style-position: inside;
	line-height: 1.4em;
	margin: 0;
	border: 0;
	padding: 0;
	}

ol.ualpha	{
	list-style-type: upper-alpha;
	margin: 1em 0 0 0;
	border: 0;
	padding-left: 24px;
	}
ol.ualpha li	{
	list-style-type: upper-alpha;
	list-style-position: inside;
	line-height: 1.4em;
	margin: 0;
	border: 0;
	padding: 0;
	}

ul.nobullets	{
	list-style-type: none;
	margin: 1em 0 0 0;
	border: 0;
	padding-left: 24px;
	}
ul.nobullets li	{
	list-style-type: none;
	list-style-position: inside;
	line-height: 1.4em;
	margin: 0;
	border: 0;
	padding: 1px 2px 2px 4px;
	}

ul.infolist	{
	list-style-type: none;
	margin: 1em 0 0 0;
	border: 0;
	padding-left: 24px;
	}
ul.infolist li	{
	list-style-type: none;
	list-style-position: outside; /* inside and nothing causes more space for PC IE and but is otherwise unnecessary */
	line-height: 1.4em;
	margin: 0;
	border: 0;
	padding: 1px 2px 2px 4px;
	}
ul.infolist li.yang	{background-color: #a4a4a4; padding: 1px 2px 2px 4px; /* 1 step darker #999 */ }
ul.infolist li.yin	{background-color: #b2b2b2; padding: 1px 2px 2px 4px; /* 1 step lighter #bbb */ }

ul.details	{
	list-style-type: none;
	margin: 0.8em 0 0 0;
	border: 0;
	padding: 0;
	}
ul.details li	{
	color: #555; /* lighten typography so as not to overwhelm the title data with too much contrast */
	font-weight: bold; /* but keep it a substantial weight on the page */
	list-style-type: none;
	list-style-position: inside;
	line-height: 1.4em;
	margin: 0;
	border: 0;
	padding: 1px 0 1px 0;
	}

ul.setlistmisc	{/* single column list for miscellaneous */
	list-style-type: none;
	margin: 1em 0 0 0;
	border: 0;
	padding: 0;
	}
ul.setlistmisc li	{
	list-style-type: none;
	list-style-position: inside;
	line-height: 1.4em;
	margin: 0;
	border: 0;
	padding: 0;
	}

ol.setlist	{/* single column list */
	list-style-type: decimal;
	margin: 1em 0 0 0;
	border: 0;
	padding: 0;
/*	width: 320px;  2px less than max width in halfright col */
	}
ol.setlist li	{
	list-style-type: decimal;
	list-style-position: inside;
	line-height: 1.4em;
	margin: 0;
	border: 0;
	padding: 0;
	}

ol.setlistdual	{/* dual column list */
	list-style-type: decimal;
	margin: 1em 0 0 0;
	border: 0;
	padding: 0;
/*	width: 320px;  max width in halfright col */
	}
ol.setlistdual li	{
/*	float: left; specifying the width means no float */
	list-style-type: decimal;
	list-style-position: inside;
	line-height: 1.4em;
	margin: 0;
	border: 0;
	padding: 0;
/*	width: 150px;  causing PC IE to reset the numbering for each item to 1 */
	}
ol.setlistdual li.col2half	{margin-left: 166px;}
ol.setlistdual li.col2third	{margin-left: 208px;}

p {
	margin: 1em 0 0 0;
	border: 0;
	padding: 0;
	}
p.indent {
	margin: 1em 0 0 36px;
	border: 0;
	padding: 0;
	}

strong {font-weight: bold;}
em {}

/*
	OTHER PRESENTATION
*/

.alt {display: none;}
.smaller {font-size: .9em;}
.nomargin {margin: 0 0 0 0;}
.middle {display: inline; vertical-align: middle;}

img.shadow {
	margin: 0;
	border: 0;
	padding: 0 0 3px 3px;
	background-color: transparent;
	background-image: url(/i/imgshadow-l.gif);
	background-position: bottom left;
	}
img.shadow-h {
	margin: 0;
	border: 0;
	padding: 0 0 3px 3px;
	background-color: transparent;
	background-image: url(/i/imgshadow-l.gif);
	background-position: bottom left;
	}
img.shadow-v {
	margin: 0 0 0 24px;
	border: 0;
	padding: 0 0 3px 3px;
	background-color: transparent;
	background-image: url(/i/imgshadow-l.gif);
	background-position: bottom left;
	}

span.pc {/* private collections */
	font-weight: bold;
	text-decoration: none;
	color: #966;
	margin: 0;
	border: 0;
	padding: 0;
	background-color: transparent;
	}