/* /////////////////////////////////////
	MUM Tablet CSS - Version 3.2
	by Alek Lisefski
	http://www.bluesheepstudios.com
///////////////////////////////////// */


/* /////////////////////////////////
	VISIBILITY
///////////////////////////////// */

nav.desktop,
.logo.desktop,
.desktop,
#nav-close,
.mobile,
#bgvid {
	display: none;
}

.tablet,
.header.mobile,
#nav-open,
#sub-open,
#sub-close,
#hero .slide img.tablet {
	display: block;
}

/* /////////////////////////////////
	LAYOUT
///////////////////////////////// */

.container,
.body .container { 
	width: 92%;
	padding: 55px 4% 55px 4%;
}

.container.landing { 
	padding-top: 40px;
	padding-bottom: 20px;
}

.body .container { 
	padding-top: 35px;
	padding-bottom: 25px;
}

article,
aside,
.col {
	display: block;
}

article {
	width: 100%;	
}

aside {
	display: none;
}

/* /////////////////////////////////
	LANDING PAGES
///////////////////////////////// */

article.full .col.main {
	width: 72%;
	padding-right: 6%;
}

article.full .col.side,
article.full .block.side {
	width: 22%;
}

.landing #page-header h1, 
#page-header.landing h1.small,
.landing #breadcrumbs {
    margin-left: 0;
}

.landing article .col.main {
	width: 55%;
	padding-right: 5.5%;
}

.landing article .col.side {
	width: 39.5%;
}

.landing article.full .col.main {
	width: 62%;
	padding-right: 7%;
}

.landing article.full .col.side,
.landing article.full .block.side {
	width: 31%;
}



/* /////////////////////////////////
	BASIC TEXT / HEADINGS
///////////////////////////////// */

h1,
h2.large {
	font-size: 30px;
	line-height: 36px;
}

h2 {
	margin-bottom: 50px;
}

h3 {
	font-size: 20px;
	line-height: 24px;
	margin-bottom: 15px;
}

/* /////////////////////////////////
	HEADER
///////////////////////////////// */


header .topNav {
	margin-right: -20px;
}


header .topNav#portals {
	margin-left: 0;
}

.header .container {
	padding-top: 15px;
	padding-bottom: 15px;
}

.header .container a {
	text-decoration: none;
}

.header .logo {
	float: left;
	display: block;
	width: 70px;
	height: 70px;
	background: url('../media/logo_mobile.gif') no-repeat left top;
	margin: 0 14px 0 0;
}

.header .name {
	display: inline-block;
	font-family: MuseoSlab, arial, sans-serif;
	font-size: 14px;
	line-height: 22px;
	color: #333;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-top: 18px;
}

.header .name strong {
	display: block;
	font-weight: bold;
	font-size: 18px;
	text-transform: none;
	letter-spacing: 0;
}

/* Start New Header */

header.new .container { 
	padding-top: 15px;
	padding-bottom: 0;
}

header.new .topNav {
	margin-left: -10px;	
}

header.new .topNav#portals {
	margin-right: 0;
}

header.new .topNav#portals .anchor {
	margin-top: -23px;
	margin-bottom: -20px;
}

/* End New Header */


/* /////////////////////////////////
	NAV
///////////////////////////////// */


#nav-open,
#nav-close {
	display: block;
	float: right;
	font-family: MuseoSlab, arial, sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #333;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-top: 30px;
}

#nav-close {
	display: none;
}

#nav-open .icon,
#nav-close .icon {
	display: block;
	float: right;
	margin-left: 20px;
	width: 22px;
	height: 20px;
	background: url('../media/icons_nav_sprite.png') no-repeat left top;
}

#nav-close .icon {
	background: url('../media/icons_nav_sprite.png') no-repeat -40px top;
}

#nav-open:hover .icon {
	background-position: left -40px;
}

#nav-close:hover .icon {
	background-position: -40px -40px;
}

#nav .container {
	padding-top: 30px;
	padding-bottom: 20px;
}

#nav {
	z-index: 1001;
	overflow: visible;
}

#nav ul li {
	position: relative;
	width: 100%;
	padding-bottom: 20px;
	border-bottom: 2px solid #f5efdd;
	margin-top: 20px;
}

