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

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

/* Notes
*
*any vertical margins/padding that scale with percentages have their percentages based on width (640px) not the height...include padding when calculating container width
*all left/right margins/padding need to be percentages
*keep pixel size commented out on percentages for px info (and vice versa)
*positioning on page-content/sub-content/content-scroll allows for height as percentages on iScroll elements
*
*UPDATE 08/2015
*removed height as percentages to fix element height vs window height issues
*removed overflow on #viewport and body #page to allow full footer and to remove #page scroll bar
*html background color gives full footer
*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
*added padding-bottom to #page-content for spacing between footer
*#viewport overflow and footer position important for panel slide
*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
*
*/


/*------------------------------------------------------------
			   Fonts
------------------------------------------------------------*/

@font-face
{
font-family: gotham-bold;
src: url(fonts/Gotham-Bold.otf);
}
@font-face
{
font-family: gotham-medium;
src: url(fonts/Gotham-Medium.otf);
}
@font-face
{
font-family: gotham-light;
src: url(fonts/Gotham-Light.otf);
}


/*------------------------------------------------------------
		     Repeating Elements 
------------------------------------------------------------*/

html {
	background-color: #778899;
	font-size: 87.5%;
	height: 100%;
	margin: 0;
	overflow-y: scroll;
	padding: 0;
	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-moz-text-size-adjust: none;
}

body {
	background-image: url('images/background/background-960.png');
	background-size: 75px;
	font-family: gotham-medium, Helvetica, sans serif;
	font-size: 14px;
	font-size: 1rem;
	line-height: 1;
	margin: 0;
}

body #page{
	/*min-height: 960px;
	min-width: 470px;
	overflow-x: hidden;*/
}

p {
	font-family: gotham-medium, sans serif;
}

#page {
	background-color: #fff;
	color: #434343;
	/*height: 578px;*/
	margin: 0;
	position: relative;
	width: 100%;
	z-index: 1;
}

#page-relative {
	position: relative;
}

#page-content {
	/*height: 742px 77.291667%;*/
	margin: 0 0.78125% /*5px*/;
	min-height: 371px;
	margin-top: 10px;
	margin-top: 0.714128571rem;
	overflow: hidden;
	padding-bottom: 22px;
	padding-bottom: 1.57142857rem;
	width: 98.4375% /*630px*/;
}

#page-sub-content {
	/*height: 571px 76.954178%;*/
	margin: 0 0.79365079% /*5px*/;
	margin-top: 15px;
	margin-top: 1.07142857rem;
	overflow: hidden;
	padding: 0;
	width: 98.412698% /*620px*/;
}

#map {
	height: 571px /*100%*/;
	margin: 0 3.90625% /*25px*/;
	overflow: hidden;
	padding: 0;
	width: 92.09677% /*571px*/;
}

#viewport {
	overflow: hidden;
	width: 100%;
}


/*------------------------------------------------------------
		    Header Bar Navigation
------------------------------------------------------------*/

#header-bar {
	background-color: #9fb5cc /*#7f7f7f*/;
	background-image: url('images/header/mr-wrdmrk.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 80px 30px /*114px 30px*/;
	display: block;
	min-height: 44px;
	position: fixed;
		left: 0px;
		top: 0px;
	width: 100%;
	z-index: 2;
}

.header-button {
	height: 30px;
	margin: 0;
	width: 37px;
	z-index: 2;
}

#help {
	float: right;
	padding: 7px 10px;
	padding: 0.5rem 0.71428571rem;
}

#help-panel {
	height: 66px;
	margin: 0;
	position: absolute;
		top: 0px;
		left: 100px;
	width: 540px;
	z-index: 1;
}

#list {
	float: left;
	padding: 7px 10px;
	padding: 0.5rem 0.71428571rem;
}

#help img,
#list img {
	width: 100%;
}

#list-panel {
	background-color: #778899 /*#434343*/;
	display: none;
	/*height: 1136px;*/
	min-height: 100%;
	position: fixed;
		top: 44px;
		left: 0px;
	width: 75% /*82.8125% 530px*/;
	z-index: 0;
}

