@charset "utf-8";
/* PLEASE NOTE: Lowercase comments throughout the site are automatically inserted by Adobe Dreamweaver. Comments with uppercase and grammar are manually inserted by Diane for ease of navigation. */

/* The body is the first layer of the page, setting the background image of the night sky. */
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	background: #080822;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	background-color: #080822;
	background-image: url(images/SbN_bg1.jpg);
	background-repeat: repeat;
}
/* This is the font style of links. */
a,a:link,a:visited {
color:#567089; /* #88ad3c;*/
text-decoration:underline;
}
/* This makes the font style of a link change when the mouse hovers over it. */
a:hover {
color:#000217;
}
/* This is the second layer of the page, used to position the other layers on top of it. */
.twoColFixRtHdr #container { 
	width: 1000px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: transparent;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0;
	padding: 0;
} 
/* This is what holds the logo and navigation at the top of the page. */
.twoColFixRtHdr #header { 
	background: transparent; 
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	color:#FFFFFF;
} 
/* This is the transparent box around the Google Leaderboard ad in the header. */
.twoColFixRtHdr #adboxtransparency {
	margin: 0 auto;
	border: 0;
	padding: 4px;
	width:737px;
	text-align: center;
}
/* This is the third layer of the page, centering all the layers on top of it. */
.twoColFixRtHdr #centerTransp {
	margin: 0;
	padding: 0;
	border: 0;
	background:transparent;
	text-align: center;
}
/* This is the fourth layer of the page, creating the transparency between the dividers so the body background image can be seen through the gaps. */
.twoColFixRtHdr #transparency {
	margin: 0 auto;
	border: 0;
	padding: 18px;
	width:900px;
	text-align: left;
}
/* ALTERNATE - Store page only - This is the fourth layer of the page, creating the transparency between the dividers so the body background image can be seen through the gaps. */
.twoColFixRtHdr #storetransparency {
	margin: 0 auto;
	border: 0;
	padding: 18px;
	width:1040px;
	text-align: left;
}
/* This is what holds the vote, follow, and donate buttons on the right side of the page. */
.twoColFixRtHdr #sidebar1 {
	float: right; /* since this element is floated, a width must be given */
	width: 160px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	background: #DDD; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 0px 10px 10px 10px;
	font-size:12px;
}
/* This is what holds the main content sections to the left of the sidebar. */
.twoColFixRtHdr #mainContent { 
	margin: 0 182px 0 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	width:682px;
	padding: 10px 10px 10px 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background:#DDD;
	font-size:12px;
} 
/* Same as above with no margin. */
.twoColFixRtHdr #indexContent { 
	margin: 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	width:682px;
	padding: 10px 10px 10px 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background:#DDD;
	font-size:12px;
} 
/* This is what holds the web comic pages and takes up the entire center of the page. */
.twoColFixRtHdr #storyContent { 
	margin: 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	width:880px;
	padding: 10px 10px 10px 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background:#DDD;
	text-align:center;
	font-size:12px;
} 
/* This is what holds the flyingcart store and takes up the entire center of the page. */
.twoColFixRtHdr #storeContent { 
	margin: 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	width:1020px;
	padding: 10px 10px 10px 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background:#DDD;
	text-align:center;
	font-size:12px;
} 
/* This is what holds the copyright information at the bottom of the page. */
.twoColFixRtHdr #footer { 
	padding: 5px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	color: #FFFFFF;
} 
/* This is the font style for the copyright div. */
.twoColFixRtHdr #sbnfooter {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
	background: #080822;
	color:#FFFFFF;
	font-size:12px;
	text-align: center;
}
/* This is the repeating image of the Almanac scroll's middle section, used to expand and collapse with the JavaScript located on that page so that text never falls out of the scroll image. */
.twoColFixRtHdr #almscrollmiddle {
	background-image: url(images/almscrollmiddle.jpg);
	background-repeat: repeat-y;
	width: 500px;
	padding: 25px;
}
/*This is used with the Almanac JavaScript to create expandable/collapsible sections within the scroll image. */
    .almsquarebox {
        width: 100%;
        border: none;
        overflow: hidden; }
    .almsquareboxgradientcaption {
        color: #000;
        padding: 5px;
		border: none; }
    .almsquareboxcontent {
        background-color: #FFC;
        padding: 10px;
        overflow: hidden;
        border: none; }
/* This is used with the Story pages' JavaScript to create the expandable/collapsible Journal section at the bottom of each Story page. */
	.pgsquarebox {
        width: 100%;
        border: none;
        text-align: center;
        overflow: hidden; }
    .pgsquareboxgradientcaption {
        color: #000000;
		text-align:center;
        padding: 5px;
		border: none; }
    .pgsquareboxcontent {
        background-color: #FFC;
        padding: 10px;
        overflow: hidden;
        border: none; }
/* NEW */

/* This is the second layer of the page, used to position the other layers on top of it. */
.twoColFixRtHdr #sbncontainer { 
	width: 1100px; 
	background: transparent;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0;
	padding: 0;
}
/* This is the fourth layer of the page, creating the transparency between the dividers so the body background image can be seen through the gaps. */
.twoColFixRtHdr #sbntransparency {
	margin: 0 auto;
	border: 0;
	padding: 18px;
	width:1040px;
	text-align: left;
}
/* This is what holds the main content sections between the sidebars. */
.twoColFixRtHdr #sbnmainContent { 
	margin: 0 185px 0 0; /* the margins here make room for the float classes. */
	width:782px;
	padding: 10px 10px 10px 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background:#DDD;
	font-size:12px;
} 
/* This is what holds the web comic pages and takes up the entire center of the page. */
.twoColFixRtHdr #sbnstoryContent { 
	margin: 0; 
	width:980px;
	padding: 10px 10px 10px 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background:#DDD;
	text-align:center;
	font-size:12px;
} 
/* This is what holds the vote, follow, and donate buttons on the right side of the php page. */
.twoColFixRtHdr #sidebar_right {
	margin: 0 0 0 10px; /* this adds the margin to the right side of the sidebar within the transparence. */
	width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	background: #DDD; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 10px 10px 10px 10px;
	font-size:12px;
	text-align: center;
}
/* This is used as a backup code for browsers that don't support the transparency used above. */
.alpha60 {
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(204, 204, 204);
	/* RGBa with 0.6 opacity */
	background: rgba(204, 204, 204, 0.5);
	/* For IE 5.5 - 7*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCCCCC, endColorstr=#CCCCCC);
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCCCCC, endColorstr=#CCCCCC)";
}
/* This is the old Almanac page's font style for the frame in which Almanac content appears. */
.frameblank {
	background-color:#DDD;
	color:#000000;
	border:0;
	text-align:left;
	padding:5px;
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}