/*********************************************************************************************************/
/* styles specifically for the FOCUS subsite - 09/08/16                                                 */
/* The file name starts with a "z" purely so the rules here, come in after all the other style sheets  */
/******************************************************************************************************/ 

/***********************************************/
/* HTML tag styles                             */
/***********************************************/ 

body#focusTemplate{
	background-image: url(/img/acb_images/focus/background-focus.jpg); /* AMENDED FOR FOCUS TEMPLATE JULY 2016 */
}

#focusTemplate h1 {
   color: #0092c8; /* AMENDED FOR FOCUS TEMPLATE JULY 2016 */
}

#focusTemplate .h1colourBL {
	color:#2e3192; /* AMENDED FOR FOCUS TEMPLATE JULY 2016 */
}

/***********************************************/
/* Layout Divs                                 */
/***********************************************/

#focusTemplate #backleft {
	background-image: url(/img/acb_images/focus/backleft-focus.gif); /* AMENDED FOR FOCUS TEMPLATE JULY 2016 */
}
		
#focusTemplate #backright {
	background-color:#c0c5f6; /* AMENDED FOR FOCUS TEMPLATE JULY 2016 */
}
		
#focusTemplate #masthead{
	background-image: url(/img/acb_images/focus/header-back-focus.jpg); /* AMENDED FOR FOCUS TEMPLATE JULY 2016 */
}

/***********************************************/
/* Components                                  */
/***********************************************/

#focusTemplate #login {
	color: #0092c8; /* AMENDED FOR FOCUS TEMPLATE JULY 2016 */
}

#focusTemplate #menubar {
	background-image: url(/img/acb_images/focus/topmenu-back-focus-1colour.jpg); /* AMENDED FOR FOCUS TEMPLATE JULY 2016 */
}

#focusTemplate .contactlink a {
	color: #0092c8; /* AMENDED FOR FOCUS TEMPLATE JULY 2016 */
}

/************* #siteInfo styles ***************/

#focusTemplate #siteInfo{
	background-color: #2E3192; /* was #301186 for the more purple version, and was #223996 (original Focus purple) - AMENDED FOR FOCUS TEMPLATE JULY 2016 */
}

#focusTemplate #siteInfo img{
	padding: 0px; /* AMENDED FOR FOCUS TEMPLATE JULY 2016 */
}

/*********** #sectionLinks styles ***********/

#focusTemplate #sectionLinks h3{  /* AMENDED FOR FOCUS TEMPLATE JULY 2016 - the two colours for the two-tone effect were #016aab and #19226f - now a single colour */
	color:#FFFFFF;
	background: #2E3192; /* Old browsers */

/* IE9 SVG, needs conditional override of 'filter' to 'none' */

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNGQ5YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwNGQ5YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzNlMWY2ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZTFmNmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: -moz-linear-gradient(top,  #2E3192 0%, #2E3192 50%, #2E3192 51%, #2E3192 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2E3192), color-stop(50%,#2E3192), color-stop(51%,#2E3192), color-stop(100%,#2E3192)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  #2E3192 0%,#2E3192 50%,#2E3192 51%,#2E3192 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  #2E3192 0%,#2E3192 50%,#2E3192 51%,#2E3192 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  #2E3192 0%,#2E3192 50%,#2E3192 51%,#2E3192 100%); /* IE10+ */

background: linear-gradient(to bottom,  #2E3192 0%,#2E3192 50%,#2E3192 51%,#2E3192 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2E3192', endColorstr='#2E3192',GradientType=0 ); /* IE6-8 */
}

/************** #headlines styles **************/

#focusTemplate #wrapper {
	background-image: url(/img/acb_images/focus/wrapper-back-focus.jpg); /* AMENDED FOR FOCUS TEMPLATE JULY 2016 */
}

#focusTemplate #footercontent {
	color: #ffffff; /* AMENDED FOR FOCUS TEMPLATE JULY 2016 */
}

#focusTemplate #footercontent3 {
	width:150px; /* AMENDED FOR FOCUS TEMPLATE JULY 2016 */
	padding-top:4px; /* AMENDED FOR FOCUS TEMPLATE JULY 2016 */
}