#list-panel ul {
	float: left;
	margin: 0;
	padding: 0;
	width: 100%;
}

#list-panel li {
	background-color: #9fb5cc /*rgba(159, 181, 204, 0.75)*/;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #9fb5cc;
	color: #fff;
	display: block;
	font-family: gotham-medium, sans serif;
	font-size: 14px;
	font-size: 1rem;
	list-style-type: none;
	margin: 0;
	min-height: 42px;
	padding: 0;
	width: 100% /*530px*/;
}

#list-panel li.list-panel-header {
	background: none;
	border: none;
	color: #fff;
	display: block;
	font-family: gotham-light, sans serif;
	font-size: 8px;
	font-size: 0.57142857rem;
	line-height: 1;
	list-style-type: none;
	margin: 0;
	min-height: 8px;
	padding: 6px 10px;
	padding: 0.42857143rem 0.71428571rem;
	width: 100%;
}

.list-panel {
	color: #fff;
	display: block;
	float: left;
	font-family: gotham-light, sans serif;
	font-size: 14px;
	font-size: 1rem;
	line-height: 1;
	list-style-type: none;
	margin: 0;
	padding: 15px 0;
	padding: 1.07142857rem 0;
	width: 75% /*81.132075% 430px*/;
	
}

.list-panel-img {
	float: left;
	height: 20px;
	padding: 12px 10px;
	padding: 0.85714286rem 0.71428571rem;
	overflow: hidden;
	width: 20px;
}


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

#nav {
	border-bottom: 1px solid #fff;
	margin: 0 16.5625% /*106px*/;
	margin-top: 44px;
	margin-top: 3.14285714rem;
	padding-top: 10px;
	padding-top: 0.714128571rem;
	min-height: 14px;
	width: 66.71875% /*427px*/;
}

#nav ul {
	float: left;
	margin: 0;
	padding: 0;
}

#nav li {
	display: block;
	float: left;
	font-family: gotham-bold, sans serif;
	font-size: 14px;
	font-size: 1rem;
	line-height: 1;
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}


/*------------------------------------------------------------
		    Button Categories Menu
------------------------------------------------------------*/

#b-categories {
	margin: 0 16.5625% /*106px*/;
	padding-top: 10px;
	padding-top: 0.714128571rem;
	width: 66.71875% /*427px*/;
}

#b-categories ul {
	margin: 0;
	padding: 0;
}

#b-categories li {
	/*height: 150px;*/
	list-style-type: none;
	/*margin-bottom: 22px;
	margin-bottom: 1.57142857rem;
	padding: 0;*/
	padding-bottom: 22px;
	padding-bottom: 1.57142857rem;
	/*width: 427px;*/
}

#b-categories li img{
	width: 100%;
}


/*------------------------------------------------------------
		    Page Button Header
------------------------------------------------------------*/

#b-header {
	margin: 0 16.190476% /*102px*/;
}

#b-header ul {
	margin: 0;
	padding: 0;
}

#b-header li {
	/*height: 150px;*/
	list-style-type: none;
	margin: 0;
	padding: 0;
	/*width: 427px;*/
}

#b-header li img{
	width: 100%;
}

.b-header {
	/*height: 150px;*/
	margin: 0 15.645161% /*97px*/;
	padding-bottom: 20px;
	padding-bottom: 1.42857143rem;
	/*width: 427px;*/
}

.b-header ul {
	margin: 0;
	padding: 0;
}

.b-header li {
	/*height: 150px;*/
	list-style-type: none;
	margin: 0;
	padding: 0;
	/*width: 427px;*/
}

.b-header li img{
	width: 100%;
}


/*------------------------------------------------------------
		    Page Content Scroll
------------------------------------------------------------*/

#page-content-scroll {
	/*height: 742px 100%;*/
	margin: 0;
	padding: 0;
	width: 2222.22% /*14000px;*/
}

.page-content-scroll {
	float: left;
	/*height: 742px 100%;*/
	margin: 0;
	overflow: hidden;
	padding: 0 0.03571429% /*5px*/;
	position: relative;
	width: 4.428571% /*620px*/;
}

