/* CSS Document
Theme Name: Cantell
Client: Cantell
Version: 1.0
Date: 05/08/2013
Author: Geoff Boult
Company: Concept4
Website: www.concept4.com
Type: Layout
*/

/******************************************************************
******************************************************************/

/*

01: Body/Main Containers
02: Header
03: Footer
04: Navigation
05: Banner
06: Map
07: Quick Links
08: Home Carousel
09: Search
10: Quick Links
11: Social Side
12: Page
13: Sprite Socials
14: News Section
15: Search Results
16: Responsive Handheld Devices (Portrait)
17: Responsive Handheld Devices (L/Scape)
18: Responsive Handheld Devices (L/Scape) & lower
19: Responsive iPad Portrait
20: Responsive min width iPad Portrait
21: Responsive all devices up to 1023px

*/

/* - 01 (Body/Main Containers) -------------------------------------*/

#col1 .insideColumn ul, #col1 .insideColumn ol{margin-top:10px;margin-bottom:20px;margin-left:20px;}
#col1 .insideColumn li{margin-top:3px;margin-bottom:3px}
body {margin:0; padding:0; background:#fff; width:100%; height:100%; font-size:82.5%; font-family:Arial, Helvetica, sans-serif; color:#464d57;}
html, body {height:100%; min-height:100%; margin:0; padding:0;}
#wrapper {min-height:100%; height:auto!important; height:100%; margin:0 auto;}
#wrapper {width:100%; position:relative;}

footer {height:155px; background-color:#072460;}

.grid_wrap_990 {width:990px; margin:0 auto; position:relative;}
.float_grid_990 {width:100%; float:left; height:auto; position:relative;}

table{border-collapse:collapse;margin-bottom:15px;}

.indent {text-indent:-9999px; text-transform:capitalize;}
/********************************************************************/

/* - 02 (Header) ---------------------------------------------------*/
header {width:100%; height:80px; background-color:#072460; position:relative;}
.pxBlock1, .pxBlock2 {width:100%; height:1px; background-color:#3d5993; position:absolute; left:0; top:9px;}
.pxBlock2 {top:70px;}
.grid_wrap_990.header {height:80px;}
a.logo {width:116px; height:38px; position:absolute; left:0; top:23px; background:url(../Images/cantell_logo.jpg) no-repeat;}
/********************************************************************/

/* - 03 (Footer) ---------------------------------------------------*/
.footerLeft {float:left; margin-top:20px;}
.footerRight {float:right; margin-top:20px;}
p.tel {display:block; margin-bottom:10px;}
/********************************************************************/

/* - 04 (Navigation) -----------------------------------------------*/
.navigation {float:right; width:auto; height:52px; margin-top:28px; padding-right:170px; position:relative;}
/********************************************************************/

/* - 05 (Banner) ---------------------------------------------------*/
#banner {width:100%; height:auto; max-height:580px; overflow:hidden; z-index:0; position:relative; background-color:#F3F4F6;}
/********************************************************************/

/* - 06 (Map) ------------------------------------------------------*/
a.mapBTN {position:absolute; width:150px; height:35px; left:50%; margin-left:-75px; top:-35px;}
/********************************************************************/

/* - 07 (Quick Links) ----------------------------------------------*/
#quickLinks {width:100%; height:160px; padding:30px 0; background-color:#f3f4f6; margin-bottom:35px;}
.carouselThumb, .carouselTitle {width:80%; margin-left:10%;}
.carouselExcerpt, a.carouselMore {width:80%; padding:0 10%; display:block; line-height:16px; text-align:left;}
/********************************************************************/

/* - 08 (Home Carousel) --------------------------------------------*/
#homeCarousel {width:1000px; margin:0 auto; height:390px; margin-bottom:25px; position:relative; max-width:85%;}
img.loading {width:66px; height:66px; position:absolute; top:50%; left:50%; margin-left:-33px; margin-top:-33px;}
/********************************************************************/

/* - 09 (Search) ---------------------------------------------------*/
.search {position:absolute; top:8px; right:0; width:150px; height:22px;}
input.searchField {width:116px; height:22px; line-height:24px; border:0; color:#666; font-size:11px; padding-left:5px; background-color:white; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
input.searchBTN {width:22px; height:22px; position:absolute; top:0; right:0; border:0!important;}
/********************************************************************/

/* - 10 (Quick Links) ----------------------------------------------*/
ul.ql {margin:0; padding:0;}
ul.ql li {list-style-type:none; float:left; width:180px; margin-left:22px; position:relative;}
ul.ql li:first-child {margin-left:0;}
.qlThumb {border:1px solid #072460; width:180px; height:120px;}
ul.ql li a {height:100%; width:100%; display:block;}
/********************************************************************/

/* - 11 (Social Side) ----------------------------------------------*/
.socialSide {position:absolute; top:90px; right:0; width:59px; height:278px; z-index:1000;}
.fixedSidebar {position:fixed; top:30px;}
a.sims,a.google,a.facebook,a.twitter,a.mail,a.vle,a.vle2,a.vle3,a.vle4 {display:block; width:59px; background-image:url(../Images/social_side_sprite.png); background-repeat:no-repeat;}
a.sims {background-position:0 0; height:46px;}
a.google {background-position:0 -46px; height:47px;}
a.facebook {background-position:0 -93px; height:45px;}
a.twitter {background-position:0 -138px; height:48px;}
a.mail {background-position:0 -186px; height:45px;}
a.vle {background-position:0 -231px; height:43px;}
a.vle2 {background-position:0 -273px; height:47px;}
a.vle3 {background-position:0 -320px; height:47px;}
a.vle7 {background-position:0 -371px; height:47px;}
a.vle4 {background-position:0 -419px; height:47px;}
/********************************************************************/

/* - 12 (Page) -----------------------------------------------------*/
.pageImage {position:relative; width:100%;}
.pageImage img {display:block; width:100%; max-width:1920px; margin:0 auto;}
.heading {width:100%; height:auto; padding:20px 0; background-color:#f3f4f6; margin-bottom:35px;}
.columnLeft {float:left; width:72.757%; margin-bottom:60px;}
.columnRight {float:right; width:23%; margin-bottom:40px;}
.blockCol {width:100%; float:left; height:auto; padding:20px 0; background-color:#072460;}
.fullWidth {width:100%; float:left; margin-bottom:40px;}
.fullWidth img {max-width:100%;}
/********************************************************************/

/* - 13 (Sprite Socials) -------------------------------------------*/
.socials {width:115px; height:33px; position:absolute; right:0; top:110px;}

a.tw, a.tw:hover,
a.fb, a.fb:hover,
a.rss, a.rss:hover {display:block; width:34px; height:33px; float:left; background-image:url(../Images/social_sprite.png); background-repeat:no-repeat; text-align:left; margin-right:6px}
a.rss, a.rss:hover {margin-right:0;}

a.tw {background-position:0 0;} 
a.tw:hover {background-position:0 -33px;}
a.fb {background-position:-38px 0;}
a.fb:hover {background-position:-38px -33px;}
a.rss {background-position:-76px 0;}
a.rss:hover {background-position:-76px -33px;}
/********************************************************************/

/* - 14 (News Section) ---------------------------------------------*/
.newsInfo {float:right; width:60%; height:auto; padding-right:10px; margin-top:7px;}
.newsThumb {float:left; width:30%;}
  .newsPagination, .resultPagination {width:100%; height:20px;  margin-top:15px;}
article img {margin-bottom:15px;}
/********************************************************************/

/* - 15 (Search Results) -------------------------------------------*/
ul.results {width:100%; margin:0; padding:0; border-top:1px solid #dedbd9; float:left;}
.results li {list-style-type:none; width:75%; float:left; padding:10px 25% 10px 0; position:relative; border-bottom:1px solid #dedbd9;}
.resultTitle a {display:block; font-size:16px; margin-bottom:3px;}
.resultInfo {width:100%; height:auto;   padding: 10px 0 0; border-top:1px solid #dedbd9; position:relative;}
.resultNum {float:right;}
a.resultMore {width:auto; position:absolute; top:65%; right:0;}
/********************************************************************/



div.footerBut {
    background-color: #134580;
    color: #FFFFFF;
    float: left;
    height: 30px;
    margin-right: 1%;
    margin-top: 15px;
    padding-bottom: 5px;
    padding-top: 15px;
    text-align: center;
    width: 19%;
}

div.footerBut:hover{background-color:#2476af}

div.footerBut a{font-size:16px;color:white;text-decoration:none;}
/******************************************************************************************************

                                        RESPONSIVE ELEMENTS

******************************************************************************************************/



/* - 16 (Responsive Handheld Devices (Portrait)) -------------------*/
@media all and (max-width:481px){
	.footerLeft {margin-top:65px;}
	.footerRight {margin-top:20px;}
	.socials {top:245px;}
	.resultNum {display:none;}
div.footerBut{background-color:#134580;color:white;width:98%;height:20px;text-align:center;float:left;margin-right:5%;margin-top:15px;padding-top:5px;padding-bottom:5px}
div.footerBut:hover{background-color:#2476af}
div.footerBut a, div.footerBut a:hover{font-size:12px} 
	footer {height:405px !important;}

#col1 .insideColumn ul, #col1 .insideColumn ol {
    margin-bottom: 10px;
    margin-left: 0;
    margin-top: 10px;
    padding: 0;
}
}
/********************************************************************/

/* - 17 (Responsive Handheld Devices (L/Scape)) --------------------*/
@media all and (min-width:481px) and (max-width:767px){
	.footerLeft {margin-top:82px;}
	.socials {top:326px;}
    div.footerBut{background-color:#134580;color:white;width:99%;height:30px;text-align:center;float:left;margin-right:5%;margin-top:15px;padding-top:10px}
div.footerBut:hover{background-color:#2476af}
div.footerBut a, div.footerBut a:hover{font-size:14px} 

#col1 .insideColumn ul, #col1 .insideColumn ol {
    margin-bottom: 10px;
    margin-left: 0;
    margin-top: 10px;
    padding: 0;
}
}
/********************************************************************/

/* - 18 (Responsive Handheld Devices (L/Scape) & lower) ------------*/
@media all and (max-width:767px){
	header {height:160px;}
	.socialSide, .newsThumb {display:none;}
	a.logo {left:50%; margin-left:-58px;}
	.navigation {margin-top:73px; height:60px;}
	.search {top:12px; right:50%; margin-right:-100px; width:200px;}
        	input.searchField {width:166px;}
	#quickLinks {display:none;}
	#homeCarousel {width:75%; padding:0 12.5%;}
       	footer {height:495px;}
	/*Unleash the sticky footer*/
	body #wrapper {margin:0 auto -225px;}
	body .push {height:325px; /**/clear:left;/*added as Safari was not pushing*/}
	/*Unleash the sticky footer*/
	.socials {right:50%; margin-right:-57px;}
	.footerLeft, .footerRight {width:100%; text-align:center;}
	#banner {background-color:white;}
	a.mapBTN {position:absolute; width:120px; height:30px; left:50%; margin-left:-60px; top:-30px;}

	.heading {margin-bottom:20px;}
	.newsInfo {width:100%; padding-right:0;}

#col1 .insideColumn ul, #col1 .insideColumn ol {
    margin-bottom: 10px;
    margin-left: 0;
    margin-top: 10px;
    padding: 0;
}
}
/********************************************************************/

/* - 19 (Responsive iPad Portrait) ---------------------------------*/
@media all and (max-width:1023px) and (min-width:768px){
	a.logo {left:4%;}
	ul.ql li {width:23.4%; margin-left:2.0%;}
	.qlThumb {width:100%; height:auto; border:none;}
	.qlThumb img {width:100%; border:1px solid #072460;}
	#homeCarousel {width:75%; padding:0 12.5%;}
	.socials {right:4%;top:160px;}
	.search {right:4%;}
	.newsThumb {width:28.571%; height:auto;}.newsThumb img {width:100%; height:auto;}
	.newsInfo {width:68.571%;}
div.footerBut{background-color:#134580;color:white;width:45%;height:30px;text-align:center;float:left;margin-right:5%;margin-top:15px;padding-top:10px}
div.footerBut:hover{background-color:#2476af}

footer {height:245px; background-color:#072460;}
}
/********************************************************************/

/* - 20 (Responsive min width iPad Portrait) -----------------------*/
@media all and (min-width:768px){
	/*Unleash the sticky footer*/
	body #wrapper {margin:0 auto -125px;}
	body .push {height:145px; /**/clear:left;/*added as Safari was not pushing*/}
	/*Unleash the sticky footer*/
}
/********************************************************************/


/* - 21 (Responsive all devices up to 1023px) ----------------------*/
@media all and (max-width:1023px){
	.navigation {width:100%; padding-right:0;}
	.grid_wrap_990 {width:92%; padding:0 4%;}
	.grid_wrap_990.header {width:100%; padding:0;}
	.columnLeft {width:100%;}
	.columnLeft {margin-bottom:15px;}
 	.columnRight {width:100%; padding:20px 0; margin-bottom:20px;}
}
/********************************************************************/


/* - 21 (Responsive all devices up to 1023px) ----------------------*/
@media all and (max-width:800px){
.hidemobile{display:none}
.student .studentHeading{width:100%;position:relative;}
.student .studentHeadingImg{width:80px;top:-45px;position:absolute;}

.student .studentHeading h1{padding-left: 90px;    width: auto;}
.studentBox{width:100%;min-height:650px;position:relative;background-image:url('/images/cantelBanner2.jpg');background-position:top center;background-repeat:no-repeat;}
.student .heading{margin-bottom:0px;}

.columnLeft{width:94%;background-color:white;padding:3%;}
}


/* - 21 (Responsive all devices up to 1023px) ----------------------*/
@media all and (min-width:801px){

.student .heading{margin-bottom:0px;}

.studentBox{width:100%;min-height:650px;position:relative;background-image:url('/images/cantelBanner.jpg');background-position:top center;background-repeat:no-repeat;}

.student .columnLeft {min-height: 500px;
    padding: 65px 65px 50px 115px;
    width: 570px; background-image: url("/images/pageBack.png");background-repeat:no-repeat;}


.student .studentHeading{width:990px;margin-left:auto;margin-right:auto;position:relative;}
.student .studentHeadingImg{width:160px;top:-90px;position:absolute;}

.student .studentHeading h1{width: 810px;padding-left: 160px;}


}

/* line 3, ../scss/_sitemap.scss */
nav#sitemap ul { margin-left: 0; list-style-type: none; margin: 0; padding: 0; list-style-type: none; }

/* line 8, ../scss/_sitemap.scss */
#sitemap li { list-style-position: inside; margin: 0; padding: 0; list-style-type: none; padding: 0.3em 0; }
/* line 12, ../scss/_sitemap.scss */
#sitemap li a { line-height: 1.1em; font-size: 16px; font-size: 1rem; padding-left: 1em; background: url(../images/global/sitemap_level1_line.jpg) left center no-repeat; }
/* line 18, ../scss/_sitemap.scss */
#sitemap li a:hover { text-decoration: underline; }
/* line 22, ../scss/_sitemap.scss */
#sitemap li ul { margin: 0.3em 0 0 1.5em; }
/* line 24, ../scss/_sitemap.scss */
#sitemap li a { background: url(../images/global/sitemap_level2_line.jpg) left center no-repeat; padding-left: 1em; font-size: 13px; font-size: 0.8125rem; color: #072460; }
#sitemap li ul li a { background: url(../images/global/sitemap_level2_line.jpg) left center no-repeat; padding-left: 1em; font-size: 13px; font-size: 0.8125rem; color: #2476af; }
/* line 31, ../scss/_sitemap.scss */
#sitemap li ul ul li a { background: url(../images/global/sitemap_level3_line.png) left center no-repeat; padding-left: 1.7em; font-size: 0.85em; }



/********************************************************************/


#desktopPage{display:none}
#mobilePage{display:inline;}
#mobileCalendar{display:block}
#calendar{display:none}
#calTop{display:none}
.mobileGallery{display:block}
.desktopGallery{display:none}
.hideMobile{display:none}


.translated-ltr nav[role="mainMenu"] li {

    padding: 0 3px;
}

.translated-ltr a.logo {left:-50px}


/* - 17 (Responsive all devices over 1024px) ----------------------*/
@media all and (min-width:1024px){
	#desktopPage{display:inline}
	#mobilePage{display:none;}
	#mobileCalendar{display:none}
	#calendar{display:block}
	#calTop{display:block}
	.mobileGallery{display:none}
	.desktopGallery{display:block}
	.hideMobile{display:block}
}
/********************************************************************/