#nav ul li.last {
	padding-bottom: 0;
	border-bottom: 0;
}

#nav ul li  a {
	display: block;
	font: bold 18px/18px MuseoSlab, arial, sans-serif;	
}

#nav ul li a span {
	display: block;
	font: normal 12px/18px MuseoSans, arial, sans-serif;
	color: #bfb69f;	
}

#nav ul li  a:hover {
	color: #000;
	text-decoration: none;
}

#nav ul li a:hover span,
#nav ul li.current a span {
	color: #666;
}

/* Drop-downs */


#nav ul li ul .arrow {
	display: block;
	position: absolute;
	left: -19px;
	top: 20px;
	width: 14px;
	height: 37px;
	background: url('../media/nav_mobile_arrow.png') no-repeat left top;
}

#nav ul li ul .close {
	margin: 0;
	width: 34px;
	height: 34px;
	background: url('../media/popUp_close.png') no-repeat 10px 10px;
	opacity: 1;
  	filter:alpha(opacity=100);
  	
  	-webkit-transition: opacity .1s ease;	
	-moz-transition: opacity .1s ease;			
	-o-transition: opacity .1s ease;						
	transition: opacity .1s ease;
}

#nav ul li ul .close:hover {
	color: #fff;
	opacity: 0.5;
  	filter:alpha(opacity=50);
  	
  	-webkit-transition: opacity .1s ease;	
	-moz-transition: opacity .1s ease;			
	-o-transition: opacity .1s ease;						
	transition: opacity .1s ease;
}

#nav ul li ul {
	display: none;
	position: relative;
	float: right;
	overflow: visible;
	z-index: 99;
	width: 45%;
	padding: 30px 30px 20px;
	margin: -56px 0 0 0;
}

#nav  ul li ul li {
	width: 80%;
	padding: 0;
	border: 0;
	margin: 0;
}

#nav  ul li ul li a {
	font: normal 15px/20px MuseoSans, arial, sans-serif;
	margin-bottom: 12px;
	color: #fff;
	opacity: 1;
  	filter:alpha(opacity=100);
  	
  	-webkit-transition: opacity .1s ease;	
	-moz-transition: opacity .1s ease;			
	-o-transition: opacity .1s ease;						
	transition: opacity .1s ease;
}

#nav ul li ul li a:hover {
	color: #fff;
	opacity: 0.5;
  	filter:alpha(opacity=50);
  	
  	-webkit-transition: opacity .1s ease;	
	-moz-transition: opacity .1s ease;			
	-o-transition: opacity .1s ease;						
	transition: opacity .1s ease;
}

.dropDown ul li a[title="noAnchor"]:hover,
section.dropDown .grid.fourths li a[title="noAnchor"]:hover,
.menu ul li a[title="noAnchor"]:hover,
section.menu .grid.fourths li a[title="noAnchor"]:hover {
	cursor: pointer;
	
}


/* /////////////////////////////////
	INTERIOR PAGES
///////////////////////////////// */


#page-header h1,
#breadcrumbs {
	margin-left: 42px;
}

#page-header article.full h1, 
#page-header article.full #breadcrumbs {
    margin-left: 0;
}

#page-header .container {
	padding-top: 40px;
	padding-bottom: 40px;
}

/* /////////////////////////////////
	SUBNAV
///////////////////////////////// */


#page-header aside {
	position: absolute;
	display: block;
	top: -20px;
	left: -325px;
	width: 320px;
	max-width: 320px;
	margin-right: 0;
	float: none;		
}


#subnav label {
	margin-left: 0;
	height: 50px;
	font-size: 16px;
	line-height: 53px;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 20px;
	background: url('../media/bg_green.gif') repeat left top;
}


#sub-open,
#sub-open .icon {
	position: absolute;
	right: -55px;
	top: 0;
	display: block;
	width: 55px;
	height: 50px;
	background: url('../media/bg_green.gif') repeat left top;
}

#sub-open .icon {
	right: 0;
	background: url('../media/subnav_open.png') no-repeat 20px 19px;
}

#sub-open:hover {
	background: #f6bd27;
}

#sub-close {
	position: absolute;
	top: 8px;
	right: 5px;
	width: 34px;
	height: 34px;
	background: url('../media/popUp_close.png') no-repeat 10px 10px;
	
	opacity: 1;
  	filter:alpha(opacity=100);
  	
  	-webkit-transition: opacity .1s ease;	
	-moz-transition: opacity .1s ease;			
	-o-transition: opacity .1s ease;						
	transition: opacity .1s ease;
}

#sub-close:hover {
	opacity: 0.5;
  	filter:alpha(opacity=50);
  	
  	-webkit-transition: opacity .1s ease;	
	-moz-transition: opacity .1s ease;			
	-o-transition: opacity .1s ease;						
	transition: opacity .1s ease;
}

aside .back {
	display: none;

}

#subnav {
	background: #fff;
}

#subnav ul {
	margin-bottom: 0;
}


#subnav li a {
	padding: 15px 20px 15px;
	font-size: 16px;
	line-height: 20px;	
}

#subnav li.parent > a,
#subnav li.parent.open > a {
	padding-top: 15px;
	padding-bottom: 14px;
	background-position: 95% 21px;
}

#subnav li.parent > a:hover {
	background-position: 95% -39px;
}


#subnav li ul li a {
	font-size: 14px;
	line-height: 16px;
}

/* /////////////////////////////////
	HOME INTRO
///////////////////////////////// */

.intro h1 {
	font-size: 32px;
	line-height: 38px;
}

.intro p {
	width: 90%;
}

#hero .slide .slide-heading {
	position: absolute;
	top: 18%;
	left: 0;
	width: 100%;
}


.slide-heading h1 {
	font-size: 48px;
	line-height: 54px;
	margin-bottom: 30px;
}

.slide-heading p {
	font-size: 18px;
	line-height: 24px;
	width: 75%;
	margin: 0 auto 30px;
}

.slide-heading .button,
.slide-heading .button:visited {
	padding: 10px 30px 8px;
	font: bold 16px/20px MuseoSansBold, arial, sans-serif;
}

#home-grid .item {
	width: 50%;
}

#home-grid .item.second,
#home-grid .item.third,
#home-grid .item.sixth {
	background: #5dbf31;
}

#home-grid .item.first,
#home-grid .item.fourth,
#home-grid .item.fifth {
	background: #0179be;
}


/* Bevan Home 4-col */

#home-4-col .item {
	float: left;
	display: block;
	width: 25%;
	margin: 0 0 30px 0;
}

#home-4-col .item h3 {
	font: bold 12px/16px MuseoSansBold, arial, sans-serif;
	letter-spacing: 0;
	width: 92%;
	padding: 10px 4% 12px;
}

#home-4-col .description .col {
	font-size: 13px;
	line-height: 18px;
}

/* NEW HOME */

#home-4-col.new .container {
	padding: 0 0 40px 0;
}

#home-4-col.new .item {
	width: 49%;
	margin: 0 .5% 1% .5%;
}

#home-4-col.new .item .overlay {
	bottom: 0;
}

#home-4-col.new .item .overlay .content,
#home-4-col.new .item:hover .overlay .content {
	margin-top: 10px;
	font-size: 14px;
	line-height: 18px;
}

#home-4-col.new .item .overlay h3 {
	font: bold 13px/20px MuseoSansBold, arial, sans-serif;
	width: 100%;
	padding: 0;
}

/* /////////////////////////////////
	HERO
///////////////////////////////// */

#hero .slide .slide-info {
	bottom: 80px;
}

#hero .slide .slide-info {
	position: absolute;
	right: 10%;
	bottom: 100px;
	width: 50%;
}

#hero .slide .slide-info .heading,
#hero .slide .slide-info p {
	text-align: left;
	padding: 12px 90px 12px 20px;
}

/* Heading Overlay */

.slide h2.overlay {
	width: 90%;
	left: 5%;
	top: 30%;
	font-size: 36px;
	line-height: 38px;
}

/* /////////////////////////////////
	GRIDS
///////////////////////////////// */

.menu .grid.fourths .item {
	width: 50%;
	margin-right: 0;
	margin-bottom: 20px;
}

.menu .grid.fourths .item.circle,
.landing .col.side .item.circle {
	max-width: 300px;
}

.grid.thirds .item {
	width: 32%;
	margin-right: 2%;
}

.grid.thirds .item.third {
	margin-right: 0;
}

.grid.thirds.circles .item .image label,
.item.circle .image label,
.landing .col.side .item.circle .image label,
.item.circle .image label {
	margin-top: -55px;
	margin-bottom: 35px;
}


.grid.thirds.circles .item .image label span,
article .item.circle .image label span {
	top: 0;
	font-weight: normal;
	font-size: 13px;
	height: 38px;
	line-height: 38px;
}

.menu .item.circle .image label span {
	top: 5px;
	height: 40px;
	line-height: 40px;
	font-size: 16px;
}

.grid.thirds.boxes a.item h3,
.grid.thirds.boxes a.item p {
	width: 100%;
	padding: 0;
}

.grid.thirds.boxes a.item h3 {
	font-size: 16px;
	margin-bottom: 15px;
}

.grid.fourths.boxes .item .button {
	font-size: 11px;
}

.slide-left,
.slide-right {
	background-color: #fff;
}

.gray .slide-left,
.gray .slide-right {
	background-color: #fcfaf1;
}

.slide-left.news, 
.slide-right.news {
    top: 40%;
}

.body.application .call-out p .button,
.body .call-out.buttons a.button {
	margin-bottom: 0;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	text-align: center;
}

.body .call-out.buttons a.button {
	margin-bottom: 10px;
}

/* /////////////////////////////////
	INTERIOR PAGE SLIDESHOW
///////////////////////////////// */

.slideshow .slide .slide-info h3 {
	font-size: 20px;
	line-height: 24px;
	margin-bottom: 18px;
}

.slideshow  .slide-left,
.slideshow  .slide-right {
	z-index: 101;
}


/* /////////////////////////////////
	NEWS / TAN
///////////////////////////////// */

#news,
section#page-header {
	border-top: 5px solid #fff;
}

.tan .cta {
	width: 40%;
	margin-top: 0;
}

.tan#news.home span {
	display: block;
	width: 56%;
	padding: 10px 2%;
}

.tan#news.home span.cycle-slideshow {
	width: 60%;
}


.tan#news.home span .slide {
	width: 92%;
	padding: 10px 4%;
}

.tan.home .cta.large {
	margin-left: -10px;
}

.tan.home .cta.large img {
	width: 75px;
	height: 75px;
	margin: -25px 12px 0 0;
}

/* /////////////////////////////////
	CONTACT BAR
///////////////////////////////// */

.green.contact .anchor {
    width: 20%;
}

.contactForm .container {
	padding-bottom: 60px;
}

.contactForm label {
	font: bold 10px/14px MuseoSansBold, arial, sans-serif;
}


/* /////////////////////////////////
	BLOG
///////////////////////////////// */

.post {
	padding: 0;
	margin-bottom: 40px;
}


#subscribe,
.subscribe.fixed {
	width: auto !important;
	position: static;
	top: 0;
	z-index: 1;
}


/* /////////////////////////////////
	FOOTER
///////////////////////////////// */

footer {
	
}

footer .container {
	text-align: left;
	padding-top: 40px;
}

footer .col.last {
	width: 100%;
	clear: left;
	padding: 0;
	margin-left: auto;
	margin-top: 30px;
}

footer .col {
	width: 33%;
	border-left: 0;
}

footer .social {
	float: none;
	margin: auto;
}


section.footer .container {
	padding: 20px 0;
	text-align: left;
	font-size: 13px;
	color: #999;
}

/* /////////////////////////////////
	Visitors Weekend Dates
///////////////////////////////// */


section.body article .visitors-weekend-dates h3 {
	font-size: 18px;
}

.container.landing .visitors-weekend-dates .select,
.visitors-weekend-dates.wide .select {
	width: 50%;
}

/* In tan page header */

#page-header .visitors-weekend-dates {

}

#page-header .visitors-weekend-dates h3 {
	display: block;
	text-align: center;
	float: none;
	line-height: 36px;
	margin: 0 0 5px 0;
	font-size: 24px;
}

#page-header .visitors-weekend-dates .select {
	width: 100%;
	float: none;
	margin-bottom: 10px;
}

#page-header .visitors-weekend-dates .button,
#page-header .visitors-weekend-dates .select .ui-selectmenu {
	margin: 0;
}

