body {background: #fff; color: #000; font-family: arial, sans-serif; font-size: 16px; margin: auto; padding: 0 2% 0 2%; max-width: 67em;}

/* menu bar navigation */
#menubar {margin: 0 0 1em; padding: 4px;}
#menubar ul {border: none; color: #000; list-style: none; margin: 0; padding: 0;} 
#menubar ul li {background: #ddd; border: #666 1px solid; float: left; margin: .3em; padding: .2em 1em;}
#menubar ul li.current {background: #ddd; border: #666 1px solid; float: left; margin: .3em; padding: .2em 1em;}
#menubar ul li.skip {border: 0; height: 0; margin: 0; overflow: hidden; padding: 0; position: absolute; width: 0;}
#menubar ul li a {background: none transparent scroll repeat 0 0; border: none; color: #000; display: inline; text-decoration: none;}
#menubar ul li a:active {background: transparent; color: #000;}
#menubar ul li a:visited {background: none transparent scroll repeat 0 0; color: #000;}
#menubar ul li a:hover {background: #ddd; border: none; color: #f00;}

/* Bread crumb navigation using nested lists. */
#breadcrumb {clear: both; font-size: small; padding: 3px;}
#breadcrumb ol {border: none; display: inline; margin-left: 0; margin-right: .5em; padding-left: 0;}
#breadcrumb ol li {border: none; display: inline; list-style: none; margin-left: 0; padding-left: 2px;}

/* sets default link colors for those pages where I set background. */
a:link {color: #00f;}
a:visited {color: #800080;}
a:active {color: #f00;}

.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}
.underline {text-decoration: underline;}

/* to keep lines of text readable length */
p  {max-width: 36em;}
li {max-width: 36em;}
blockquote {max-width: 36em; text-align: justify;}
h1 {max-width: 24em;}
h2 {max-width: 36em;}

/* This has come in handy for making my site more mobile-friendly but still looking good */
.min50vw {min-width: 50vw;}

/* Without this setting, my browser shows bright blue boxes around my graphic link buttons */
img {border: 0 none; max-width: 100%;} 

/* I found this handy now that I am using many floats in my code. */
.clear {clear: both;}

/* for abbreviations. */
abbr {border-bottom: 1px dotted #006400; cursor: help;}

@media print {abbr {border: none;}}

/* for the R in R Band's logo */
.rlogo {background: #fff; color: #f00; font-family: "times new roman", serif;}

/* This is for my sitemap, and others. */
*.col {float: left; min-width: 18em; margin: 1em 2% 1em 0; width: 48%;}
*.coltext {float: left; min-width: 18em; margin-right: 2%; width: 48%;}

/* for captions to images */
p.caption { text-align: center; margin-top: 0;}


/* These were created for the pages about Dennis's customized 4-wheel-drive 1962 Ranchero. */
div.floatleft {clear: both; float: left; margin-right: 1em;}
div.floatright {clear: both; float: right; margin-left: 1em;}

/* These are for the Ranchero gallery of images. */
div.thumbleft {float: left; width: 220px; height: 220px; margin: 1em; text-align: center;}
div.bigleft {float: left; max-width: 45%; margin: 1em;}


/* The following are for R Band material. */

div.lyrics {width: 75%; margin-right: auto; margin-left: auto;}

/* This is for my newer song pages */
.title35 {float: left; max-width: 35em;}

/* This is for most of the older R Band songs. evolutio.htm has title35 class instead. */
.title50 {float: left; max-width: 50em;}
.getreal {float: left; margin: .5em; max-width: 18em;}

/* These styles are for the navigation links at the bottom of the songs and comments pages */
.links-box {clear: both; margin: 1.5% auto; text-align: center; width: 85%;}
.links-row {display: inline-block; margin: 0 2em; max-width: 20em; text-align: center;}


/* The following are for Studies material. */

/* This is to format bibliography entries in research documents. 
Code thanks to J.K.K. in "c.i.w.a.h." newsgroup */
.biblio p {margin-left: 2em; text-indent: -2em;}

.logo {margin: 72pt 0 0}
.notlogo {margin: 3em 0 0}


.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; max-width: 100%; }

.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }