/* Joyful - index */
body{
margin: 0;
}
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
#myCarousel{
position: relative;
}
.carousel-inner img{
width: 100%;
min-height: 450px;
max-height: 600px;
object-fit: cover;
}
.header{
position: absolute;
top: 0;
width: 100%;
min-height: 100px;
background: rgba(255, 255, 255, .85);
}
.logo{
width: 50%;
padding: 8px 0;
float: left;
}
.logo img{
width: 350px;
height: auto;
}
.subLink{
word-spacing: 8px;
}
.navsublinks{
text-align: right;
font-size: 11px;
width: 50%;
float: right;
padding: 12px 0px 12px 0;
}
.navsublinks img{
margin-right: 8px;
width: 20px;
height: auto;
}
.navsublinks input{
padding: 2px 5px;
}
.searchButton{
background-color: #ffffff;
padding: 3px 5px;
border-width: 1px;
border-style: solid;
}
.menu{
width: 100%;
padding-right: 0;
padding-left: 0;
background-color: #83c7ec;
}
.navbar-toggle {
width: 100%;
float: none;
margin-right: 0;
}
#MenuColor1{
background-color: #5d9ed4;
}
#MenuColor1 a:link,#MenuColor1 a:visited {
color:#FFFFFF;
}
#MenuColor1 a:hover {
color: #5d9ed4;
background-color: #fff;
}
#MenuColor1 a:focus{
color: #fff;
background-color:#5d9ed4;
}
#IntoDropdown a:hover{
color: #f48da4;
}
#MenuColor2, #MenuColor2 a:active {
background-color: #b6dc9c;
}
#MenuColor2 a:link,#MenuColor2 a:visited {
color:#FFFFFF;
}
#MenuColor2 a:focus,#MenuColor2 a:hover {
color: #b6dc9c;
background-color: #fff;
}
#MenuColor3, #MenuColor3 a:active {
background-color: #f5d485;
}
#MenuColor3 a:link,#MenuColor3 a:visited {
color:#FFFFFF;
}
#MenuColor3 a:focus,#MenuColor3 a:hover {
color: #f5d485;
background-color: #fff;
}
#MenuColor4, #MenuColor4 a:active {
background-color: #f1b487;
}
#MenuColor4 a:link,#MenuColor4 a:visited {
color:#FFFFFF;
}
#MenuColor4 a:focus,#MenuColor4 a:hover {
color: #f1b487;
background-color: #fff;
}
#MenuColor5, #MenuColor5 a:active {
background-color: #ee959f;
}
#MenuColor5 a:link,#MenuColor5 a:visited {
color:#FFFFFF;
}
#MenuColor5 a:focus,#MenuColor5 a:hover {
color: #ee959f;
background-color: #fff;
}
#MenuColor6, #MenuColor6 a:active {
background-color: #a6cbe5;
}
#MenuColor6 a:link,#MenuColor6 a:visited {
color:#FFFFFF;
}
#MenuColor6 a:focus,#MenuColor6 a:hover {
color: #a6cbe5;
background-color: #fff;
}
.dropdown-menu { left:auto; }
#MenuColor7{
display: none;
background-color: #d6bbdf;
}
#MenuColor7 a:link,#MenuColor7 a:visited {
color:#FFFFFF;
}
#MenuColor7 a:hover {
color: #d6bbdf;
background-color: #fff;
}
#MenuColor7 a:focus{
color: #fff;
background-color:#d6bbdf;
}
.message{
text-align: center;
}
.PageTitle{
text-align: left;
}
.message, .PageTitle{
font-size: 20px;
color: #fff;
background-color: #5c9fd4;
position: relative;
padding: 10px 0;
}
.message a:hover, .message a:active, .message a:visited, .message a:link{
color: #fff;
text-decoration: underline;
}
.HomeContent{
width: 100%;
height: auto;
padding:30px 0;
background: url(../img/home/MainContentBGImage.png);
background-color: #fbfbfb;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#Calendar{
padding: 20px;
}
#Calendar img{
width: 100%;
height: auto;
}
#LatestNews{
padding: 20px;
}
#LatestNews img{
width: 100%;
height: auto;
}
.DateGreen{
color: #fff;
background:
linear-gradient(225deg, transparent 8px, #3eb134 0) top right;
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 4px 10px 4px 5px;
}
.NewsTitle{
float: left;
margin-top: 5px;
width: 90%;
overflow:hidden;
white-space:nowrap;
text-overflow: ellipsis;
color: #187119;
font-weight: bold;
}
#MoreRightIcon{
margin: 5px;
float: right;
color: #85c7ed;
}
.HZline{
margin: 8px 0;
position: relative;
width: 100%;
height: 1px;
background-color: #bbc2c7;
}
#Video{
padding-top: 20px;
}
.videoIntroP{
text-align: justify;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.BookTourButton {
background: #fad5d9;
padding: 12px 40px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
color: #5c9fd4;
font-size: 18px;
text-decoration: none;
vertical-align: middle;
}
.BookTourButton:hover {
text-decoration: none;
}
/*events ============= */
.events_section {
display: block;
position: relative;
margin: 10px auto;
padding: 20px 0 0 0;
}
.events_section .main_tit.icn_tit {
margin: 0 15px 10px 91px;
}
.calendar_block {
width: 100%;
position: relative;
}
/*selector*/
.comp_options {
display: block;
position: relative;
margin: 10px 15px;
background-color: #fff;
z-index: 100;
}
.comp_options.dd_item .current_item.boxed {
border-color: #cbd0d4;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 12px 25px 9px 10px;
}
.comp_options.dd_item .current_item:after {
top:10px;
right:8px;
}
/* fix */
.calendar_block .comp_class {
padding-left: 15px;
}
.calendar_block .comp_class:before {
content: '•';
display: inline-block;
position: absolute;
left: 0;
top: -9px;
font-size: 32px;
font-weight: bold;
}
/*competitions calendar ============= */
.comp_clndr {
display: block;
position: relative;
padding: 10px;
background: #e2e5e8;
border: 1px solid #cbd0d5;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
z-index: 50;
}
/*calendar control*/
.clndr_controls {
display: block;
position: relative;
padding: 5px 20px 10px 20px;
text-align: center;
}
.clndr_ctrl_btn {
display: inline-block;
position: absolute;
width: 15px;
height: 20px;
top: 5px;
text-indent: 999px;
overflow: hidden;
background-image: url('../img/home/arrow-sprite_2x.png');
background-repeat: no-repeat;
background-size: 80px 1200px;
background-color: transparent;
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
cursor: pointer;
}
.clndr_ctrl_btn.prev {
left: 0;
background-position: -20px -600px;
}
.clndr_ctrl_btn.next {
right: 0;
background-position: -46px -600px;
}
.clndr_ctrl_btn:hover {
opacity: 1;
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}
.month {
display: inline-block;
font-size: 28px;
font-weight: bold;
color: #788086;
}
/*calendar table ============= */
.clndr_table {
display: block;
width: 100%;
border-collapse: inherit;
border-spacing: 1;
background-color: #fff;
border: 1px solid #c6ccd1;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.clndr_table td {
position: relative;
width: 80px;
height: 36px;
padding-top: 4px;
font-size: 16px;
text-align: center;
vertical-align: middle;
border-left: 1px solid #c6ccd1;
border-top: 1px solid #c6ccd1;
}
/* .clndr_table tr {border-bottom: 1px solid #c6ccd1;}
*/
.clndr_table tr td:first-child {border-left: none;}
.clndr_table thead td:first-child {
-webkit-border-top-left-radius: 6px;
-moz-border-radius-topleft: 6px;
border-top-left-radius: 6px;
}
.clndr_table thead td:last-child {
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topright: 6px;
border-top-right-radius: 6px;
}
.clndr_table tbody tr:last-child td:first-child {
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-left-radius: 6px;
}
.clndr_table tbody tr:last-child td:last-child {
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomright: 6px;
border-bottom-right-radius: 6px;;
}
.clndr_table td.header_day {height:28px; padding-top: 2px; color: #788086; border-top: none;}
.clndr_table td.clndr_row {color: #44677f;}
.clndr_table td.clndr_row.past {color: #808e99;}
.clndr_table td.clndr_row.today{color: #09aded; font-weight: bold;}
.clndr_table td.clndr_row.next_month {color: #a0aab3; background-color: #f2f4f5;}
/* comp items & popup */
.clndr_table .comp_content {
display: block;
position: absolute;
top: 0;
left: 2px;
cursor: pointer;
}
.clndr_table .comp_content .comp_class {
display: inline-block;
width: 15px;
height: 15px;
padding: 0;
margin: 0 -4px 0 0;
overflow: hidden;
}
.clndr_table .comp_content .comp_class:before {
}
.clndr_table .comp_content .comp_txt {
display: none;
}
/* popyo content */
.clndr_table .pop_content {
display: none;
position: absolute;
left: 0;
bottom: 42px;
width: 280px;
padding: 5px;
text-align: left;
background-color: #f2f2f2;
border: 1px solid #607280;
z-index: 50;
-webkit-box-shadow: 1px 1px 4px 0px rgba(155, 155, 155, 0.75);
-moz-box-shadow: 1px 1px 4px 0px rgba(155, 155, 155, 0.75);
box-shadow: 1px 1px 4px 0px rgba(155, 155, 155, 0.75);
}
.clndr_table .pop_content:before {
content: ' ';
display: inline-block;
position: absolute;
width: 50px;
height: 10px;
left: 10px;
bottom: -9px;
background-repeat: no-repeat;
background-color: transparent;
background-size: 30px 60px;
background-position: -10px -47px;
background-image: url('../img/home/help_arrow_2x.png');
z-index: 50;
}
.ie .clndr_table .pop_content:before {
background-image: url('../img/home/help_arrow.png');
}
/* COMPETITIONS CLASS AND COLOR CONTROL -15/07/2015
================================================== */
.comp_class {
display: inline-block;
position: relative;
}
/* (CUSTOMER COLOR HERE) --- for label color */
.comp_all {}
.comp_ovl {background: #00a453; color: #fff;}
.comp_tur {background: #d7de2b; color: #fff;}
.comp_aqu {background: #22c3aa; color: #fff;}
.comp_grn {background: #97c740; color: #fff;}
.comp_org {background: #f37122; color: #fff;}
.comp_ylw {background: #fccb00; color: #fff;}
.comp_hbl {background: #00abd8; color: #fff;}
.comp_abl {background: #007e9b; color: #fff;}
.comp_pur {background: #584a89; color: #fff;}
.comp_lav {background: #b062a3; color: #fff;}
.comp_pnk {background: #ea5978; color: #fff;}
.comp_red {background: #c1272d; color: #fff;}
/*---*/
.calendar_block .comp_all {}
.calendar_block .comp_ovl {color: #00a453!important; background: transparent;}
.calendar_block .comp_tur {color: #d7de2b!important; background: transparent;}
.calendar_block .comp_aqu {color: #22c3aa!important; background: transparent;}
.calendar_block .comp_grn {color: #97c740!important; background: transparent;}
.calendar_block .comp_org {color: #f37122!important; background: transparent;}
.calendar_block .comp_ylw {color: #fccb00!important; background: transparent;}
.calendar_block .comp_hbl {color: #00abd8!important; background: transparent;}
.calendar_block .comp_abl {color: #007e9b!important; background: transparent;}
.calendar_block .comp_pur {color: #584a89!important; background: transparent;}
.calendar_block .comp_lav {color: #b062a3!important; background: transparent;}
.calendar_block .comp_pnk {color: #ea5978!important; background: transparent;}
.calendar_block .comp_red {color: #c1272d!important; background: transparent;}
/* -------------------------------------------------------------------------------- */
/* Joyful - News & Circulars */
#DateEvent{
padding: 70px 20px 10px 30px;
}
#dateEventBlue{
padding: 4px 0;
font-size: 16px;
color: #005b86;
}
#dateEventGreen{
padding: 4px 0;
font-size: 16px;]
color: #7b9300;
}
#dateEventGrey{
padding: 4px 0;
font-size: 16px;
color: #727272;
}
.NewscontentImage{
position: relative; left: 0; top: 0;
}
.NewsImage{
position: relative; top: 70px; left: 0px;
}
.NewsImage img{
width: 100%;
}
.giraffe{
position: absolute; top: 300px; left: -60px;
}
.giraffe img{
width: 80%;
}
/* -------------------------------------------------------------------------------- */
/* Joyful - About Us Introduction*/
.AboutUs_Bar{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#005eae+0,005eae+50,0094a6+51,0094a6+100 */
background: #005eae; /* Old browsers */
background: -moz-linear-gradient(left, #005eae 0%, #005eae 50%, #0094a6 51%, #0094a6 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #005eae 0%,#005eae 50%,#0094a6 51%,#0094a6 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #005eae 0%,#005eae 50%,#0094a6 51%,#0094a6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005eae', endColorstr='#0094a6',GradientType=1 ); /* IE6-9 */
}
#BarTitle{
font-size: 20px;
color: #fff;
background-color: #0094a6;
padding: 10px ;
}
#AboutUsContentSelection, #SchoolLifeContentSelection{
margin-left: -2.5px;
}
.IntroCurrentSection{
margin-top: -30px;
padding: 10px;
font-size: 18px;
background-color: #0094a6;
border-bottom:#8f8f8f 2px solid;
}
.IntroSection{
margin-top: -30px;
padding: 10px;
color: #fff;
font-size: 18px;
background: rgba(255, 255, 255, 0);
border-bottom:#8f8f8f 2px solid;
}
.SelectSection{
padding: 10px;
color: #fff;
font-size: 18px;
background: rgba(255, 255, 255, 0);
border-bottom:#8f8f8f 2px solid;
}
.CurrentSection{
padding: 10px;
background-color: #0094a6;
font-size: 18px;
border-bottom:#8f8f8f 2px solid;
}
.IntroSection a:link, .IntroSection a:visited,.IntroSection a:hover,.IntroSection a:active,
.SelectSection a:link, .SelectSection a:visited,.SelectSection a:hover,.SelectSection a:active{
color: #005eae;
text-decoration: none;
}
.CurrentSection a:link, .CurrentSection a:visited, .CurrentSection a:hover,.CurrentSection a:active,
.IntroCurrentSection a:link, .IntroCurrentSection a:visited, .IntroCurrentSection a:hover,.IntroCurrentSection a:active{
color: #fff;
text-decoration: none;
}
.AboutImage{
margin-top: -10px;
padding: 0 15px;
width: 100%;
height: 220px;
}
.AboutImage img{
width: 100%;
height: 100%;
object-fit: cover;
}
#IntroContent,#IntroContentII{
padding: 0 15px;
line-height: 160%;
text-align: justify;
}
h11{
font-size: 18px;
color: #8ea900;
}
.HZlineIntro{
position: relative;
width: 100%;
height: 2px;
background-color: #d7adfd;
}
.IntroGraphic1 img{
float: right;
}
/* -------------------------------------------------------------------------------- */
/* Joyful - About Us MissionStatement*/
#MissionContent, #MissionContentII{
padding: 0 15px;
line-height: 160%;
text-align: justify;
}
#MissionContentII img{
float: right;
}
.MissionImage{
padding: 0 15px;
width: 100%;
height: 210px;
}
.MissionImage img{
width: 100%;
height: 100%;
object-fit: cover;
}
.MSGraphic{
padding: 0 15px;
float: right;
}
.HZlineMS{
margin: 20px 0;
position: relative;
width: 100%;
height: 2px;
background-color: #d7adfd;
}
/* -------------------------------------------------------------------------------- */
/* Joyful - About Us Education Philosophy*/
#EdPhContent{
padding: 0 15px;
line-height: 160%;
text-align: justify;
}
.EdPhImage{
padding: 0 15px;
width: 100%;
height: 210px;
}
.EdPhImage img{
width: 100%;
height: 100%;
object-fit: cover;
}
#EdPhContentII{
margin-top: 40px;
}
.HZlineMS{
margin: 0 0 20px 0;
position: relative;
width: 100%;
height: 2px;
background-color: #d7adfd;
}
.EdPhSmallImg{
margin-top: 5px;
}
.EdPhSmallImg img{
float: right;
width: 50%;
height: auto;
}
/* -------------------------------------------------------------------------------- */
/* Joyful - About Us Education Objectives*/
.EdObjImage, .EdObjImageII{
padding: 0 15px;
width: 100%;
height: 200px;
}
.EdObjImage img, .EdObjImageII img{
width: 100%;
height: 100%;
object-fit: cover;
}
.EdObjImageII{
margin-top: 25px;
}
.EdObjImageIII{
padding: 0 15px;
margin-top: 5px;
float: right;
}
.EdObjectives{
color: #727272;
margin-bottom: 15px;
padding-left: 30px;
text-align: justify;
}
.OjectiveNo1, .OjectiveNo2, .OjectiveNo3, .OjectiveNo4, .OjectiveNo5, .OjectiveNo6, .OjectiveNo7{
float: left;
font-family: 'Lobster', cursive;
font-size: 20px;
}
.OjectiveNo1{
color: #ff3f66;
}
.OjectiveNo2{
color: #005eae;
}
.OjectiveNo3{
color: #8ea900;
}
.OjectiveNo4{
color: #ffae00;
}
.OjectiveNo5{
color: #b03fff;
}
.OjectiveNo6{
color: #0090ff;
}
.OjectiveNo7{
color: #008981;
}
.ObjHZLine1, .ObjHZLine2, .ObjHZLine3, .ObjHZLine4, .ObjHZLine5, .ObjHZLine6, .ObjHZLine7{
margin: 15px 0px;
position: relative;
width: 100%;
height: 2px;
}
.ObjHZLine1{
background-color: #fdadba;
}
.ObjHZLine2{
background-color: #a0b7d6;
}
.ObjHZLine3{
background-color: #c9d4a0;
}
.ObjHZLine4{
background-color: #fdd6a0;
}
.ObjHZLine5{
background-color: #d7adfd;
}
.ObjHZLine6{
background-color: #a0cafd;
}
.ObjHZLine7{
background-color: #a0c7c4;
}
/* -------------------------------------------------------------------------------- */
/* Joyful - School Facilities*/
#schoolHeader{
padding: 0 15px;
color: #727272;
text-align: justify;
}
.SchoolContent{
width: 100%;
height: auto;
padding:30px 0;
background: url(../img/home/MainContentBGImage.png);
background-color: #fbfbfb;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.SchoolPageTitle{
font-size: 20px;
color: #fff;
background-color: #70bb3b;
position: relative;
padding: 10px 0;
}
#OurFacilities{
padding: 0 15px;
margin-top: 30px;
color: #FF0000;
}
#ImageCol{
padding: 0 10px;
}
.GreenStar{
float: left;
color: #70bb3b;
}
.facilitiesTitle{
text-align: justify;
color: #034d87;
padding-left: 18px;
}
.sideImage{
width: 100%;
height: 450px;
margin: 10px 0 10px 0;
}
.sideImage img{
width: 100%;
height: 100%;
object-fit: cover;
}
.SmallImageLeft{
text-align: right;
padding: 8px 0;
}
.SmallImageRight{
text-align: left;
padding: 24px 0 20px 0;
}
.SmallImageRight img, .SmallImageLeft img{
width: 25%;
height: 25%;
}
.middleImage{
width: 100%;
height: 325px;
margin: 10px 0 10px 0;
}
.middleImage img{
width: 100%;
height: 100%;
object-fit: cover;
}
/* -------------------------------------------------------------------------------- */
/* Joyful - School Life */
.SchoolLife_Bar{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#005eae+0,005eae+50,0094a6+51,0094a6+100 */
background: #005eae; /* Old browsers */
background: -moz-linear-gradient(left, #005eae 0%, #005eae 50%, #f0b11b 51%, #f0b11b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #005eae 0%,#005eae 50%,#f0b11b 51%,#f0b11b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #005eae 0%,#005eae 50%,#f0b11b 51%,#f0b11b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005eae', endColorstr='#f0b11b',GradientType=1 ); /* IE6-9 */
}
#SchoolLife_BarTitle{
font-size: 20px;
color: #fff;
background-color: #f0b11b;
padding: 10px ;
}
.CTCurrentSection{
margin-top: -30px;
padding: 10px;
font-size: 18px;
background-color: #f0b11b;
border-bottom:#8f8f8f 2px solid;
}
.SLCurrentSection{
padding: 10px;
background-color: #f0b11b;
font-size: 18px;
border-bottom:#8f8f8f 2px solid;
}
.SchoolLifeContent{
text-align: justify;
padding: 0 10px;
color: #727272;
}
.SLLeftImage{
margin: 20px 0;
padding: 0 10px;
width: 100%;
height: 220px;
}
.SLLeftImage img, .SLRightImage img{
width: 100%;
height: 100%;
object-fit: cover;
}
#SLLeft2ndImg{
margin: 20px 0;
}
.SLRightImage{
margin: 20px 0;
padding: 0 10px;
width: 100%;
height: 310px;
}
.SLRightSmallIMG {
padding: 0 10px;
margin: -10px 0;
}
.SLRightSmallIMG img {
width: auto;
height: 60px;
}
.SLOGLeftImage{
margin: 20px 0 45px 0;
padding: 0 10px;
width: 100%;
height: auto;
}
.SLOGLeftImage img{
width: 100%;
height: 100%;
object-fit: cover;
}
/* -------------------------------------------------------------------------------- */
/* Joyful - CURRICULUM */
.CURAllContent{
width: 100%;
height: auto;
padding:30px 0 10px 0;
background: url(../img/home/MainContentBGImage.png);
background-color: #fbfbfb;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.Curriculum_Bar{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#005eae+0,005eae+50,0094a6+51,0094a6+100 */
background: #005eae; /* Old browsers */
background: -moz-linear-gradient(left, #005eae 0%, #005eae 50%, #ed6f14 51%, #ed6f14 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #005eae 0%,#005eae 50%,#ed6f14 51%,#ed6f14 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #005eae 0%,#005eae 50%,#ed6f14 51%,#ed6f14 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005eae', endColorstr='#ed6f14',GradientType=1 ); /* IE6-9 */
}
#Curriculum_BarTitle{
font-size: 20px;
color: #fff;
background-color: #ed6f14;
padding: 10px ;
}
.Curriculum_CurrentSection{
margin-top: -30px;
padding: 10px;
font-size: 18px;
background-color: #ed6f14;
border-bottom:#8f8f8f 2px solid;
}
.CURCurrentSection{
padding: 10px;
background-color: #ed6f14;
font-size: 18px;
border-bottom:#8f8f8f 2px solid;
}
.CURContent{
text-align: justify;
padding: 0 10px;
color: #727272;
}
.CUImageconent{
padding: 0 15px;
width: 100%;
height: 250px;
}
.CUImageconent img{
width: 100%;
height: 100%;
object-fit: cover;
}
.CURBothSideContent{
padding: 0 10px;
}
#CURImage1{
float: left;
width: 85%;
height: 85%;
}
#CUR_Rightbottom{
margin-top: -90px;
float: right;
}
.CUR_Development01, .CUR_Development02, .CUR_Development03, .CUR_Development04{
margin: 15px 0;
font-size: 20px;
font-family: 'Handlee', cursive;
}
.CUR_Development01{
color: #ff3f66;
}
.CUR_Development02{
color: #005eae;
}
.CUR_Development03{
color: #8ea900;
}
.CUR_Development04{
color: #b03fff;
}
.CUR_Graphic2 img{
width: 100%;
}
#CURBottomCol{
margin-top: -350px;
}
.CUR_StarPar{
padding-left: 20px;
}
.RedStar{
float: left;
color: #ff3f66;
}
.Bluetar{
float: left;
color: #005eae;
}
.OrangeStar{
float: left;
color: #ffae00;
}
.CURPAR{
text-align: justify;
color: #727272;
padding-left: 20px;
}
hr.style1 {
background-color: #fff;
border-top: 2px dashed #ff3f66;
}
hr.style2 {
background-color: #fff;
border-top: 2px dashed #005eae;
}
hr.style3 {
background-color: #fff;
border-top: 2px dashed #70bb3b;
}
hr.style4 {
background-color: #fff;
border-top: 2px dashed #ffae00;
}
.CURTableContent{
padding: 0 20px;
}
#TopRowPink{
color: #ff3f66;
}
#CURBlueTitle{
color: #005eae;
}
#CURGreenTitle{
color: #8ea900;
}
#CURPurpleTitle{
color: #b03fff;
}
.CURTableGraphic{
text-align: center;
}
.CURTableGraphic img{
width: 80%;
height: 80%;
}
/* -------------------------------------------------------------------------------- */
/* Joyful - ADMISSION */
.ADMISSION_Bar{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#005eae+0,005eae+50,0094a6+51,0094a6+100 */
background: #005eae; /* Old browsers */
background: -moz-linear-gradient(left, #005eae 0%, #005eae 50%, #e83144 51%, #e83144 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #005eae 0%,#005eae 50%,#e83144 51%,#e83144 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #005eae 0%,#005eae 50%,#e83144 51%,#e83144 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005eae', endColorstr='#e83144',GradientType=1 ); /* IE6-9 */
}
#ADMISSION_BarTitle{
font-size: 20px;
color: #fff;
background-color: #e83144;
padding: 10px ;
}
.ADCurrentSection{
padding: 10px;
background-color: #e83144;
font-size: 18px;
border-bottom:#8f8f8f 2px solid;
}
.IntroSection a:link, .IntroSection a:visited,.IntroSection a:hover,.IntroSection a:active,
.SelectSection a:link, .SelectSection a:visited,.SelectSection a:hover,.SelectSection a:active{
color: #005eae;
text-decoration: none;
}
.ADCurrentSection a:link, .ADCurrentSection a:visited, .ADCurrentSection a:hover,.ADCurrentSection a:active,
.CURCurrentSection a:link, .CURCurrentSection a:visited, .CURCurrentSection a:hover,.CURCurrentSection a:active,
.SLCurrentSection a:link, .SLCurrentSection a:visited, .SLCurrentSection a:hover,.SLCurrentSection a:active,
.CTCurrentSection a:link, .CTCurrentSection a:visited, .CTCurrentSection a:hover,.CTCurrentSection a:active,
.Curriculum_CurrentSection a:link, .Curriculum_CurrentSection a:visited, .Curriculum_CurrentSection a:hover,.Curriculum_CurrentSection a:active{
color: #fff;
text-decoration: none;
}
.AdmissionContent{
text-align: justify;
padding: 0 10px;
color: #727272;
}
.AdmissionImage{
padding: 0 10px;
width: 100%;
height: auto;
}
.AdmissionImage img{
width: 100%;
height: 100%;
object-fit: cover;
}
.admissionCloud{
float: left;
}
.admissionCloud img{
width:80%;
height: 80%;
}
.pathToDownload{
margin: 0 0 20px 0;
text-align: justify;
color: #005eae;
padding-left: 18px;
}
#ERTopRowPink{
color: #ff3f66;
}
#ERCURBlueTitle{
color: #005eae;
}
#ERCURGreenTitle{
color: #8ea900;
}
#ERCURPurpleTitle{
visibility: hidden;
color: #b03fff;
}
/* -------------------------------------------------------------------------------- */
/* Joyful - School Facilities*/
.ContactUsPageTitle{
font-size: 20px;
color: #fff;
background-color: #5c9fd4;
position: relative;
padding: 10px 0;
}
.GoogleMapContainer{
padding: 30px 0;
}
.GoogleMapContainer iframe{
width: 100%;
min-height: 550px;
height: auto;
}
#GoolgeMap{
padding: 0 20px;
}
.LocationsContainer{
padding: 0px 0 10px 0;
}
#Locations{
padding: 0 20px;
color: #727272;
}
.LocationTitle, .OSH_DataTitle{
color: #b03fff;
font-weight: bold;
font-size: 16px;
line-height: 200%;
}
#CampusData{
padding-left: 25px;
}
#CU_website{
padding: 20px;
}
#CU_website a:link, #CU_website a:visited, #CU_website a:hover,#CU_website a:active{
color: #005eae;
text-decoration: underline;
}
.CU_OfficeSchool{
width: 100%;
padding: 30px 20px;
background: url(../img/home/MainContentBGImage.png);
background-color: #fbfbfb;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#OSH_ImageContainer{
padding-right: 20px;
}
#OSH_DataContainer{
color: #727272;
padding-left: 20px;
}
.OSH_CUImageconent{
padding: 0 10px;
width: 100%;
height: 280px;
}
.OSH_CUImageconent img{
width: 100%;
height: 100%;
object-fit: cover;
}
#OSH_CURImage1{
float: left;
width: 84%;
height: 84%;
}
#OSH__Rightbottom{
margin-top: -140px;
float: right;
}
/* -------------------------------------------------------------------------------- */
footer{
border-top: #cedf75;
border-top-style: solid;
border-top-width: 10px;
background-color: #abd6f0;
width: 100%;
padding: 25px 0;
}
.CampusTitle{
color: #005eae;
font-size: 20px;
font-weight: bold;
}
.CampusInfo{
font-size: 13px;
line-height: 160%;
}
#FooterImage img{
width: 100%;
margin-top: 60px;
}
.CompanyRight{
position: relative;
bottom: 0;
width: 100%;
background-color: #005eae;
padding: 10px 0;
color: #99bfdf;
}
#footerTerms{
text-align: right;
}
/* -------------------------------------------------------------------------------- */
@media screen and (max-width: 1199px) {
.CampusInfo{
font-size: 12px;
}
#MoreRightIcon{
margin: 5px;
}
.CompanyRight{
font-size: 13px;
}
.NewsImage{
position: relative; top: 60px; left: 0px;
}
#DateEvent{
padding: 60px 20px 10px 30px;
}
#dateEventBlue{
font-size: 14px;
}
#dateEventGreen{
font-size: 14px;
}
#dateEventGrey{
font-size: 14px;
}
.giraffe{
position: absolute; top: 280px; left: -50px;
}
.giraffe img{
width: 70%;
}
#IntroContentII{
margin-top: -80px;
}
.AboutImage{
margin-top: 0px;
height: 170px;
}
#MissionContentII{
margin-top: -50px;
}
.EdObjImageIII img{
float: right;
width: 80%;
height: 80%;
}
.sideImage{
height: 388px;
}
.SmallImageRight{
padding: 45px 0 20px 0;
}
.middleImage{
height: 290px;
}
.SmallImageRight img, .SmallImageLeft img{
width: 30%;
height: 30%;
}
.SLLeftImage{
height: 180px;
}
.SLRightImage{
height: 255px;
}
.SLRightSmallIMG img {
height: 50px;
}
.CUImageconent{
height: 250px;
}
#CURBottomCol{
margin-top: -340px;
}
#Locations, #CU_website{
font-size: 12px;
}
.CUR_Development01, .CUR_Development02, .CUR_Development03, .CUR_Development04{
font-size: 19px;
}
}
/* -------------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
.DateGreen{
font-size: 12px;
}
.CampusTitle{
font-size: 16px;
}
#Calendar{
padding: 5px;
}
#LatestNews{
padding: 10px;
}
#MoreRightIcon{
margin: 4px;
}
.CompanyRight{
text-align: center;
}
#footerTerms{
padding-top: 10px;
text-align: center;
}
.NewsImage{
position: relative; top: 40px; left: 0px;
}
#DateEvent{
padding: 40px 20px 10px 30px;
}
#dateEventBlue{
font-size: 12px;
}
#dateEventGreen{
font-size: 12px;
}
#dateEventGrey{
font-size: 12px;
}
.giraffe, .EdPhSmallImg, .EdObjImageIII, #CUR_Rightbottom, #OSH__Rightbottom{
display: none;
}
h11{
font-size: 16px;
}
#IntroContent, #IntroContentII{
font-size: 12px;
}
#IntroContentII{
margin-top: -120px;
}
.IntroCurrentSection,.CurrentSection,.IntroSection,.SelectSection, .CTCurrentSection, .SLCurrentSection{
font-size: 16px;
}
.AboutImage{
height: 120px;
}
.IntroGraphic1 img{
float: right;
width: 80%;
height: 80%;
}
.MissionImage, .EdPhImage, .EdObjImage, .EdObjImageII{
height: 160px;
}
#MissionContent, #MissionContentII, #EdPhContent, .EdObjectives, .SchoolLifeContent, .CURBothSideContent, .pathToDownload{
font-size: 12px;
}
#MissionContentII{
margin-top: -120px;
}
#MissionContentII img{
width: 50%;
height: 50%;
}
.MSGraphic img{
float: right;
width: 60%;
height: 60%;
}
#MSRightImg{
margin-top: -20px;
}
.EdPhSmallImg img{
width: 70%;
}
.sideImage{
height: 300px;
}
.SmallImageRight{
padding: 23px 0 20px 0;
}
.middleImage{
height: 224px;
}
.SmallImageRight img, .SmallImageLeft img{
width: 40%;
height: 40%;
}
.SLLeftImage{
height: 150px;
}
.SLRightImage{
height: 215px;
}
.SLRightSmallIMG img {
height: 40px;
}
.SLOGLeftImage{
margin: 20px 0 60px 0;
}
#CURImage1{
float: left;
width: 100%;
height: 100%;
}
.CUR_Development01, .CUR_Development02, .CUR_Development03, .CUR_Development04{
font-size: 14px;
}
.CUImageconent{
height: 180px;
}
#CURBottomCol{
margin-top: -280px;
}
.admissionCloud{
float:initial;
text-align: center;
}
.admissionCloud img{
width:30%;
height: 30%;
}
.pathToDownload{
margin: 15px 0 15px 0;
padding-left: 0px;
}
.OSH_CUImageconent{
padding: 0 10px;
width: 100%;
height: 200px;
}
#OSH_CURImage1{
float: left;
width: 100%;
height: 100%;
}
.month {
font-size: 18px;
}
.clndr_table td {
font-size: 14px;
}
}
/* -------------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
.logo{
width: 100%;
text-align: center;
padding: 0;
}
.navsublinks{
display: none;
text-align: center;
padding: 5px 0px 12px 0;
}
#MenuColor7{
display: block;
}
#Calendar, #schoolHeader, #OurFacilities, #ImageCol, .SchoolLifeContent, .CURBothSideContent, .CUImageconent, .CURTableContent, .AdmissionContent {
padding: 0 12%;
}
#Calendar img{
margin: 0 auto;
width: 100%;
height: auto;
}
.PageTitle, #schoolHeader, .SchoolPageTitle, .ContactUsPageTitle{
text-align: center;
}
#LatestNews{
padding: 5% 12%;
}
#LatestNews img{
width: 100%;
height: auto;
}
#Video{
padding: 0 12%;
}
#Campus{
display: none;
}
#FooterImage img{
width: 70%;
margin-top: 0px;
}
.CompanyRight{
padding: 10px 12%;
}
#cloudBus, .NewscontentImage, .SLOGLeftImage, .CURTableGraphic, .AdmissionGraphic{
display: none;
}
#DateEvent{
padding: 10px 18% 0 18%;
}
#dateEventBlue{
font-size: 14px;
}
#dateEventGreen, #dateEventGrey, .CURBothSideContent{
font-size: 14px;
}
#AboutUsTitle, #SchoolLife_BarTitle,#BarTitle, #ADMISSION_BarTitle,#Curriculum_BarTitle{
text-align: center;
}
.AboutUs_Bar{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0094a6+0,0094a6+100 */
background: #0094a6; /* Old browsers */
background: -moz-linear-gradient(left, #0094a6 0%, #0094a6 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #0094a6 0%,#0094a6 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #0094a6 0%,#0094a6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0094a6', endColorstr='#0094a6',GradientType=1 ); /* IE6-9 */
}
.SchoolLife_Bar{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#005eae+0,005eae+50,0094a6+51,0094a6+100 */
background: #005eae; /* Old browsers */
background: -moz-linear-gradient(left, #f0b11b 0%, #f0b11b 50%, #f0b11b 51%, #f0b11b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #f0b11b 0%,#f0b11b 50%,#f0b11b 51%,#f0b11b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #f0b11b 0%,#f0b11b 50%,#f0b11b 51%,#f0b11b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b11b', endColorstr='#f0b11b',GradientType=1 ); /* IE6-9 */
}
.Curriculum_Bar{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#005eae+0,005eae+50,0094a6+51,0094a6+100 */
background: #005eae; /* Old browsers */
background: -moz-linear-gradient(left, #ed6f14 0%, #ed6f14 50%, #ed6f14 51%, #ed6f14 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #ed6f14 0%,#ed6f14 50%,#ed6f14 51%,#ed6f14 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #ed6f14 0%,#ed6f14 50%,#ed6f14 51%,#ed6f14 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed6f14', endColorstr='#ed6f14',GradientType=1 ); /* IE6-9 */
}
.ADMISSION_Bar{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#005eae+0,005eae+50,0094a6+51,0094a6+100 */
background: #005eae; /* Old browsers */
background: -moz-linear-gradient(left, #e83144 0%, #e83144 50%, #e83144 51%, #e83144 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #e83144 0%,#e83144 50%,#e83144 51%,#e83144 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #e83144 0%,#e83144 50%,#e83144 51%,#e83144 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e83144', endColorstr='#e83144',GradientType=1 ); /* IE6-9 */
}
#AboutUsContentSelection, .IntroGraphic1, .MSGraphic, #MissionContentII img, .HZlineMS, .SmallImageRight , .SmallImageLeft
, .SLRightSmallIMG, #SchoolLifeContentSelection
{
display: none;
}
#AboutUsContent{
padding: 10px 12%;
}
.IntroGraphic1,#HZlineII{
visibility: hidden;
}
#IntroContent{
margin-top: 10px;
}
#IntroContentII{
margin-top: -10px;
}
#IntroContent,#IntroContentII, #EdPhContent, .EdObjectives, .SchoolLifeContent, .pathToDownload{
font-size: 14px;
}
.AboutImage{
height: 170px;
}
.MissionImage, .EdPhImage, .EdObjImage, .EdObjImageII{
height: 250px;
}
.MSGraphic {
width: 30%;
height: 30%;
}
#MissionContentII{
margin-top: 0px;
}
#MissionContent, #MissionContentII, #MSRightImg, #EdPhContent{
margin-top: 15px;
}
.EdObjectives{
margin: 20px 0;
}
.EdObjImage, .EdObjImageII{
padding: 0;
}
.sideImage, .SLRightImage{
height: 500px;
}
.middleImage, .SLLeftImage{
height: 250px;
}
.CUR_Development01, .CUR_Development02, .CUR_Development03, .CUR_Development04{
font-size: 20px;
}
#CURBottomCol{
margin-top: 30px;
}
.CURRightPar{
margin-top: 10px;
}
.CURAllContent{
padding:10px 0 30px 0;
}
.GoogleMapContainer, .CU_OfficeSchool{
padding: 30px 12%;
}
.GoogleMapContainer iframe{
min-height: 320px;
}
.LocationsContainer{
padding: 0 12% 30px 12%;
}
#Locations, #CU_website{
font-size: 14px;
}
#CampusData{
padding-left: 10px;
}
/* Force table to not be like tables anymore */
#no-more-tables table,
#no-more-tables thead,
#no-more-tables tbody,
#no-more-tables th,
#no-more-tables td,
#no-more-tables tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#no-more-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#no-more-tables tr {
border-bottom: 2px dashed #ff3f66;
}
#no-more-tables td {
/* Behave like a "row" */
border: none;
/*
border-bottom: 1px solid #eee; */
position: relative;
padding-left: 25%;
white-space: normal;
text-align:left;
}
#no-more-tables td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 15px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}
/*
Label the data
*/
#no-more-tables td:before { content: attr(data-title);
}
/* Force table to not be like tables anymore */
#no-more-tablesII table,
#no-more-tablesII thead,
#no-more-tablesII tbody,
#no-more-tablesII th,
#no-more-tablesII td,
#no-more-tablesII tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#no-more-tablesII thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#no-more-tablesII tr {
border-bottom: 2px dashed #ff3f66;
}
#no-more-tablesII td {
/* Behave like a "row" */
border: none;
/*
border-bottom: 1px solid #eee; */
position: relative;
padding-left: 70%;
white-space: normal;
text-align:left;
}
#no-more-tablesII td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 15px;
left: 6px;
width: 65%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}
/*
Label the data
*/
#no-more-tablesII td:before { content: attr(data-title);
}
.admissionCloud{
float: left;
}
.admissionCloud img{
width:80%;
height: 80%;
}
.pathToDownload{
margin: 8px 0 30px 0;
text-align: justify;
color: #005eae;
padding-left: 15px;
}
.OSH_CUImageconent{
padding: 0 0;
}
.OSH_CUImageconent{
height: 250px;
}
#OSH_DataContainer{
margin-top: 10px;
}
#OSH_DataContainer{
padding-left: 0px;
}
.month {
font-size: 26px;
}
.clndr_table td {
font-size: 16px;
}
}
@media screen and (max-width: 500px) {
.logo img{
width: 90%;
}
#Calendar, #schoolHeader, #OurFacilities, #ImageCol, .SchoolLifeContent, .CURBothSideContent, .CUImageconent , .CURTableContent, .AdmissionContent{
padding: 0 5%;
}
#Calendar img{
margin: 0 auto;
width: 100%;
height: auto;
}
#LatestNews{
padding: 5% 5%;
}
#LatestNews img{
width: 100%;
height: auto;
}
#Video{
padding: 0 5%;
}
#FooterImage img{
width: 80%;
margin-top: 0px;
}
.CompanyRight{
padding: 10px 5%;
}
#DateEvent{
padding: 10px 12%;
}
#dateEventBlue{
font-size: 14px;
}
#dateEventGreen{
font-size: 14px;
}
#dateEventGrey{
font-size: 14px;
}
#AboutUsContent{
padding: 10px 5%;
}
.MissionImage, .EdPhImage{
height: 180px;
}
.sideImage, .SLRightImage{
height: 300px;
}
.middleImage,.SLLeftImage{
height: 180px;
}
.admissionCloud{
float:initial;
text-align: center;
}
.admissionCloud img{
width:40%;
height: 40%;
}
.pathToDownload{
margin: 20px 0 20px 0;
padding-left: 0px;
}
.GoogleMapContainer,.CU_OfficeSchool{
padding: 30px 5%;
}
.GoogleMapContainer iframe{
min-height: 250px;
}
.LocationsContainer{
padding: 0 5% 30px 5%;
}
#Locations{
font-size: 14px;
}
#CampusData{
padding-left: 15px;
}
.OSH_CUImageconent{
height: 200px;
}
.CUR_Development01, .CUR_Development02, .CUR_Development03, .CUR_Development04{
font-size: 16px;
}
}