.page-sub-content {
	/*height: 571px 76.954178%;*/
	margin: 0;
	padding: 0;
	width: 100% /*620px*/;
}

.page-sub-content-scroll-container {
	height: 320px /*571px 100% 76.954178%*/;
	margin: 0;
	overflow: hidden;
	padding: 0;
	width: 100% /*620px*/;
}

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

.page-sub-content-scroll-item {
	float: left;
	height: 320px /*571px 100%*/;
	margin: 0;
	padding: 0 0.76923077% /*0 10px*/;
	width: 46.153846% /*600px*/;
}


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


#arrow-left {
	/*height: 44px;*/
	margin: 8.28125% 3.90625% 8.28125% 0 /*53px 25px 53px 0*/;
	position: absolute;
		top: 35px;
		left: 10px;
	width: 10.967742% /*68px*/;
	z-index: 1;
}

#arrow-right {
	/*height: 44px;*/
	margin: 8.28125% 0 8.28125% 3.90625% /*53px 0 53px 25px*/;
	position: absolute;
		top: 35px;
		right: 10px;
	width: 10.967742% /*68px*/;
	z-index: 1;
}

#arrow-left img,
#arrow-right img {
	width: 100%;
}


/*------------------------------------------------------------
			Arrival Times
------------------------------------------------------------*/

.direction {
	display: block;
	font-family: gotham-medium, sans serif;
	font-size: 11px;
	font-size: 0.785714286rem;
	line-height: 1;
	list-style-type: none;
	margin: 0;
	padding-bottom: 20px;
	padding-bottom: 1.42857143rem;
	text-align: center;
	text-transform: uppercase;
	width: 100% /*600px*/;
}

.day {
	/*height: 15px;*/
	min-height: 8px;
	padding: 0;
	width: 100% /*600px;*/
}


.day-mf {
	display: block;
	float: left;
	font-family: gotham-light, sans serif;
	font-size: 8px;
	font-size: 0.57142857rem;
	/*height: 15px;*/
	line-height: 1;
	list-style-type: none;
	margin-left: 33.8888889% /*203.333333px*/;
	padding: 0;
	text-align: left;
	text-transform: uppercase;
	width: 33.8888889% /*203.333333px*/;
}

.day-wknd {
	display: block;
	float: left;
	font-family: gotham-light, sans serif;
	font-size: 8px;
	font-size: 0.57142857rem;
	/*height: 15px;*/
	line-height: 1;
	list-style-type: none;
	text-align: left;
	text-transform: uppercase;
	width: 32.222222% /*193.333332px*/;
}


.times {
	height: 85.333% /*512px*/;
	margin: 0;
	overflow: hidden;
	padding: 0;
	width: 100% /*600px*/;
}

.times-list-mf {
	float: left;
	margin 0;
	padding: 0;
	width: 33.8888889% /*203.333333px*/;
}

.times-list-mf ul {
	float: left;
	margin: 0;
	padding: 0;
	width: 100% /*203.333333px*/;
}

.times-list-mf li {
	display: block;
	font-family: gotham-bold, sans serif;
	font-size: 22px;
	font-size: 1.57142857rem;
	/*height: 42px;*/
	line-height: 1.1;
	list-style-type: none;
	margin: 0;
	padding-bottom: 6px;
	padding-bottom: 0.42857143rem;
	text-align: left;
	text-transform: uppercase;
	width: 100% /*203.333333px*/;
}

.times-list-train {
	float: left;
	margin: 0;
	padding-top: 11px;
	padding-top: 0.785714286rem;
	width: 33.8888889% /*203.333333px*/;
}

.times-list-train ul {
	float: left;
	margin: 0;
	padding: 0;
	width: 100% /*203.333333px*/;
}

.times-list-train li {
	display: block;
	font-family: gotham-light, sans serif;
	font-size: 11px;
	font-size: 0.785714286rem;
	/*height: 15px;*/
	line-height: 1;
	list-style-type: none;
	margin: 0;
	padding-bottom: 19px;
	padding-bottom: 1.35714286rem;
	text-align: left;
	text-transform: uppercase;
	width: 100% /*203.333333px*/;
}

