html, body
{
	height: 100%;
	margin: 0;
	padding: 0;
	background: #3d3d3d;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 86.5%;
	color: #fff;
}

a
{
	margin: 0;
	padding: 1px 0;
	text-decoration: none;
	border: none;
	outline: none;
	color: #ddd;
	border-bottom: solid 1px #444;
}

a:hover
{
	color: #fff;
	border-bottom: solid 1px #666;
}


/* Header
------------------------------------------------------------------- */

#header_wrapper
{
	width: 100%;
	height: 83px;
	background: url(../images/top-grad.png) 0 0 repeat-x;
	overflow: hidden;
	position: relative;
	z-index: 2;
}

#header_wrapper a
{
	border: none;
	text-decoration: none;
}

#logo h1
{
	margin: 0;
	padding: 0;
}

#logo a
{
	width: 165px;
	height: 39px;
	margin: 19px 20px;
	float: left;
	display: block;
	background: url(../images/logo.gif) 0 0 no-repeat;
	text-indent: -9999px;
}

#logo a:hover
{
	background: url(../images/logo.gif) 0 -41px no-repeat;
}

#content_wrapper
{
	width: 100%;
	height: 600px;
	position: relative;
	top: -3px;
	left: 0;
	background: #2b2b2b;
}





p {
	margin: 0;
}
/*h1 {
	font: bold 22px/1.2em Arial, Helvetica, sans-serif;
	margin-bottom: 10px;
}
h2 {
	font: normal 18px/1.2em Arial, Helvetica, sans-serif;
	margin-bottom: 4px;
}
h3 {
	font: bold 14px/1.2em Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	margin-bottom: 4px;
}*/
/*.contents {
	display: block;
	width: 700px;
	height: 200px;
	background: #CC66FF;
}*/
ul.blocks {
	/*width: 1000px;*/
	margin: 0;
	padding: 0;
	display: block;
	height: 600px;
}
ul.blocks li {
	width: auto;
	margin: 0 0 0 0px;
	float: left;
	display: block;
	height: 600px;
}
.holder {
	margin: 0;
	display: block;
}
.scroll-pane {
	width: 100%;
	float: left;
	padding: 0;
}
#pane1 {
	height: 100px;
	width: 250px;
	padding: 0;
	display: block;
	_overflow: hidden;
}

#pane5 {
	height: 600px;
	width: 100%;
	padding: 0;
	display: block;
	_overflow: hidden;
	position: relative;
}
/*
a.jScrollArrowLeft {
	background: url(../images/basic_arrow_up.gif) no-repeat 0 0;
}
a.jScrollArrowLeft:hover {
	background-position: 0 -15px;
}
a.jScrollArrowRight {
	background: url(../images/basic_arrow_down.gif) no-repeat 0 0;
}
a.jScrollArrowRight:hover {
	background-position: 0 -15px;
}
a.jScrollActiveArrowButton, 
a.jScrollActiveArrowButton:hover {
	background-position: 0 -30px;
}
*/

.jScrollPaneTrack {
	width: 100%;
	height: 18px;
	margin-top: 0;
	float: left;
	background: silver url(../images/track-bg.gif) 0 50% repeat-x;
	position: absolute;
	bottom: 20px;
	left: 0;
}
.jScrollPaneDrag {
	width: 104px !important;
	height: 18px !important;
	margin: 1px 0 0 0;
	background: black url(../images/handle.png) 0 0 no-repeat;
	cursor: pointer;
	position: relative;
	bottom: 4px;
	left: 0;
}

/* Subpages
------------------------------------------------------------------- */
#about
{
	width: 100%;
	height: 600px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 101;
}

#favorites
{
	width: 100%;
	height: 600px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 101;
}

#favorites ul
{
	margin: 0 0 0 40px;
	padding: 0;
	list-style: none;
	float: left;
}

#favorites ul li
{
	margin: 0 0 5px 0;
	padding: 0 0 0 12px;
	background: url(../images/list-bullet.gif) 0 50% no-repeat;
}

#about, #favorites
{
	width: 700px;
}

#about h3, #favorites h3
{
	width: 200px;
	height: 24px;
	margin: 40px 40px 20px 40px;
	background: url(../images/titles.gif) 0 0 no-repeat;
	text-indent: -9999px;
}

#about h3 { background-position: 0 0; }
#favorites h3 { background-position: 0 -24px; }

#about p, #favorites p
{
	margin: 0 40px 20px 40px;
	padding: 0;
	color: #fff;
	line-height: 18px;
}

/* Content introductions
------------------------------------------------------------------- */

.ha
{
	/*width: 250px;*/
	height: 600px;
	background: #2b2b2b;
	vertical-align: top;
}

h3.trains, 
h3.cityscenes, 
h3.sports, 
h3.personal
{
	width: 200px;
	height: 24px;
	margin: 40px 40px 20px 40px;
	padding: 0;
	display: block;
	float: left;
	background: url(../images/titles.gif) 0 0 no-repeat;
	text-indent: -9999px;
	position: absolute;
	top: 0;
	left: 0;
}

h3.cityscenes
{
	background-position: 0 -24px;
}

h3.sports
{
	background-position: 0 -48px;
}

h3.personal
{
	background-position: 0 -72px;
}

