/*
 * FONTS
 *****************************************************************************/
@font-face {
	font-family: 'BigCaslonMedium';
	src: url('/media/web/fonts/bigcaslon-webfont.eot');
	src: local('☺'), url('/media/web/fonts/bigcaslon-webfont.woff') format('woff'), url('/media/web/fonts/bigcaslon-webfont.ttf') format('truetype'), url('/media/web/fonts/bigcaslon-webfont.svg#webfontSilGcwxx') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'LucidaGrande';
	src: url('/media/web/fonts/lucida_grande-webfont.eot');
	src: local('Lucida Grande'), url('/media/web/fonts/lucida_grande-webfont.woff') format('woff'), url('/media/web/fonts/lucida_grande-webfont.ttf') format('truetype'), url('/media/web/fonts/lucida_grande-webfont.svg#webfontmah5PuI1') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'LucidaGrande';
	src: url('/media/web/fonts/lucida_grande_bold-webfont.eot');
	src: local('Lucida Grande Bold'), url('/media/web/fonts/lucida_grande_bold-webfont.woff') format('woff'), url('/media/web/fonts/lucida_grande_bold-webfont.ttf') format('truetype'), url('/media/web/fonts/lucida_grande_bold-webfont.svg#webfontT1gqIJnd') format('svg');
	font-weight: bold;
	font-style: normal;
}


/*
 * DEFAULT STYLES / RESET
 *****************************************************************************/
body {
	margin: 0;
	background: #E9E9E1 url(../img/bg.png) top left repeat-x;
	font-size: 62.5%; /* 1em = 10px */
	font-family: "LucidaGrande", Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: normal; }
ul { margin: 0; padding: 0; list-style: none; }


/*
 * DEFAULT TEXT STYLES
 *****************************************************************************/