.times-list-wknd {
	float: left;
	margin: 0;
	padding: 0;
	width: 32.222222% /*193.333332px*/;
}

.times-list-wknd ul {
	float: left;
	margin: 0;
	padding: 0;
	width: 100% /*193.333332px*/;
}

.times-list-wknd li {
	display: block;
	font-family: gotham-bold, sans serif;
	font-size: 22px;
	font-size: 1.57142857rem;
	/*height: 42px;*/
	line-height: 1.1;
	list-style-type: none;
	margin: 0;
	padding-bottom: 6px;
	padding-bottom: 0.42857143rem;
	text-align: left;
	text-transform: uppercase;
	width: 100% /*193.333332px*/;
}


/*------------------------------------------------------------
			   Fares
------------------------------------------------------------*/

#fare-key {
	margin: 0;
	padding: 0;
	width: 600px;
}

#fare-key-type {
	display: block;
	float: left;
	font-family: gotham-light, sans serif;
	font-size: 8px;
	font-size: 0.57142857rem;
	height: 5.25394% /*30px*/;
	list-style-type: none;
	margin-left: 1.612903% /*10px*/;
	padding-bottom: 10px;
	padding-bottom: 0.71428571rem;
	text-align: left;
	text-transform: uppercase;
	width: 48.870968% /*303px*/;
}

#fare-key-regular {
	display: block;
	float: left;
	font-family: gotham-light, sans serif;
	font-size: 8px;
	font-size: 0.57142857rem;
	height: 5.25394% /*30px*/;
	list-style-type: none;
	margin: 0;
	padding-bottom: 10px;
	padding-bottom: 0.71428571rem;
	text-align: left;
	text-transform: uppercase;
	width: 24.596774% /*152.5px*/;
}

#fare-key-senior {
	display: block;
	float: left;
	font-family: gotham-light, sans serif;
	font-size: 8px;
	font-size: 0.57142857rem;
	height: 5.25394% /*30px*/;
	list-style-type: none;
	padding-bottom: 10px;
	padding-bottom: 0.71428571rem;
	text-align: left;
	text-transform: uppercase;
	width: 22.983871% /*142.5px*/;
}


.fare-group {
	display: block;
	font-family: gotham-light, sans serif;
	font-size: 11px;
	font-size: 0.785714286rem;
	/*height: 20px;*/
	list-style-type: none;
	margin: 0 1.612903% /*10px*/;
	padding-bottom: 10px;
	padding-bottom: 0.71428571rem;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	width: 96.774194% /*600px*/;
}

#fare-base {
	height: 35.726795% /*204px*/;
	margin: 0 1.612903% /*10px*/;
	padding: 0;
	position: relative;
	width: 96.774194% /*600px*/;
}

#fare-pass {
	height: 23.817863% /*136px*/;
	margin: 0 1.612903% /*10px*/;
	padding: 0;
	position: relative;
	width: 96.774194% /*600px*/;
}

#fare-reduced {
	height: 14.185639% /*81px*/;
	margin: 0 1.612903% /*10px*/;
	padding: 0;
	position: relative;
	width: 96.774194% /*600px*/;
}

#fare-tap {
	display: block;
	font-family: gotham-medium, sans serif;
	font-size: 8px;
	font-size: 0.57142857rem;
	height: 2.62697% /*15px*/;
	list-style-type: none;
	margin: 0 1.612903% /*10px*/;
	padding-bottom: 10px;
	padding-bottom: 0.71428571rem;
	position: relative;
	text-transform: uppercase;
	width: 96.774194% /*600px*/;
}

.type {
	float: left;
	margin: 0;
	padding: 0;
	width: 50.5% /*303px*/;
}

.type ul {
	float: left;
	margin: 0;
	padding: 0;
	width: 100% /*303px*/;
}

.type li {
	display: block;
	/*height: 30px;*/
	font-family: gotham-bold, sans serif;
	font-size: 14px;
	font-size: 1rem;
	list-style-type: none;
	margin: 0;
	padding-bottom: 20px;
	padding-bottom: 1.42857143rem;
	text-align: left;
	text-transform: uppercase;
	width: 100% /*303px*/;
}

