@charset "UTF-8";
/* CSS Document */

/*
Theme Name:     Mobile Rail
Theme URI:
Description:    Stations scroll CSS style sheet for Mobile Rail web application
Author:         Kyle Crowther
Author URI:
Template:       
Version:        2.0
*/

/* Notes
*
*UPDATE 08/2015
*removed height as percentages to fix element height vs window height issues
*removed height on #page-content, #page-content-scroll, #page-content-scroll, .page-content-scroll, .page-sub-content for better vertical uniformity with maps and text pages
*original height of elements based on body min-height 960px, with page-content 742px and page-sub-content/maps 571px (mistake). new height has been updated
*
*/


/*------------------------------------------------------------
		      Page Scroll Menu
------------------------------------------------------------*/

#page-sub-content-scroll-container-01, #page-sub-content-scroll-container-02, #page-sub-content-scroll-container-03, #page-sub-content-scroll-container-04, #page-sub-content-scroll-container-05, #page-sub-content-scroll-container-06, #page-sub-content-scroll-container-07, #page-sub-content-scroll-container-08, #page-sub-content-scroll-container-09, #page-sub-content-scroll-container-10, #page-sub-content-scroll-container-11, #page-sub-content-scroll-container-12, #page-sub-content-scroll-container-13, #page-sub-content-scroll-container-14, #page-sub-content-scroll-container-15, #page-sub-content-scroll-container-16, #page-sub-content-scroll-container-17, #page-sub-content-scroll-container-18, #page-sub-content-scroll-container-19, #page-sub-content-scroll-container-20, #page-sub-content-scroll-container-21, #page-sub-content-scroll-container-22 {
	height: 320px /*571px 76.954178%*/;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: relative;
	width: 100% /*620px*/;
}

.page-sub-content-scroll-01, .page-sub-content-scroll-02 {
	height: 320px /*571px 100%*/;
	margin: 0;
	padding: 0;
	width: 209.677419% /*1300px*/;
}

.page-sub-content-scroll-item-01, .page-sub-content-scroll-item-02, .page-sub-content-scroll-item-03, .page-sub-content-scroll-item-04, .page-sub-content-scroll-item-05, .page-sub-content-scroll-item-06, .page-sub-content-scroll-item-07, .page-sub-content-scroll-item-08, .page-sub-content-scroll-item-09, .page-sub-content-scroll-item-10, .page-sub-content-scroll-item-11, .page-sub-content-scroll-item-12, .page-sub-content-scroll-item-13, .page-sub-content-scroll-item-14, .page-sub-content-scroll-item-15, .page-sub-content-scroll-item-16, .page-sub-content-scroll-item-17, .page-sub-content-scroll-item-18, .page-sub-content-scroll-item-19, .page-sub-content-scroll-item-20, .page-sub-content-scroll-item-21, .page-sub-content-scroll-item-22 {
	float: left;
	height: 320px /*571px 100%*/;
	margin: 0;
	padding: 0 0.76923077% /*0 10px*/;
	width: 46.153846% /*600px*/;
}

/*------------------------------------------------------------
		      Arrows Scroll
------------------------------------------------------------*/

#direction-arrow-left-01, #direction-arrow-left-02, #direction-arrow-left-03, #direction-arrow-left-04, #direction-arrow-left-05, #direction-arrow-left-06, #direction-arrow-left-07, #direction-arrow-left-08, #direction-arrow-left-09, #direction-arrow-left-10, #direction-arrow-left-11, #direction-arrow-left-12, #direction-arrow-left-13, #direction-arrow-left-14, #direction-arrow-left-15, #direction-arrow-left-16, #direction-arrow-left-17, #direction-arrow-left-18, #direction-arrow-left-19, #direction-arrow-left-20, #direction-arrow-left-21, #direction-arrow-left-22 {
	/*height: 18px;*/
	margin: 24.193548% 45.967742% 0 0 /*166px 285px 0 0*/;
	padding-top: 20px;
	padding-top: 1.42857143rem;
	position: absolute;
		top: 0px;
		left: 10px;
	width: 4.032258% /*25px*/;
	z-index: 1;
}

