/* Blosxcss Demonstration Style

		If your blosxcss folder is not accessible at /blosxcss,
		then you need to adjust the url('') tag below.

 */
/* <blosxcss description="This is a demonstration layout that shows the various div's." > */
/* <blosxcss name="Demonstration" > */
/*
	This is a demo style that highlights all div's, so that you
	can see how the layout works.
	
	This is styled after the default theme from blosxom,
	with a few slight modifications.
	
	The biggest is that the blue background to the navigation panel
	on the left was changed to a background image to improve compatibility
	with CSS and column heights...
	
*/
body {
    font-family: Verdana, Geneva, Arial, sans-serif;
    font-size: 10px;
    color: #333;
    background: #fff
    }
td {
    font-family: Verdana, Geneva, Arial, sans-serif;
    font-size: 10px;
    color: #333
    }
input {
    font-family: Verdana, Geneva, Arial, sans-serif;
    font-size: 10px;
    color: #000
    }
a:link, a:visited, a:active {
    text-decoration: underline
    }
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    color: #333
    }
p {
    text-align: justify;
    margin-bottom: 0.15in;
    margin-top: 0.15in;
    font-family: Verdana, Geneva, Arial, sans-serif;
    font-size: 10px;
    color: #333
    }
div.badges {
    text-align: center
    }
img.badge {
    margin: 1px;
    border: 0;
    text-align: center
    }
div {
    margin: 0;
    border: solid black 1px
    }
div#masthead h1 {
    font-size: 14px;
    font-weight: bold;
    color: #369
    }
div#menubar {
    text-align: center;
    border-top: solid black 1px;
    vertical-align: middle
    }
div#menubar-left {
    float: left;
    text-align: left;
    margin-bottom: 3px;
    margin-top: 2px
    }
div#menubar-right {
    text-align: right;
    margin-right: 5px;
    margin-bottom: 3px;
    margin-top: 2px
    }
div#menubar-close {
    clear: both
    }
div#wrapper {
    clear: both;
    background-color: #ddd;
    background-image: url(/styles/main/images/blosxom/blue.jpg);
    /* Unfortunately, to ensure that the blue box extends to the 
    	bottom of the page, it is best done as a background image.
    	This means that if you want to resize the navpanel column, you
    	need to move or resize the image....  */
    background-repeat: repeat-y;
    background-position: 0 0;
    border-top: solid black 1px;
    border-bottom: solid black 1px
    }
div#navpanel {
    width: 165px;
    font-family: Verdana, Geneva, Arial, sans-serif;
    font-size: 10px;
    color: #333;
    float: left
    }
div#navpanel a {
    display: block
    }
div#navpanel h4 {
    margin-bottom: 0.05in
    }
div.navblock ul {
    padding-left: 0
    }
div.navblock li {
    list-style: none;
    margin: 0
    }
div#altpanel {
    float: right;
    display: none
    }
div#content {
    margin-left: 165px;
    clear: none
    }
div#content h3 {
    font-size: 12px;
    font-weight: bold;
    color: #369
    }
div#footer {
    clear: both;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: solid black 1px
    }
div.story {
    margin-left: 0.15in;
    margin-bottom: 0.15in
    }
h4.story-title {
    font-weight: bold
    }
div.story-body {
    margin-left: 0.15in;
    margin-right: 0.15in
    }
div.story-links {
    text-align: right;
    font-style: italic
    }
div.story-comments-link {
    text-align: right
    }
div.icon {
    float: right;
    margin-left: 0.15in
    }
div.message {
    color: red;
    margin-bottom: 0.15in;
    margin-top: 0.15in
    }
div.indented {
    margin-left: 0.5in;
    margin-bottom: 0.15in
    }
div.writeback-author {
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 10px;
    font-weight: bold
    }
div.writeback-title {
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 10px;
    font-weight: bold
    }
div.writeback-date {
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 10px;
    font-style: italic
    }
div.writeback-body {
    margin-left: 45px;
    margin-right: 45px;
    margin-top: 10px;
    text-align: justify;
    font-family: Verdana, Geneva, Arial, sans-serif;
    font-size: 10px;
    color: #333
    }
div.writeback-body p {
    margin-left: 0;
    margin-right: 0;
    text-align: justify
    }
div.h-divider {
    clear: both;
    position: relative
    }
div.content-area {
    margin: 5px;
    margin-right: 10px
    }
h3.date {
    font-size: 12px;
    font-weight: bold;
    color: #369
    }
.highlight {
    /*	background-color: #447799; */
    background-color: #669acc;
    color: black;
    padding: 5px
    }
.invisible {
    display: none
    }
.message {
    color: #f00
    }
div.clear {
    clear: both
    }
div.writeback-form-row {
    position: relative;
    padding-top: 5px
    }
div.writeback-form-row span.label {
    position: absolute;
    width: 100px;
    text-align: right;
    margin-right: 10px;
    top: 5px
    }
div.writeback-form-row span.input {
    text-align: left;
    margin-left: 110px
    }
div.imagegallery {
    float: left;
    width: 100%;
    margin-bottom: 15px;
    text-align: center
    }
div.imagegallery div.image {
    float: left;
    margin: 3%;
    text-align: center
    }
div.imagegallery div.single-image img {
    /* max-width: 100%;		Not well supported yet */
    width: 100%
    }
div.imagegallery div.image img {
    width: auto
    }
div.imagegallery div.image p {
    text-align: center
    }