.type li span {
	font-family: gotham-medium, sans serif;
	font-size: 7px;
	/*font-size: 0.5rem;*/
}

.type li .extra-pad {
	padding-top: 40px;
	padding-top: 2.85714286rem;
}

.regular {
	float: left;
	margin: 0;
	padding: 0;
	width: 25.333333% /*152.5px*/;
}

.regular ul {
	float: left;
	margin: 0;
	padding: 0;
	width: 100% /*180px*/;
}

.regular li {
	display: block;
	font-family: gotham-bold, sans serif;
	font-size: 14px;
	font-size: 1rem;
	/*height: 30px;*/
	list-style-type: none;
	margin: 0;
	padding-bottom: 20px;
	padding-bottom: 1.42857143rem;
	text-align: left;
	text-transform: uppercase;
	width: 100% /*152.5px*/;
}


.senior {
	float: left;
	margin: 0;
	padding: 0;
	width: 23.75% /*142.5px*/;
}

.senior ul {
	float: left;
	margin: 0;
	padding: 0;
	width: 100% /*142.5px*/;
}

.senior li {
	display: block;
	font-family: gotham-bold, sans serif;
	font-size: 14px;
	font-size: 1rem;
	/*height: 30px;*/
	list-style-type: none;
	padding-bottom: 20px;
	padding-bottom: 1.42857143rem;
	text-align: left;
	text-transform: uppercase;
	width: 100% /*142.5px*/;
}

/* Off Peak Small Text */

#off-peak {
	position: relative;
	width: 600px;
}

.off-peak {
	display: block;
	font-family: gotham-medium, sans serif;
	font-size: 10px;
	height: 10px;
	list-style-type: none;
	margin: 0;
	padding: 0 0 20px;
	text-align: right;
	text-transform: uppercase;
	width: 248px;
}

/* Off Peak Small Text */


/*------------------------------------------------------------
			   Rules
------------------------------------------------------------*/

#rules-header {
	display: block;
	font-family: gotham-light, sans serif;
	font-size: 8px;
	font-size: 0.5rem;
	height: 5.25394%;
	list-style-type: none;
	margin: 0 1.612903% /*10px*/;
	padding-bottom: 10px;
	padding-bottom: 0.714128571rem;
	text-align: center;
	text-transform: uppercase;
	width: 96.774194% /*600px*/;
}

#rules-header span {
	font-family: gotham-medium, sans serif;
}

#rules {
	display: block;
	font-family: gotham-bold, sans serif;
	font-size: 14px;
	font-size: 1rem;
	height: 89.316988% /*510px*/;
	list-style-type: none;
	margin: 0 1.612903% /*10px*/;
	padding: 0;
	text-align: left;
	text-transform: uppercase;
	width: 96.774194% /*600px*/;
}

#rules-footer {
	display: block;
	font-family: gotham-bold, sans serif;
	font-size: 8px;
	font-size: 0.57142857rem;
	height: 1.751313% /*10px*/;
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: right;
	text-transform: uppercase;
	width: 96.774194% /*600px*/;
}


/*------------------------------------------------------------
			   Terms
------------------------------------------------------------*/

#terms {
	height: 1000px;
	margin: 0 10px;
	margin: 0 0.71428571rem;
	padding: 10px 0;
	padding: 0.71428571rem 0;
	width: 96.774194% /*600px*/;
}


.terms-header {
	display: block;
	font-family: gotham-bold, sans serif;
	font-size: 15px;
	font-size: 1.07142857rem;
	list-style-type: none;
	text-transform: uppercase;
}


.terms-content {
	display: block;
	font-family: gotham-light, sans serif;
	font-size: 12px;
	font-size: 0.85714286rem;
	list-style-type: none;
}


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

#footer {
	color: black;
	display: block;
	font-family: gotham-light, sans serif;
	font-size: 15px;
	font-size: 1.07142857rem;
	margin: 10px 10px 0 10px;
	margin: 0.71428571rem 0.71428571rem 0 0.71428571rem;
	position: relative;
	text-align: center;
	width: 100% /*630px*/;
}