#direction-arrow-right-01, #direction-arrow-right-02, #direction-arrow-right-03, #direction-arrow-right-04, #direction-arrow-right-05, #direction-arrow-right-06, #direction-arrow-right-07, #direction-arrow-right-08, #direction-arrow-right-09, #direction-arrow-right-10, #direction-arrow-right-11, #direction-arrow-right-12, #direction-arrow-right-13, #direction-arrow-right-14, #direction-arrow-right-15, #direction-arrow-right-16, #direction-arrow-right-17, #direction-arrow-right-18, #direction-arrow-right-19, #direction-arrow-right-20, #direction-arrow-right-21, #direction-arrow-right-22 {
	/*height: 18px;*/
	margin: 24.193548% 0 0 45.967742% /*166px 0 0 285px*/;
	padding-top: 20px;
	padding-top: 1.42857143rem;
	position: absolute;
		top: 0px;
		right: 10px;
	width: 4.032258% /*25px*/;
	z-index: 1;
}

#direction-arrow-left-01 img, #direction-arrow-left-02 img, #direction-arrow-left-03 img, #direction-arrow-left-04 img, #direction-arrow-left-05 img, #direction-arrow-left-06 img, #direction-arrow-left-07 img, #direction-arrow-left-08 img, #direction-arrow-left-09 img, #direction-arrow-left-10 img, #direction-arrow-left-11 img, #direction-arrow-left-12 img, #direction-arrow-left-13 img, #direction-arrow-left-14 img, #direction-arrow-left-15 img, #direction-arrow-left-16 img, #direction-arrow-left-17 img, #direction-arrow-left-18 img, #direction-arrow-left-19 img, #direction-arrow-left-20 img, #direction-arrow-left-21 img, #direction-arrow-left-22 img, #direction-arrow-right-01 img, #direction-arrow-right-02 img, #direction-arrow-right-03 img, #direction-arrow-right-04 img, #direction-arrow-right-05 img, #direction-arrow-right-06 img, #direction-arrow-right-07 img, #direction-arrow-right-08 img, #direction-arrow-right-09 img, #direction-arrow-right-10 img, #direction-arrow-right-11 img, #direction-arrow-right-12 img, #direction-arrow-right-13 img, #direction-arrow-right-14 img, #direction-arrow-right-15 img, #direction-arrow-right-16 img, #direction-arrow-right-17 img, #direction-arrow-right-18 img, #direction-arrow-right-19 img, #direction-arrow-right-20 img, #direction-arrow-right-21 img, #direction-arrow-right-22 img {
	width: 100%;
}


/*------------------------------------------------------------
		MEDIA QUERIES i.e. RESPONSIVE
------------------------------------------------------------*/

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px){

	#page-sub-content-scroll-container-01, #page-sub-content-scroll-container-02, #page-sub-content-scroll-container-03, #page-sub-content-scroll-container-04, #page-sub-content-scroll-container-05, #page-sub-content-scroll-container-06, #page-sub-content-scroll-container-07, #page-sub-content-scroll-container-08, #page-sub-content-scroll-container-09, #page-sub-content-scroll-container-10, #page-sub-content-scroll-container-11, #page-sub-content-scroll-container-12, #page-sub-content-scroll-container-13, #page-sub-content-scroll-container-14, #page-sub-content-scroll-container-15, #page-sub-content-scroll-container-16, #page-sub-content-scroll-container-17, #page-sub-content-scroll-container-18, #page-sub-content-scroll-container-19, #page-sub-content-scroll-container-20, #page-sub-content-scroll-container-21, #page-sub-content-scroll-container-22 {
		height: 414px;
		}

	#.page-sub-content-scroll-01, .page-sub-content-scroll-02 {
		height: 414px;
		}

	.page-sub-content-scroll-item-01, .page-sub-content-scroll-item-02, .page-sub-content-scroll-item-03, .page-sub-content-scroll-item-04, .page-sub-content-scroll-item-05, .page-sub-content-scroll-item-06, .page-sub-content-scroll-item-07, .page-sub-content-scroll-item-08, .page-sub-content-scroll-item-09, .page-sub-content-scroll-item-10, .page-sub-content-scroll-item-11, .page-sub-content-scroll-item-12, .page-sub-content-scroll-item-13, .page-sub-content-scroll-item-14, .page-sub-content-scroll-item-15, .page-sub-content-scroll-item-16, .page-sub-content-scroll-item-17, .page-sub-content-scroll-item-18, .page-sub-content-scroll-item-19, .page-sub-content-scroll-item-20, .page-sub-content-scroll-item-21, .page-sub-content-scroll-item-22 {
		height: 414px;
		}
}