.ha p
{
	margin: 0 40px 20px 40px;
	padding: 0;
	color: #fff;
	line-height: 18px;
	z-index: 100;
}


.back_button
{
	width: 50px;
	height: 600px;
	background: #2b2b2b;
	vertical-align: middle;
}

.back_button a
{
	width: 30px;
	height: 40px;
	display: block;
	text-indent: 9999px;
	background: url(../images/back-button.gif) 0 50% no-repeat;
}


/* Navigation
------------------------------------------------------------------- */

#navigation ul
{
	height: 41px;
	margin: 19px 0;
	padding: 0;
	float: left;
	list-style: none;
}

#navigation ul li
{
	margin: 0;
	padding: 0;
	display: inline;
	float: left;
}

#navigation ul.main_nav
{
	/*width: 396px;*/
	margin: 19px 20px 0 0;
}

#navigation ul.main_nav li a
{
	height: 41px;
	margin: 0;
	padding: 0;
	display: block;
	background: url(../images/main-nav-bg.gif) 0 0 no-repeat;
	text-indent: -9999px;
}

#navigation ul.main_nav li.trains a:hover { background-position: 0 -41px; }
#navigation ul.main_nav li.cityscenes a:hover { background-position: -69px -41px; }
#navigation ul.main_nav li.sports a:hover { background-position: -168px -41px; }
#navigation ul.main_nav li.people a:hover { background-position: -240px -41px; }
#navigation ul.main_nav li.personal a:hover { background-position: -310px -41px; }

#navigation ul.main_nav li.trains a.active { background-position: 0 -82px; }
#navigation ul.main_nav li.cityscenes a.active { background-position: -69px -82px; }
#navigation ul.main_nav li.sports a.active { background-position: -168px -82px; }
#navigation ul.main_nav li.people a.active { background-position: -240px -82px; }
#navigation ul.main_nav li.personal a.active { background-position: -310px -82px; }

#navigation ul.main_nav li.trains a
{
	width: 69px;	
	background-position: 0 0;
}

#navigation ul.main_nav li.cityscenes a
{
	width: 99px;	
	background-position: -69px 0;
}

#navigation ul.main_nav li.sports a
{
	width: 72px;
	background-position: -168px 0;
}

#navigation ul.main_nav li.people a
{
	width: 70px;
	background-position: -240px 0;
}

#navigation ul.main_nav li.personal a
{
	width: 87px;
	background-position: -310px 0;
}
/*
#navigation ul.main_nav li.travel a
{
	width: 72px;
	background-position: -341px 0;
}
*/
#navigation ul.sub_nav li a
{
	height: 41px;
	margin: 0;
	padding: 0;
	display: block;
	background: url(../images/sub-nav-bg.gif) 0 0 no-repeat;
	text-indent: -9999px;
}

#navigation ul.sub_nav li.blog a:hover { background-position: 0 -41px; }
#navigation ul.sub_nav li.about a:hover { background-position: -58px -41px; }
#navigation ul.sub_nav li.favorites a:hover { background-position: -124px -41px; }

#navigation ul.sub_nav li.blog a.active { background-position: 0 -82px; }
#navigation ul.sub_nav li.about a.active { background-position: -58px -82px; }
#navigation ul.sub_nav li.favorites a.active { background-position: -124px -82px; }

#navigation ul.sub_nav li.blog a
{
	width: 58px;	
	background-position: 0 0;
}

#navigation ul.sub_nav li.about a
{
	width: 66px;	
	background-position: -58px 0;
}

#navigation ul.sub_nav li.favorites a
{
	width: 87px;	
	background-position: -124px 0;
}


.copyright_overlay
{
	width: 100%;
	height: 100%;
	background: url(../images/copyrighted.gif) 0 0 repeat;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

/* Footer
------------------------------------------------------------------- */

#footer_wrapper
{
	width: 100%;
	height: auto;
	background: url(../images/bottom-grad.png) 0 0 repeat-x;
	position: relative;
	top: -6px;
	left: 0;
	z-index: 99;
}

#footer_content
{
	width: 400px;
	height: 20px;
	margin: 0;
	padding: 10px;	
	text-indent: -99999px;
	background: url(../images/footer-copyright.gif) 100% 100% no-repeat;
}




/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */

/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
	/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
	min-width: 75px;
	width: 30%;
	height: 100%;
	/* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
	/*background-image: url(../images/../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;*/
	position: absolute;
	z-index: 200;
	left: 0;
	/*  When positioning the mouse over one of the hot spots, the cursor should change.
	I've noticed that this varies from browser to browser though. */
	cursor: url(../images/cursor_arrow_left.cur), w-resize;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
	background: url(../images/scroll-arrow-left.png) 0 50% no-repeat;
	zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
	min-width: 75px;
	width: 30%;
	height: 100%;
	/*background-image: url(../images/../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;*/
	position: absolute;
	z-index: 200;
	right: 0;
	cursor: url(../images/cursor_arrow_right.cur), e-resize;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
	background: url(../images/scroll-arrow-right.png) 100% 50% no-repeat;
	zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
}
div.scrollableArea span
{
	margin: 0;
	padding: 0;
	float: left;
}
div.scrollableArea img
{
	margin: 0;
	padding: 0;
	float: left;
}