/* ====================================== Potential Additional CSS for making design Responsive ====================================== */

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 1024px) {
	#focusTemplate #masthead { /* ADDED FOR FOCUS TEMPLATE JULY 2016 */
    background-image: url(/img/acb_images/focus/header-back-focus-portrait-tablet.jpg);
	}
	#focusTemplate #siteInfo {
	min-height: 70px; /* AMENDED FOR FOCUS TEMPLATE JULY 2016 */
	}
	#focusTemplate #footercontent {
	width: 45%!important; /* AMENDED FOR FOCUS TEMPLATE JULY 2016 */
	position: relative!important; /* AMENDED FOR FOCUS TEMPLATE JULY 2016 */
	bottom: inherit!important; /* AMENDED FOR FOCUS TEMPLATE JULY 2016 */
	}
	#focusTemplate #footercontent2 { /* ADDED FOR FOCUS TEMPLATE JULY 2016 */
	width: 25%!important;
	}
	#focusTemplate #footercontent3 { /* ADDED FOR FOCUS TEMPLATE JULY 2016 */
	width: 20%!important;
	}
}

/* Landscape phone to portrait tablet */
@media (max-width: 768px) {
	#focusTemplate #siteInfo {
	min-height: 115px; /* AMENDED FOR FOCUS TEMPLATE JULY 2016 */
	}
}

/* Landscape phones and down */
@media (max-width: 480px) {
	#focusTemplate #masthead {
	background-image: url(none); /* AMENDED FOR FOCUS TEMPLATE JULY 2016 */
	background-color: #ffffff; /* ADDED FOR FOCUS TEMPLATE JULY 2016 */
	}
	#focusTemplate #mainlogo {
	width: 60%; /* AMENDED FOR FOCUS TEMPLATE JULY 2016 */
	}
	#focusTemplate .contactlink {
	right: 35px; /* AMENDED FOR FOCUS TEMPLATE JULY 2016 */
	top: 15px;  /* AMENDED FOR FOCUS TEMPLATE JULY 2016 */
	left: initial; /* ADDED FOR FOCUS TEMPLATE AUG 2016 */
	}
}

/* smartphones in landscape */
@media only screen 
and (max-device-width : 736px) 
and (orientation : landscape) {
	#focusTemplate #masthead {
	background-image: url(none); /* AMENDED FOR FOCUS TEMPLATE JULY 2016 */
	}
	#focusTemplate .contactlink a { /* ADDED FOR FOCUS TEMPLATE JULY 2016 */
    color: #ffffff;
	}
	#focusTemplate #login { /* ADDED FOR FOCUS TEMPLATE JULY 2016 */
    color: #ffffff;
	}
}

/* Extra CSS for the main menu, so that the actual menu "buttons" are a solid colour, rather than the two-tone stripes of the main ACB site */
#focusTemplate .topnav .k-menu .k-item
{
	background-image: url(/img/acb_images/focus/topmenu-back-focus-1colour.jpg);
}

/* Code added 24th Aug 2016 for this page - http://www.acb.org.uk/focus-2017-exhibition-plan2 - for the brochure image in the lefthand sidebar. To be honest, this page will probably (eventually) be re-templated for the separate Focus theme, but for now I'm dealing with what pages they're creating */
#sectionLinks #sidebarImage {
	padding: 0px;
	width: 100%!important;
}
#navBar #sidebarImage img {
    width: 100%;
    height: auto;
}
@media (max-width: 736px) {
	#sectionLinks #sidebarImageText {
	  width: 99%!important;
	}
}
@media (max-width: 480px) {
	#sectionLinks #sidebarImage {
	  padding: 0px!important;
	}
}


/* AUG 2016 - The below code isn't needed for the Focus pages... But it might turn out that we have to undo what that code (below) does - temporarily - so that I can see the second "additional" main menu within Admin and have the ability to duplicate it into my new Focus template(s) */

/* Additional code, added 30th Oct 2015 - specifically targetting the "additional" second main menu that got put in for the mobile version of the site. This second menu is unfortunately visible in the Page Edit window of Sitefinity Admin, and it smothers the top edge of elements below it, that the ACB staff wish to get to. Thus this CSS *should* make that second menu invisible inside the editor, but not affect it in real-world use. */

.sfPageEditor.zeContentMode #menubar #ctl00_MainMenusplaceholder_ctl02.RadDock.RadDock_Sitefinity.zeControlDock {
	visibility: hidden;
	display: none;
}