h2, h3 { font-family: "BigCaslonMedium"; font-weight: normal; font-style: normal; }	
h3 { font-size: 2.6em; margin: 0.5em 0; line-height: 1.2; }
p { font-size: 1.2em; line-height: 1.6; color: #333; }


/*
 * LAYOUT
 *****************************************************************************/
#frame { width: 960px; margin: 0 auto; }
#side { width: 310px; float: left; }
.home #side { margin-top: 30px; }
#content { width: 628px; padding: 10px; background: #FFF; position: relative; float: right; border: 1px solid #D3D3CB; z-index: 5	; }
.content-left { width: 430px; float: left; }
.content-right { float: right; width: 168px; }
.content-panel h3 { margin-left: 10px; }
.content-panel p { margin-left: 10px; }


/*
 * HEADER
 *****************************************************************************/
#header { padding: 10px 0 20px 0; background: url(../img/header-bg.gif) bottom right no-repeat; /*overflow: hidden;*/ width: 100%; margin-bottom: 25px; /*margin-top: -50px;*/ }
.home #header { background: url(../img/header-bg-home.gif) bottom right no-repeat; }
#header h1 { float: left; width: 215px; height: 210px; font-size: 4em; margin-top: -65px; position: absolute; }
#header h1 a { color: #CC0033; width: 215px; height: 210px; display: block; background: url(../img/logo2.png) top left no-repeat; text-indent: -10000px; overflow: hidden; }
#header div { float: right; width: 650px; }
#header h2 { font-size: 2.6em; }
#header h2 abbr { font-size: 0.8em; }
#header h2 a { font-size: 0.6em; color: #999; text-shadow: none; }
#header h2 a:hover { color: #888; }


/*
 * SIDE COLUMN
 *****************************************************************************/
#side h4 { color: #CC0033; text-transform: uppercase; font-size: 1.3em; margin-left: 10px; padding-bottom: 5px; text-indent: -10000px; background-repeat: no-repeat; background-position: top left; }
.circle { background: url(../img/circle-bg.gif) bottom left no-repeat; padding: 0 40px 55px 40px; }
.circle h4 { margin-left: 0 !important; margin-bottom: 10px; }
.circle li { background: url(../img/bullet-tick.gif) 0 0.3em no-repeat; padding-left: 20px; font-size: 1.1em; line-height: 1.3; margin-bottom: 0.8em; color: #333; }
.circle li ul { margin-top: 0.8em; }
.circle li li { font-size: 1em; line-height: 1em; margin-bottom: 0.6em; }

.home .circle { padding-top: 72px; padding-bottom: 0; height: 223px; background: url(../img/circle-bg-home.gif) bottom left no-repeat; margin-bottom: -15px; }
.home .circle li { font-size: 1.2em; }

h4.members { background-image: url(../img/h4-members.png); width: 256px; height: 13px; }
h4.offers { background-image: url(../img/h4-offers.png); width: 183px; height: 13px; }
h4.factfile { background-image: url(../img/h4-factfile.png); width: 62px; height: 13px; }


/*
 * NAVIGATION
 *****************************************************************************/
#nav { position: relative; margin-right: -11px; z-index: 10; margin-top: 10px; margin-bottom: 20px; }
#nav li { margin-bottom: 5px; position: relative; }
#nav a { display: block; background: url(../img/nav-bg.png) top left no-repeat; color: #333; text-decoration: none; font-size: 1.2em; padding: 11px 20px 11px 12px; overflow: hidden; font-weight: bold; position: relative; outline: none; text-shadow: 0 1px 0 #FFF; }
#nav a:hover, #nav a.on { background-position: bottom left; color: #FFF; text-shadow: none; }
#nav a.nohover:hover { background-position: top left !important; color: #333 !important; text-shadow: none !important; }
#nav a span { display: none; cursor: pointer; width: 15px; height: 15px; background: url(../img/nav-close.png) top left no-repeat; position: absolute; right: 12px; top: 12px; }
#nav a span:hover { background-position: bottom left; }


/*
 * COURSES
 *****************************************************************************/
#courses { margin-bottom: 30px; background: #E3E3DB url(../img/courses-bg.png) top left repeat-x; padding: 20px 20px 13px 20px; width: 248px; border: 1px solid #DCDCD4; }
#courses h4 { background-image: url(../img/h4-courses.png); width: 212px; height: 13px; margin-left: 0; padding-bottom: 10px; }
#courses li { color: #333; font-size: 1.1em; line-height: 1.6; padding-left: 1.6em; padding-bottom: 0.4em; background: url(../img/bullet-circle.png) 0 0.5em no-repeat; }


/*
 * FOOTER
 *****************************************************************************/
#bottom { width: 620px; padding: 15px 15px; background: #CC0033 url(../img/bottom-bg.png) top left repeat-x; float: right; margin-top: 20px; color: #FAE6EB; position: relative; overflow: hidden; }
#bottom h4 { color: #FFF; text-transform: uppercase; font-size: 1.4em; line-height: 1; margin-bottom: 12px; height: 13px; text-indent: -10000px; }

.home #bottom h4 { background: url(../img/h4-members-home.png) top left no-repeat; }
.home #bottom { padding-bottom: 10px; }

#bottom p { font-size: 1.2em; line-height: 1.6; }

#bottom ul { float: left; width: 290px; }
#bottom ul.left { float: left; }
#bottom ul.right { float: right; }
#bottom li { font-size: 1.1em; background: url(../img/bullet-tick-circle.png) 5px 0.3em no-repeat; padding: 0 5px 0.55em 25px; line-height: 1.4; }

#bottom div { position: absolute; bottom: 17px; right: 15px; width: 107px; }
#bottom .button { margin: 8px 0 0 0; }

#footer { clear: both; width: 960px; background: url(../img/footer-bg.png) top left no-repeat; overflow: hidden; position: relative; }
#footer p { float: right; color: #999; padding: 1em 0; margin: 0; font-size: 1.1em; }
#footer a { color: #999;}


/*
 * HOMEPAGE
 *****************************************************************************/
#content-home h3 { width: 400px; margin: 0 0 0.5em 10px; }
#content-home p { width: 405px; margin-left: 10px; }
.home #content { height: 490px; }
.home .content-panel { display: none; position: absolute; top: 10px; left: 10px; width: 628px; }
.home .content-panel h3 { margin-bottom: 6px; }
.home .content-panel p { width: 480px; margin-top: 0; }
.home .content-panel p.more { position: absolute; bottom: 5px; left: 10px; margin: 0 !important; }
.home .content-panel .map { float: right; margin-top: -62px; position: absolute; right: 0; }
.home .content-panel div.imgContainer { height: 345px; background: url(../img/loading.gif) center no-repeat; overflow: hidden; }
.home .content-panel-inner { height: 490px; position: relative; }
.home #content-home { display: block; }

#map-images { height: 280px; background: url(../img/loading.gif) center no-repeat; overflow: hidden; margin-bottom: 13px; }
#map-home { position: absolute; z-index: 100; right: -5px; bottom: -30px; width: 227px; height: 326px; background: url(../img/map-home.png) top left no-repeat; }
#map-home div { position: absolute; height: 14px; width: 14px; cursor: pointer; background: none; }

#map-home #bournemouth { margin: 280px 0 0 123px; }
#map-home #cambridge { margin: 231px 0 0 161px; }
#map-home #eastbourne { margin: 274px 0 0 170px; }
#map-home #chester { margin: 193px 0 0 99px; }
#map-home #london-north { margin: 248px 0 0 168px; }
#map-home #oxford { margin: 244px 0 0 132px; }
#map-home #brighton { margin: 273px 0 0 157px; }
#map-home #bristol { margin: 263px 0 0 100px; }
#map-home #torquay { margin: 291px 0 0 79px; }
#map-home #london-south { margin: 256px 0 0 157px; }


/*
 * MEMBER PAGES
 *****************************************************************************/
.member #header img { position: absolute; z-index: 200; margin-left: 490px; margin-top: -10px; }
.member #header h2, .member #header p { width: 480px; }
.member #header p { color: #666; font-family: "BigCaslonMedium"; font-size: 1.8em; line-height: 1.35; margin: 0.3em 0 0 0; }
.member h3 { font-size: 1.6em; line-height: 1.35; }
.member blockquote { margin: 2em 0 0 -25px; padding: 0; background: url(../img/quote-bg.gif) top right no-repeat; width: 455px; overflow: hidden; }
.member blockquote img { float: left; margin-top: 1em; position: relative; z-index: 100; }
.member blockquote p.quote { margin-top: 1.5em; margin-bottom: 0; padding-bottom: 10px; padding-top: 1px; float: right; width: 320px; text-indent: 33px; background: url(../img/quote-open.gif) top left no-repeat; font-family: "BigCaslonMedium"; font-size: 1.5em; line-height: 1.35; color: #333; }
.member blockquote p.quote span { display: inline-block; width: 32px; height: 19px; background: url(../img/quote-close.gif) top right no-repeat; margin-bottom: -5px; }
.member blockquote p.author { height: 11px; float: right; width: 320px; margin-top: 0; text-indent: -10000px; }

.bournemouth blockquote p.author { background: url(../img/people/bournemouth-author.png) top left no-repeat; }
.bournemouth #bottom h4 { background: url(../img/contact/bournemouth.png) top left no-repeat; }
.cambridge blockquote p.author { background: url(../img/people/cambridge-author.png) top left no-repeat; }
.cambridge #bottom h4 { background: url(../img/contact/cambridge.png) top left no-repeat; }
.eastbourne blockquote p.author { background: url(../img/people/eastbourne-author.png) top left no-repeat; }
.eastbourne #bottom h4 { background: url(../img/contact/eastbourne.png) top left no-repeat; }
.chester blockquote p.author { background: url(../img/people/chester-author.png) top left no-repeat; }
.chester #bottom h4 { background: url(../img/contact/chester.png) top left no-repeat; }
.london-north blockquote p.author { background: url(../img/people/london-north-author.png) top left no-repeat; }
.london-north #bottom h4 { background: url(../img/contact/london-north.png) top left no-repeat; }
.oxford blockquote p.author { background: url(../img/people/oxford-author.png) top left no-repeat; }
.oxford #bottom h4 { background: url(../img/contact/oxford.png) top left no-repeat; }
.brighton blockquote p.author { background: url(../img/people/brighton-author.png) top left no-repeat; }
.brighton #bottom h4 { background: url(../img/contact/brighton.png) top left no-repeat; }
.bristol blockquote p.author { background: url(../img/people/bristol-author.png) top left no-repeat; }
.bristol #bottom h4 { background: url(../img/contact/bristol.png) top left no-repeat; }
.torquay blockquote p.author { background: url(../img/people/torquay-author.png) top left no-repeat; }
.torquay #bottom h4 { background: url(../img/contact/torquay.png) top left no-repeat; }
.london-south blockquote p.author { background: url(../img/people/london-south-author.png) top left no-repeat; }
.london-south #bottom h4 { background: url(../img/contact/london-south.png) top left no-repeat; }

.member #bottom { margin-bottom: 15px; }
.member #bottom p { float: left; margin: 0; color: #FAE6EB; }
.member #bottom a { float: right; }

.member #content ul { margin-top: 1.2em; margin-left: 1em; }
.member #content li { color: #333; font-size: 1.2em; line-height: 1.6; padding-left: 1.6em; padding-bottom: 0.8em; background: url(../img/bullet-circle.png) 0 0.5em no-repeat; }
.member #content li.last { padding-bottom: 0; }

/*
 * POPUPS
 *****************************************************************************/
#popup { background: url(../img/popup-bg.png) left bottom repeat-x; display: none; }
.js #popup { display: block; }
#popup-open { z-index: 2; }
#popup .inner { width: 960px; overflow: hidden; margin: 0 auto; padding: 0; position: relative; background: url(../img/popup-inner.png) bottom left no-repeat; padding-bottom: 80px; }
#popup .inner p { margin: 0; color: #FFF; padding-bottom: 1em; }
#popup .inner .left { width: 445px; padding-right: 25px; float: left; }
#popup .inner .left p { font-size: 1.7em; line-height: 1.5; font-family: "BigCaslonMedium"; }
#popup .inner .right { width: 445px; padding-left: 25px; float: right; }
#popup-open .inner { background-position: bottom right !important; }
#popup .popup { display: none; width: 960px; overflow: hidden; padding-top: 20px; padding-bottom: 10px; }
.popup-about .inner, .popup-about-hover .inner { background-position: -960px bottom !important; }
.popup-members .inner, .popup-members-hover .inner { background-position: -1920px bottom !important; }
.popup-about #popup-about, .popup-members #popup-members { display: block; }

.member #popup .inner { background-position: -1920px bottom; }

#popup-controls { position: absolute; /*bottom: 0;*/ width: 960px; overflow: hidden; float: none !important; }
#popup-controls li { float: left; margin-bottom: 0 !important; }
#popup-controls li a { display: block; height: 75px; text-indent: -10000px; overflow: hidden; outline: none; background: none; padding: 0; cursor: pointer; }

#popup-controls li.home { margin-left: 530px;  }
#popup-controls li.home a { width: 87px; background: url(../img/home.png) 0 38px no-repeat; }

.member #popup-controls li.about { margin-left: 23px; }
#popup-controls li.about { margin-left: 642px; }
#popup-controls li.about a { width: 123px; }
#popup-controls li.members { margin-left: 23px; }
#popup-controls li.members a { width: 160px; }

.popup-members ul { width: 470px; float: left; padding-bottom: 2px; }
.popup-members ul.members-right { float: right; }
.popup-members li { margin-bottom: 7px; overflow: hidden; }
.popup-members li a { display: block; background: url(../img/popup-members-bg.png) top left no-repeat; text-decoration: none; color: #FAE6EB; font-size: 1.1em; overflow: hidden; padding: 7px 10px; }
.popup-members li a:hover { background-position: 0 -100px; }
.popup-members li.on a { background-position: 0 -200px; }
.popup-members li a strong { width: 308px; float: left; height: 13px; text-indent: -10000px; background-position: top left; background-repeat: no-repeat; }
.popup-members li a span { float: right; width: 130px; text-align: right; text-shadow: 0 -1px 0 #921726; }

.popup-members li.bournemouth a strong { background-image: url(../img/popup/bournemouth.png); }
.popup-members li.cambridge a strong { background-image: url(../img/popup/cambridge.png); }
.popup-members li.eastbourne a strong { background-image: url(../img/popup/eastbourne.png); }
.popup-members li.chester a strong { background-image: url(../img/popup/chester.png); }
.popup-members li.london-north a strong { background-image: url(../img/popup/london-north.png); }
.popup-members li.oxford a strong { background-image: url(../img/popup/oxford.png); }
.popup-members li.brighton a strong { background-image: url(../img/popup/brighton.png); }
.popup-members li.bristol a strong { background-image: url(../img/popup/bristol.png); }
.popup-members li.torquay a strong { background-image: url(../img/popup/torquay.png); }
.popup-members li.london-south a strong { background-image: url(../img/popup/london-south.png); }


/*
 * BUTTON STYLES
 *****************************************************************************/
a.button { display: block; height: 21px; background-position: top left; background-repeat: no-repeat; color: #CC0033; font-size: 0.8em; overflow: hidden; text-indent: -10000px; margin-top: 0.4em; }
a.button:hover { background-position: bottom left; }

a.button-ten { width: 184px; background-image: url(../img/button-ten.png); }
a.button-more { width: 113px; background-image: url(../img/button-more.png); }

a.button-website { margin-top: 0.6em; height: 23px; width: 103px; background-image: url(../img/button-website.png); }
#bottom a.button-website { width: 107px; background-image: url(../img/button-website-bottom.png); }
#bottom a.button-email { height: 23px; width: 107px; background-image: url(../img/button-email-bottom.png); }
