/*

	File: home-nav.css
	Media: screen
	stcharleshartland.com
	Version 1
	Walleworks, LLC
	3-16-2016

/* Custom Dropdown Nav Styles
--------------------------------------------------------------------------------------- */
nav#mainNav { padding: 0; font-family: "Ubuntu", sans-serif; }
#mainNav ul.navOptions { float:right; margin: 0 auto; padding: 0; background: #000; text-align: center; position: relative; }
#mainNav ul.navOptions li { width: 188px; float: left; display: inline; text-align: center; color: #787876; letter-spacing: .1em; }
#mainNav li:hover, #mainNav li.active { background:#999999; }
#mainNav li li:hover { background: none; }
#main_nav li.last { margin-right: 0; border-right: none; }
#mainNav li a { color: #ffffff; text-decoration: none;  font-size: 1.2em; font-weight: 700; }
#mainNav li a:hover { /*color: #e8c55a;*/ color: #8A1F03; }
#mainNav li a.active { color: #e8c55a; }

#mainNav a.mainNavLink, div.mainNavLink { display: block; padding: 12px; }
div.mainNavLink { color: #ffffff; }
#mainNav a.mainNavLink:hover { /*color: #F4D062;*/ color: #8A1F03; }
#mainNav ul.navOptions li span { display: inline-block; font-weight: 400; font-size: .7em; text-transform: none; color: #F4D062; text-align: center; }

#mainNav ul.navOptions li a, div.mainNavLink { color: #ffffff; text-decoration: none;  font-size: 1.2em; font-weight: 700; }
#mainNav ul.navOptions li.last { margin-right: 0; border-right: none; }
#mainNav ul.navOptions li .navOptionContent ul li.subMenuLink { color: #000000; font-size: 1.0em; font-weight: 700; cursor: pointer; }
#mainNav ul.navOptions li .navOptionContent ul li.subMenuLink a { font-size: 1.0em; }

.mainOptionContainer { border-right: 1px solid #FFFFFF; font-weight: 900; text-transform: uppercase; }

.mainNavDropdown { display: none; position: absolute; z-index: 1000; width: 1002px; top: 60px; left: -250px; font-size: .8em; }
.mainOptionContainer:hover .mainNavDropdown { display: block; }

.mainNavBorder { width: 1002px; height: 12px; background-color:#F4D062; border-left: 1px solid #000000; border-right: 1px solid #000000;  }

.navTriangle { 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;}
.navTriangle1 { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid #000000; position: relative; top: 0px; left: 335px; z-index: 99; margin-top: 4px;}
.navTriangle2 { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid #000000; position: relative; top: 0px; left: 523px; z-index: 99; margin-top: 4px;}
.navTriangle3 { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid #000000; position: relative; top: 0px; left: 711px; z-index: 99; margin-top: 4px;}
.navTriangle4 { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid #000000; position: relative; top: 0px; left: 891px; z-index: 99; margin-top: 4px;}
.triOption_1of4 { left: 335px; }
.triOption_2of4 { left: 523px; }
.triOption_3of4 { left: 711px; }
.triOption_4of4 { left: 891px; }


.navOptionContent { position: relative; color: #333333; height: 460px; border-left: 1px solid black; border-bottom:1px solid black; border-right: 1px solid black; }
.navOptionContent ul li { font-size: 0.85em; }

.mainNav_1 { width: 212px; height: 448px; padding: 20px 0 0 0; border: none; background: #ffffff; opacity: 0.96; position: absolute; top: 0; left: 0; overflow: hidden; }
.mainNav_2 { width: 212px; height: 448px; padding: 20px 0 0 0; border: none; background: #ffffff; opacity: 0.96; position: absolute; top: 0; left: 250px; overflow: hidden; }
.mainNav_3 { width: 212px; height: 448px; padding: 20px 0 0 0; border: none; background: #ffffff; opacity: 0.96; position: absolute; top: 0; left: 500px; overflow: hidden; }
.mainNav_4 { width: 212px; height: 448px; padding: 20px 0 0 0; border: none; background: #ffffff; opacity: 0.96; position: absolute; top: 0; left: 750px; overflow: hidden; }

#mainNav ul.navOptions .navOptionContent ul { padding: 12px 24px 0 14px; }
#mainNav ul.navOptions .navOptionContent ul li { margin-bottom: 10px; float: none; display: block; border-right: none; text-align: left; line-height: 1.8em; width: 210px; }
#mainNav ul.navOptions .navOptionContent ul.subMenu { padding-top: 10px; display:none; font-size: .9em; }
#mainNav ul.navOptions .navOptionContent ul li.subMenuLink { /*background: url(../images/arrow-right.png)no-repeat right 1px; background-size:12px;*/ }
#mainNav ul.navOptions .navOptionContent ul li.subMenuLink:hover { /*background: url(../images/arrow-down.png)no-repeat right 1px; background-size:12px;*/ }
#mainNav ul.navOptions .navOptionContent ul li.sublink { font-size:.8em; padding-left:21px; background: url(../images/subnav_arrow.png)no-repeat 5px center; background-size:8px; }
#mainNav ul.navOptions .navOptionContent ul li.sublink a { color:#666; }
#mainNav ul.navOptions .navOptionContent ul li.sublink a:hover { /*color:#e8c55a;*/ color: #8A1F03; }
#mainNav ul.navOptions .navOptionContent ul li a { color: #333333; line-height: 1.1em; }
#mainNav ul.navOptions .navOptionContent ul li a:hover { /*color: #F4D062;*/ color: #8A1F03; }

.navImage_1, .navImage_1of4_left { position: absolute; top: 0; left: 250px; }
.navImage_1of4_right { display: none; }
.navImage_2of4_left { position: absolute; top: 0; left: 0px; }
.navImage_2of4_right { position: absolute; top: 0; right: 0px; }
.navImage_3of4_left { position: absolute; top: 0; left: 0px; }
.navImage_3of4_right { position: absolute; top: 0; right: 0px; }
.navImage_4of4_left { display: none; }
.navImage_4, .navImage_4of4_right { position: absolute; top: 0; left: 0px; }

.subArrow { float: right; }
.subArrow img { width: 12px; margin-top: 4px; }

.mobileNav { display: none; }