footer[role="contentinfo"] a {
	color: #9fb5cc;
	text-decoration: none;
}

footer#colophon {
	/*border-top: 1px solid #fff;*/

		/*Full Width Footer*/
	background-color: #778899;
	color: #fff;
	font-family: gotham-light, sans serif;
	font-size: 14px;
	font-size: 1rem;
	margin-top: 0 /*10px*/;
	margin-top: 0 /*0.71428571rem*/;
	max-width: 100%;
	padding: 24px 0;
	padding: 1.714285714rem 0;
	position: relative;
		left: 0;
	width: 100%;
	z-index: 1000;
}

.site-info {
	/*display: none;*/
	line-height: 1.5;
	margin: 0 auto;
	max-width: 920px /*960px*/;
	max-width: 65.7142857rem /*68.571428571rem*/;
	padding-right: 15px;
	padding-right: 1rem;
	padding-left: 15px;
	padding-left: 1rem;
	overflow: hidden;
}

.site-info-left {
	margin-top: 0px;
	margin-top: 0rem;
}

.site-info-right {
	margin-top: 14px;
	margin-top: 1rem;
}


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

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

	#arrow-left {
		margin: 4.140625% 3.90625% 4.140625% 0 /*53px 25px 53px 0*/;
		position: absolute;
			top: 35px;
			left: 10px;
		width: 5.967742% /*68px*/;
		z-index: 1;
	}


	#arrow-right {
		margin: 4.28125% 0 4.28125% 3.90625% /*53px 0 53px 25px*/;
		position: absolute;
			top: 35px;
			right: 10px;
		width: 5.967742% /*68px*/;
		z-index: 1;
	}

	#b-categories {
		margin: 0 33.050847% /*195px*/;
		width: 33.898305% /*200px*/;
	}

	#b-header {
		margin: 0 33.050847% /*195px*/;
		width: 33.898305% /*200px*/;
	}

	#header-bar {
		border-bottom: 1px solid #fff;
		position: fixed;
			top: 0;
			right: 0;
	}

	#nav {
		margin-top: 44px;
		margin-top: 3.14285714rem;
	}

	#nav ul {
		display: block;
		float: left;
		position: relative;
			left: 50%;
	}

	#nav li {
		display: block;
		float: left;
		position: relative;
			right: 50%;
	}

	.page-content-scroll {
		padding: 0 0.01785715% /*5px*/;
		width: 2.2142855% /*620px*/;	
	}

	.page-sub-content-scroll-container, 
	.page-sub-content-scroll,
	.page-sub-content-scroll-item {
		height: 414px;	
	}

	.site-info-left {
		float: left;
		margin-top: 0px;
		margin-top: 0rem;
		width: 50%;
	}

	.site-info-right {
		float: right;
		margin-top: 0px;
		margin-top: 0rem;
		text-align: right;
		width: 50%;
	}

}


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

	body {
		background-color: #fff;
	}

	#page {
		margin: 0 auto;
		max-width: 960px;
		max-width: 68.571428571rem;
	}

	#viewport {
		overflow: visible;
	}

	#header-bar {
		border-bottom: 1px solid #fff;
		position: fixed;
			top: 0;
			right: 0;
	}

	#nav {
		margin-top: 44px;
		margin-top: 3.14285714rem;
	}

	footer#colophon {
		position: absolute;
			left: 0;
	}

}


/*------------------------------------------------------------
			   Links
------------------------------------------------------------*/


a:link {color: #434343; text-decoration: none}
a:visited {color: #434343; text-decoration: none}
a:hover {color: #434343; text-decoration: none}
a:active {color: #434343; text-decoration: none}

#categories a {display: block; background-color: black; padding: 5px;}
#categories a:link {color: #f2f2f2; text-decoration: none}
#categories a:visited {color: #f2f2f2; text-decoration: none}
#categories a:hover {color: #f2f2f2; background-color: black; text-decoration: none;}
#categories a:active {color: #f2f2f2; text-decoration: none}