#page-header .visitors-weekend-dates .button {
	float: none;
	width: 100%;
	text-align: center;
	padding: 7px 0 5px;
	margin-left: 0;
}

#page-header .visitors-weekend-dates .mobile {
	display: block;
}

#page-header .visitors-weekend-dates .not-mobile {
	display: none;
}


/* Department page NEW - BG Video & Subscribe Box */

#hero.bg-video .slide .slide-info.download {
	right: 6%;
	top: 10%;
}

/* NEW blue download box with image/description */


#hero.bg-video .slide .slide-info.download.blue {
	top: -5px;
	width: 50%;
}



/* /////////////////////////////////
	VISITORS WEEKEND GRAPHICS
///////////////////////////////// */

/* Home Page */


.visitors-weekend img {
	margin-bottom: -10px;
}

.visitors-weekend div {
	padding: 25px 3% 20px 8%;
	width: 38.5%;
}

/* Virtual Tour */

.col.half .visitors-weekend img,
.col.half .virtual-tour img {
	margin-bottom: -40px;
}

.col.half .visitors-weekend div.blue,
.col.half .virtual-tour div.blue  {
	padding-right: 5%;
	padding-left: 5%;
	width: 90%;
}


/* Sidebar */


#subnav .visitors-weekend div {
	padding: 12% 6% 25px 6%;
	width: 88%;
	text-align: center;
}

.col.side .visitors-weekend div {
	padding-top: 17%;
}


#subnav .visitors-weekend div p {
	font-size: 15px;
	line-height: 22px;
}

#subnav .visitors-weekend.blue .button.green {
	top: 43%;
}

.col.side .visitors-weekend.blue .button.green {
	top: auto;
	bottom: 38%;
}



/* /////////////////////////////////
	CLASSES
///////////////////////////////// */

h2.border-top,
h3.border-top,
h4.border-top {
	margin-top: 40px;
	margin-bottom: 30px;
}

.body img {
	max-width: 100%;
	margin: 0 0 10px 0;
}

.float-left,
.alignleft,
.body img.alignleft,
.caption.float-left,
.caption.alignleft  {
	float: left;
	margin: 0 25px 20px 0;
	max-width: 45%;
}

.float-right,
.alignright,
.body img.alignright,
.caption.float-right,
.caption.alignright {
	float: right;
	margin: 0 0 20px 25px;
	max-width: 45%;
}


/* /////////////////////////////////
	@2x Images
///////////////////////////////// */

@media  only screen and (-webkit-min-device-pixel-ratio: 1.5),  
        only screen and (   min--moz-device-pixel-ratio: 1.5),  
        only screen and (     -o-min-device-pixel-ratio: 3/2),  
        only screen and (        min-device-pixel-ratio: 1.5),  
        only screen and (min-resolution: 192dpi) {  
        
	
	.header .logo {
		background-image: url('../media/logo_mobile@2x.gif');
		-webkit-background-size: 70px 70px;
		-moz-background-size: 70px 70px;
		background-size: 70px 70px;
	}
	
	#nav-open .icon,
	#nav-close .icon {
		background-image: url('../media/icons_nav_sprite@2x.png');
		-webkit-background-size: 60px 58px;
		-moz-background-size: 60px 58px;
		background-size: 60px 58px;
	}
	
	#nav ul li ul .arrow {
		background-image: url('../media/nav_mobile_arrow@2x.png');
		-webkit-background-size: 14px 37px;
		-moz-background-size: 14px 37px;
		background-size: 14px 37px;
	}
	
	#nav ul li ul  .close {
		background-image: url('../media/popUp_close@2x.png');
		-webkit-background-size: 14px 47px;
		-moz-background-size: 14px 47px;
		background-size: 14px 47px;
	}
	
	#sub-open .icon {
		background-image: url('../media/subnav_open@2x.png');
		-webkit-background-size: 18px 14px;
		-moz-background-size: 18px 14px;
		background-size: 18px 14px;
	}
	
	#sub-close {
		background-image: url('../media/popUp_close@2x.png');
		-webkit-background-size: 14px 47px;
		-moz-background-size: 14px 47px;
		background-size: 14px 47px;

	}
		
}