/*

	File: sub-nav.css
	Media: screen
	stcharleshartland.com
	Version 4
	Walleworks, LLC
	3-10-2016

/* Basic Selectors
--------------------------------------------------------------------------------------- */
.subNavContainer { /*margin-top: 90px;*/ padding: 0; font-family: "Ubuntu", sans-serif; /*clear:left; */}
.subNav { /*clear: left;*/ float:right; margin: 0 auto; padding: 0; /*background: #000;*/ /*width: 1000px;*/ text-align: center; position: relative; margin-top: 0px; }
.subNav li { /*width: 156px;*/ /*height: 56px;*/ float: left; display: inline; text-align: center; color: #787876; letter-spacing: .1em; /*padding-bottom: 15px;*/ padding-bottom: 3px;}
.subNav li ul li { min-height: 30px;}
.subNav li:hover, .subNav li.active { background:#dddddd; }
.subNav li li:hover { background: none; }
.subNav li.last { margin-right: 0; border-right: none; }
.subNav li a { color: #ffffff; text-decoration: none;  /*font-size: 0.85em;*/ font-size: 1.0em; font-weight: 700; }
.subNav li a:hover { color: #8A1F03; }
.subNav li a.active { color: #8A1F03; }
.options_5 li { width: 156px; }
.options_4 li { width: 188px; }

.subNav li a.subNav_link { display: block; padding: 12px; }
a.subNavLink { padding: 12px; }
div.subNavLink { color: #ffffff; }
div.subNavLink:hover ( color: #8A1F03; )

.header_section_right { float: right; width: 660px; height: auto; padding: 20px 0 0 0; display: inline; position: relative; }
.header_section_right a { color: #fff; }

.subNavOption { /*height: 100px;*/ border-right: 1px solid #F4D062; font-weight: 900; text-transform: uppercase; height: 56px; background-color: #000; /*padding-top:20px;*/ display: -webkit-flex; -webkit-flex-direction: column; -webkit-justify-content: center; display: flex; justify-content: center; flex-direction: column; height: 60px; }
.subNavOption span, .subNavDropdown_wrap span{ font-weight: 400; font-size: .7em; text-transform: none; color: #ea9203; }
.subNav .last { border-right: none; }
a.subNavOption { float: none; margin: 0; }
.subNavDropdown { display: none; position: absolute; z-index: 1000; width: 782px; top: 52px; left: -2px; font-size: .8em; }
.subNavOption:hover .subNavDropdown { display: block; }
.subNavContent { position: relative; color: #333333; height: 440px; }
.subNavContent_interior { position: relative; color: #333333; }

.subNavBorder { width: 782px; height: 12px; background-color:#F4D062; border-left: 2px solid #F4D062; border-right: 2px solid #F4D062; }
.subNavTriangle { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid #000000; position: relative; top: 0px; z-index: 99; margin-top: 4px;}
.triOption_1of5 { left: 66px; }
.triOption_2of5 { left: 222px; }
.triOption_3of5 { left: 378px; }
.triOption_4of5 { left: 534px; }
.triOption_5of5 { left: 690px; }
.subNavTriangle_1 { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid #000000; position: relative; top: 0px; left: 66px; z-index: 99; margin-top: 4px;}
.subNavTriangle_2 { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid #000000; position: relative; top: 0px; left: 222px; z-index: 99; margin-top: 4px;}
.subNavTriangle_3 { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid #000000; position: relative; top: 0px; left: 378px; z-index: 99; margin-top: 4px;}
.subNavTriangle_4 { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid #000000; position: relative; top: 0px; left: 534px; z-index: 99; margin-top: 4px;}
.subNavTriangle_5 { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid #000000; position: relative; top: 0px; left: 690px; z-index: 99; margin-top: 4px;}

.subNavContent { border-left: 1px solid black; border-bottom:1px solid black; border-right: 1px solid black; }
.subNavContent ul, .subNavContent_interior ul { padding: 0 0px; margin: 0 10px;}
.subNavContent li {width: 140px; margin-bottom: 0;}
.subNavContent ul li, .subNavContent_interior ul li { /*margin-bottom: 15px;*/ }
.subNavContent ul li.sublink, .subNavContent_interior ul li.sublink { font-size:.8em; padding-left:21px; background: url(../images/subnav_arrow.png)no-repeat 5px center; background-size:8px; min-height: 0; }
.subNavContent ul li.sublink a, .subNavContent_interior ul li.sublink a { color:#666; }
.subNavContent ul li.sublink a:hover, .subNavContent_interior ul li.sublink a:hover { color:#8A1F03; }
.subNavContent ul li a, .subNavContent_interior ul li a { color: #333333; line-height: 1.1em; }
.subNavContent_link { background: #f5f5f5; width: 135px; height: 30px; line-height: 30px; padding: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; display: block; text-align: center; font-size: 1.3em; }
.subNavContent_link:hover {  }
.subNavContent h3 { text-transform: uppercase; font-size: 2.4em; text-transform: uppercase; color: #F6AA32; margin: 0; padding: 0; text-align: left; }
.nav_intro { width: 340px; float: left; display: inline; margin-right: 48px; text-align: left; text-transform: none; }

.subNavLinks { width: 200px; padding: 50px 0 30px 0; background: #f5f5f5; border: 1px solid #cccccc; opacity: 0.96; position: absolute; top: 0; }
.snLinkOption_1of5 { left: 0; }
.snLinkOption_2of5 { left: 156px; }
.snLinkOption_3of5 { left: 312px; }
.snLinkOption_4of5 { left: 468px; }
.snLinkOption_5of5 { left: 624px; }
.subNavPosition { /*width: 200px;*/ width: 160px; height: 440px; padding: 20px 0 0 0; border: none; background: #ffffff; opacity: 0.96; position: absolute; top: 0; }
.snPosition_1of5 { left: 0; }
.snPosition_2of5 { left: 156px; }
.snPosition_3of5 { left: 312px; }
.snPosition_4of5 { left: 468px; }
.snPosition_5of5 { /*left: 582px;*/ left: 622px; }

.subNavLinks_1 { width: 156px; padding: 50px 0 30px 0; background: #f5f5f5; border: 1px solid #cccccc; opacity: 0.96; position: absolute; top: 0; left: 0; }
.subNav_1 { width: 156px; height: 420px; padding: 20px 0 0 0; border: none; background: #ffffff; opacity: 0.96; position: absolute; top: 0; left: 0; }
.subNavLinks_2 { width: 156px; padding: 50px 0 30px 0; background: #f5f5f5; border: 1px solid #cccccc; opacity: 0.96; position: absolute; top: 0; left: 156px; }
.subNav_2 { width: 156px; height: 420px; padding: 20px 0 0 0; border: none; background: #ffffff; opacity: 0.96; position: absolute; top: 0; left: 156px; }
.subNavLinks_3 { width: 156px; padding: 50px 0 30px 0; background: #f5f5f5; border: 1px solid #cccccc; opacity: 0.96; position: absolute; top: 0; left: 312px; }
.subNav_3 { width: 156px; height: 420px; padding: 20px 0 0 0; border: none; background: #ffffff; opacity: 0.96; position: absolute; top: 0; left: 312px; }
.subNavLinks_4 { width: 156px; padding: 50px 0 30px 0; background: #f5f5f5; border: 1px solid #cccccc; opacity: 0.96; position: absolute; top: 0; left: 468px; }
.subNav_4 { width: 156px; height: 420px; padding: 20px 0 0 0; border: none; background: #ffffff; opacity: 0.96; position: absolute; top: 0; left: 468px; }
.subNavLinks_5 { width: 156px; padding: 50px 0 30px 0; background: #f5f5f5; border: 1px solid #cccccc; opacity: 0.96; position: absolute; top: 0; left: 624px; }
.subNav_5 { width: 156px; height: 420px; padding: 20px 0 0 0; border: none; background: #ffffff; opacity: 0.96; position: absolute; top: 0; left: 624px; }

.subNavContent li, .subNavContent_interior li { float: none; display: block; border-right: none; text-align: left; line-height: 1.8em; }
.subNavLinks ul li a { /*color: #ffffff;*/ }

.subNavDropdown a.btn_dropdown { margin: 10px 5px 0 0; text-align: center; font-size: 1.1em; color: #ffffff; height: 30px; line-height: 30px; background: #F6AA32 url(../images/bg_gradient_10.png) bottom left repeat-x; padding: 10px 20px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: 0; }
.subNavDropdown a.btn_dropdown:hover { background-color: #313131; text-decoration: none; color: #ffffff;}

.image_1of5_left, .image_5of5_right { display: none; }
.image_624, .image_1of5_right { position: absolute; top: 0; left: 156px; }
.image_624 img, .image_1of5_right img { width: 624px; height: 440px; }
.image_468, .image_2of5_right { position: absolute; top: 0; right: 0px; }
.image_468 img, .image_2of5_right img { width: 470px; height: 440px; } 
.image_156, .image_2of5_left { position: absolute; top: 0; left: 0px; }
.image_156 img, .image_2of5_left img { width: 156px; height: 440px; }
.image_312_left, .image_3of5_left { position: absolute; top: 0; left: 0px; }
.image_312_left img, .image_3of5_left img { width: 312px; height: 440px; }
.image_312_right, .image_3of5_right { position: absolute; top: 0; right: 0px; }
.image_312_right img, .image_3of5_right img { width: 312px; height: 440px; }
.image_468_left, .image_4of5_left { position: absolute; top: 0; left: 0px; }
.image_468_left img, .image_4of5_left img { width: 470px; height: 440px; }
.image_156_right, .image_4of5_right { position: absolute; top: 0; right: 0px; }
.image_156_right img, .image_4of5_right img { width: 156px; height: 440px; }
.image_624_left, .image_5of5_left { position: absolute; top: 0; left: 0px; }
.image_624_left img, .image_5of5_left img { width: 624px; height: 440px; } 

.image_small_2 { position: absolute; top: 0; right: 0px; }
.image_large_2 { position: absolute; top: 0; left: 0px; }

ul.submenu { padding-top: 10px; padding-bottom: 10px; display:none; height: auto;}
ul li.subMenuLink { background: url(../images/arrow-right.png)no-repeat right 1px; background-size:12px; color: #333333;}
ul li.subMenuLink:hover { background: url(../images/arrow-down.png)no-repeat right 1px; background-size:12px; }
ul li.sublink { font-size:.8em; padding-left:21px; background: url(../images/subnav_arrow.png)no-repeat 5px center; background-size:8px; }
ul li.sublink a { color:#666; }
ul li.sublink a:hover { color:#e8c55a; }

ul li.sublink { font-size:.8em; padding-left:21px; background: url(../images/subnav_arrow.png)no-repeat 5px center; background-size:8px; }
ul li.sublink a { color:#666; }