.swap { 
	cursor: pointer;
}

#config hr {margin-bottom: 10px;}

a.swap,
a.swap.button {
	  color: #222;
	  font-size: 12px;
    background: none;
    margin-bottom: 3px;
}
a.swap.button {
	  border: 1px solid #999;
    padding: 5px;
}

a.swap.button.white {background: #fff;}
a.swap.button.bronze {background: #564D3C; color: #dedede;}
a.swap.button.black {background: #444; color: #dedede;}
a.swap.button.gray {background: #ccc;}
a.swap.button.almond {background: #D8CABF;}
a.swap.button.green {background: #598135; color: #dedede;}
a.swap.button.wood {background: #8E5821; color: #dedede;}

table.rail-options tr,
table.rail-options tr:hover {
  background: none;
}

table.rail-options tr td:first-child { 
  text-align: right;
  padding: 3px 5px;
}
table.rail-options tr td:last-child {
  text-align: left;
  padding: 3px 5px;
}

.config-photos {display: none;}

a.swap.button.cherry {background: #855653; color: #fff;}
a.swap.button.hemlock {background: #7E543E; color: #fff;}
a.swap.button.pine {background: #FDB75E; color: #333;}
a.swap.button.clear-fir {background: #FECF61; color: #333;}
a.swap.button.fir-medium {background: #B57F63; color: #fff;}


a.swap.button:hover {
	  background: #00AEEF;
	  color: #fff;
}

li.rail-active a,
a.rail-active {
	font-weight: bold;
	color: black;
} 

a.swap.button.rail-active {
	border: 1px solid #00AEEF !important;
	color: #fff;
	background: #00AEEF;
} 

li.rail-active a:after,
a.rail-active:after {
	/* content:  "  \22D8 "; */
}

.rail-title {
	display: block;
  border: 1px solid #dedede;
  border-radius: 5px;
  padding: 3px 10px;
  background: #dedede;
}

/* DROP DOWN MENU */
ul.railing .container {
	margin: 0;
	padding: 0;
}

ul.railing.menu {
	margin: 0;
	padding: 0;
	/*overflow: hidden;*/
	float: left;
}

ul.railing.menu, ul.railing.menu p, ul.railing.menu strong, ul.railing.menu h1, ul.railing.menu h2, ul.railing.menu h3, ul.railing.menu h4, ul.railing.menu h5 
{ color: #333; }

ul.railing.menu li {
	float: left;
	margin: 0;
	height: 70px;
	overflow: hidden;
}

ul.railing.menu li.top-link > a {
	display: block;
	font-family: 'bebas_neueregular', Arial;
	font-size: 25px;
	margin: 25px 10px 0px 10px;
	text-transform: uppercase;
}

ul.railing.menu li.top-link:hover { background: #F3F3F3; }
ul.railing.menu li.top-link:hover > a { color: #666; }
ul.railing.menu li.top-link > a { color: #efefef; }
ul.railing.menu li.top-link > a.active { color: #FFF100; }

ul.railing.menu li.top-link.active:hover {  }
ul.railing.menu li.top-link.active > a { color: #FFF100; }
ul.railing.menu li.top-link.active > a:hover,
ul.railing.menu li.top-link.active:hover > a { color: #666; }

ul.railing.menu .tagline,
ul.railing.menu .heading { display: block; font: 18px/27px "bebas_neueregular", Arial; }

ul.railing.menu .tagline { font-size: 18px; }

ul.railing.menu .heading { 
	display: block;
	font-size: 36px;
}


ul.railing.menu li.top-link:hover > .railing ul.sub-menu { 
	left: 0; 
	max-height: 1000em;
	padding: 20px 0 20px 0;
	z-index: 20;
	
	/*	
	-moz-transition: max-height 0.5s ease-in-out;
	-webkit-transition: max-height 0.5s ease-in-out;
	-o-transition: max-height 0.5s ease-in-out;
	transition: max-height 0.5s ease-in-out;
	*/
}

.railing ul.sub-menu {
	position: absolute;
	top: 70px;
	left: 0px;
	background: #F3F3F3;
	width: 100%;
	padding: 0;
	margin: 0;
	/*display: none;*/
	z-index: 10;
	height: auto;
	max-height: 0;
	overflow: hidden;
	line-height: 18px;	
}

.railing ul.sub-menu.glass {
background: rgb(201,219,233);
background: -moz-linear-gradient(0deg, rgba(201,219,233,1) 0%, rgba(243,243,243,1) 80%);
background: -webkit-linear-gradient(0deg, rgba(201,219,233,1) 0%, rgba(243,243,243,1) 80%);
background: linear-gradient(0deg, rgba(201,219,233,1) 0%, rgba(243,243,243,1) 80%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9dbe9",endColorstr="#f3f3f3",GradientType=1);
}

.railing ul.sub-menu.cable {
background: rgb(202,208,213);
background: -moz-linear-gradient(0deg, rgba(202,208,213,1) 0%, rgba(243,243,243,1) 80%);
background: -webkit-linear-gradient(0deg, rgba(202,208,213,1) 0%, rgba(243,243,243,1) 80%);
background: linear-gradient(0deg, rgba(202,208,213,1) 0%, rgba(243,243,243,1) 80%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cad0d5",endColorstr="#f3f3f3",GradientType=1);
}

.railing ul.sub-menu.picket {
background: rgb(212,213,202);
background: -moz-linear-gradient(0deg, rgba(212,213,202,1) 0%, rgba(243,243,243,1) 80%);
background: -webkit-linear-gradient(0deg, rgba(212,213,202,1) 0%, rgba(243,243,243,1) 80%);
background: linear-gradient(0deg, rgba(212,213,202,1) 0%, rgba(243,243,243,1) 80%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d4d5ca",endColorstr="#f3f3f3",GradientType=1);
}

.railing ul.sub-menu.infinity {
background: rgb(202,213,209);
background: -moz-linear-gradient(0deg, rgba(202,213,209,1) 0%, rgba(243,243,243,1) 80%);
background: -webkit-linear-gradient(0deg, rgba(202,213,209,1) 0%, rgba(243,243,243,1) 80%);
background: linear-gradient(0deg, rgba(202,213,209,1) 0%, rgba(243,243,243,1) 80%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cad5d1",endColorstr="#f3f3f3",GradientType=1);
}

/* toggle class with menu.js */
.railing ul.sub-menu.shadow {
-webkit-box-shadow: 0px 5px 7px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow:    0px 5px 7px 0px rgba(50, 50, 50, 0.5);
box-shadow:         0px 5px 7px 0px rgba(50, 50, 50, 0.5);
}

.railing ul.sub-menu ul { margin: 0;}

.railing ul.sub-menu li {
	float: none;
	margin: 0;
	padding: 0 5px;
	font-size: 12px;
	text-transform: none;
	width: 100%;
	background: none;
	height: auto;
}

.railing ul.sub-menu .leaders li span { font-size: 10.5px; }


.railing ul.sub-menu li.active > a { color: #000; }
.railing ul.sub-menu li a { color: #333; font-weight: strong; }
.railing ul.sub-menu li.active > a:hover,
.railing ul.sub-menu li a:hover { color: #000; }
.railing ul.sub-menu li > a:hover { background: white; }

li.menu-title h4, .title, ul.railing.menu strong.title { color: #333; }

.railing ul.sub-menu li.menu-title { margin-bottom: 10px;  }
.railing ul.sub-menu .menu-group { color: #888; margin-bottom: 10px; }

.railing ul.sub-menu .menu-group li { margin-bottom: 3px; }

#home.sub-menu {
	position: relative; 
	max-height: 2000em; 
	background: none; 
	top: auto; 
	left: auto;
	margin: 30px auto; 
}

#home.sub-menu.shadow {
-webkit-box-shadow: none !important;
-moz-box-shadow:    none !important;
box-shadow:         none !important;
}



 

/* #Media Queries
================================================== */

	/* full desktop (devices and browsers) */
	@media only screen and (min-width: 960px) {}
	
	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {

	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	/* Note: Design for a width of 768px */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	/* Note: Design for a width of 320px */
	@media only screen and (max-width: 767px) {

		#railing-title {display:none;}
				
		ul.railing.menu {
			position: absolute;
			top: 5px;
			width: 100%;
		}
		
		ul.railing.menu  li {
			float: left;
			margin: 0;
			height: auto;
			overflow: visible;
		}
		
		ul.railing.menu li.top-link > a {
			margin: 10px 10px 7px 10px;
		}		
		
		.railing ul.sub-menu { top: 35px;	}
		
		.railing ul.sub-menu > li { padding-left: 10px; }
		
		.railing ul.sub-menu .container .columns { width: 400px !important; }
		
		.railing ul.sub-menu .columns { margin-bottom: 0; }
		
		.railing ul.sub-menu li.menu-title { margin-bottom: 0; }
		.railing ul.sub-menu li.menu-title:hover { margin-bottom: 10px; }
		.railing ul.sub-menu ul.railing.menu-group { margin-bottom: 0; } 
		
		
		/* small menus */
		
		.touch li.menu-title:hover > ul {
			max-height: 1000em;
			overflow: visible;
			
			-moz-transition: max-height 0.5s ease-in-out;
			-webkit-transition: max-height 0.5s ease-in-out;
			-o-transition: max-height 0.5s ease-in-out;
			transition: max-height 0.5s ease-in-out;			
		}
		
		.touch li.menu-title ul { 
			max-height: 0;
			overflow: hidden;			
		}
		
		/* #home.sub-menu { display: none; } */
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	/* Note: Design for a width of 480px */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	/* Note: Design for a width of 320px */
	@media only screen and (max-width: 479px) {
		
		ul.railing.menu li.top-link > a {
			font-size: 20px;
			margin: 10px 5px 7px 5px;
		}
		
		.railing ul.sub-menu .container .columns { width: 280px !important; }
	
	}