/*@import url(http://fonts.googleapis.com/css?family=Arimo);*/

/* #Reset & Basics (Inspired by E. Meyers) */
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
	body { line-height: 1; font-size: 100%;}

/* #Font-Face */
	@font-face { /* Hotline */
		font-family: "TheSansCdRegular";
		src: url("../fonts/thescof5-webfont.eot");
		font-weight: normal;
		font-style: normal;}
		
	@font-face { /* Hotline */
		font-family: TheSansCdRegular;
		src: url('../fonts/thescof5-webfont.eot');
		src: url('../fonts/thescof5-webfont.eot?#iefix') format('embedded-opentype'),
			 url('../fonts/thescof5-webfont.woff') format('woff'),
			 url('../fonts/thescof5-webfont.svg.html#TheSansCdRegular') format('svg');
		font-weight: normal;
		font-style: normal;}
	
/* #Basic Styles */
	html, html a {-webkit-font-smoothing: antialiased;}
	body { background: #fff; font: 16px/21px Arial, Helvetica, sans-serif; color: #555; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; font-weight: bold;}

/* #Typography */
	h1{ text-indent: -9999px; height: 359px; width: 299px; background: url(../images/h1.png) no-repeat;}
	h2{ font-family: 'TheSansCdRegular', Helvetica, Arial, sans-serif; font-size:32px; line-height: 38px; margin-bottom: 15px;}
	h3{ font-family: 'TheSansCdRegular', Helvetica, Arial, sans-serif; font-size:24px; line-height: 28px; color: #fff; height: 70px; padding-top: 30px; background:url(../images/h2-bg.png) repeat-x; margin-bottom:0;}
	h3.oneline{ height: 55px; padding-top: 45px;}

	p { margin: 0 0 15px 0; font-weight:bold;}
	strong{ font-weight:bold;}
	.rel-para p{ position:relative; margin-top: -25px; margin-bottom: 18px;}
	.rel-para span{ font-family: 'TheSansCdRegular', Helvetica, Arial, sans-serif; font-size:32px; line-height: 38px; margin-bottom: 10px;}
	
	sup{ font-size: 80% !important; vertical-align:top; position: relative; top: -5px;}

/* #Lists */
	ul { margin-bottom: 0; list-style: none outside; }
	ul.disc { list-style: disc inside; margin-left: 0px; }
	li { line-height: 18px; margin-bottom: 0; }

	
/* #Links */
	a, a:visited { outline: 0; color: #45b9d2; text-decoration:underline; }
	a:hover, a:focus{ color: #000;}

/* #Image */
	img { display:block;}
	
/* #body */
	.container { position: relative; width: 960px; margin: 0 auto; background: url(../images/container-bg.png) repeat-x;}
	.contentwrap{ padding: 0 30px;}
	
	.header{ height: 136px;}
	
	.mastheadwrap{ background: url(../images/sep-bg.png) repeat-x bottom; padding-bottom: 50px;}
	.masthead{ width: 299px;}
	.mastcopy{ width: 570px; padding-left: 15px;}
	
	.button2{ margin: auto; width: 502px;}
	.button1 a, .button2 a{ background: url(../images/button-bg.png) top left no-repeat; height: 72px; display:block; width: 502px; text-indent: -9999px; margin-top:15px;}
	.button1 a:hover, .button2 a:hover{ background-position: bottom left;}
	
	.boxwrap, .cta{ padding-bottom: 20px; background: url(../images/sep-bg.png) repeat-x bottom;}
	.box{ width: 296px; height: 400px; text-align: center; background: #d1c4b8; }
	.box p{ padding: 0 28px; }
	.box span.notes{ font-size: 13px; display:block; padding-bottom: 10px; line-height: 15px;}

	.listwrap{ margin-bottom: 30px; background: url(../images/listing-bg.png) center repeat-y;}
	.listbox{ width: 430px; font-size: 18px;}
	.listbox h2{ height: 80px; overflow:hidden;}
	.listing li{ line-height: 40px; background: url(../images/list-icon.png) no-repeat; padding-left: 83px; height: 48px; margin-bottom: 22px;}
	.listing li.annual{ background-position: 0 0;}
	.listing li.card{ background-position: 0 -50px;}
	.listing li.singpass{ background-position: 0 -100px;  padding-left: 57px;}
	.listing li.applicant{ background-position: 0 -150px;  padding-left: 57px;}
	.listing li.age{ background-position: 0 -200px;}
	.cta{ text-align:center; padding-bottom: 40px;}
	
	.footer{ padding: 10px 0;}
	ul.social li{ float: left; margin-right: 17px; width: 36px; height: 36px;  background: #fff; }
	ul.social li:hover{ background: #c0e3ee;}
	ul.social li a{ text-indent: -9999px; width: 36px; height: 36px; display:block; background: url(../images/social.png);}
	ul.social li a.facebook{ background-position: 0 0;}
	ul.social li a.twitter{ background-position: 0 -36px;}
	ul.social li a.google{ background-position: 0 -72px;}
	ul.social li a.youtube{ background-position: 0 -108px;}
	
	.boxes .window {background-color: #fff; display: none; left: 0; padding: 20px; position: fixed; top: 0; width: 440px; z-index: 9999;	}	
	.window { background-color: #fff !important; border: 1px solid #e1e1e1 !important; border-radius: 6px 6px 6px 6px !important; box-shadow: 0 0 5px 5px #bbb !important; padding: 10px !important; width: 465px;	}	
	.window p{ font-weight: normal;}
	.btn-close-content { height: 15px; width: 100%;	}	
	.btn-close-content a.close { border-bottom: none; display: block; float: right; height: 10px; width: 10px; line-height: 20px; text-decoration: none;}
    .btn-close-content a img {border-bottom: none;}
	.learn a{margin-top:10px; margin-bottom:15px; float:right}
	.donly{display:block;}
	.monly{display:none}

	
/* #Misc */
	.left{ float: left;}
	.right{ float: right;}
	.mr6{ margin-right: 6px;}
	.mb10{ margin-bottom: 10px;}
	.pt15{ padding-top: 15px !important;}
	.pt22{ padding-top: 22px !important;}

/* #Image */
	img.respo { max-width: 100%; height: auto; display:block; }
	
/* #Clearing */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden;}
   	.clearfix:before,
    .clearfix:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
    .clearfix:after { clear: both; }
    .clearfix { zoom: 1; }
    .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
	.spacer { clear: both; display: block; overflow: hidden; visibility: hidden; width: 100%; height: 45px; }
	.rel-ul {margin-bottom:15px; margin-top:10px; margin-left:15px;}
	
/* #Media Queries  */
@media only screen and (max-width: 959px) {
	.container{ width: 768px;}
	.contentwrap{ padding: 0 14px;}
	.header{ height: 130px;}
	.masthead{ width: 350px; margin-bottom:20px; height:260px;}
	/*.masthead h1{background: url(../images/h1-mobile.png) no-repeat;}*/
	.mastcopy{ width: 350px; padding-left: 15px;}
	.spacer{ height: 30px;}
	.box{ width: 228px; height:410px}
	.box .box-inner { height: 230px; padding: 20px 20px;}
	.listbox {  width: 350px;}
	h1{ font-size:45px; line-height: 45px; margin-bottom: 15px; padding-right: 0;}
	.listing li{ line-height: 20px; height: 28px; padding-top: 10px; padding-bottom: 10px;}
	.button1 a{ background: url(../images/howtoapply.png) top left no-repeat; height: 58px; display:block; width: 299px;}
	.mr6{margin-right:30px;}
	.listing li.card{margin-top:100px}
	.donly{display:none;}
	.monly{display:block;}
}

@media only screen and (max-width: 767px) {
	.contentwrap{ padding: 0 10px;}
	.header{ height: 120px;}
	.left{ float: none;}
	.right{ float: none;}
	.masthead{ width: 100%; margin-bottom:20px; height:260px;}
	/*.masthead h1{background: url(../images/h1-mobile.png) no-repeat;}*/
	.mastcopy{width: 100%; padding-left: 0; margin-bottom:20px;}
	h1{ font-size:35px; line-height: 35px; margin-bottom: 15px; padding-right: 0;}
	.box{ width: 100%; margin:0 auto 10px auto; height: auto; padding-bottom: 10px;}
	.box .box-inner{ padding:20px 20px; height:auto;}
	.learn{ padding: 5px 0 15px 0;}
	.listwrap{ background: none; margin-bottom: 0;}
	.listbox {  width: 100%; margin-bottom: 20px;}
	.listbox h2 { height: auto;}	
	.listing li.singpass{  padding-left: 83px;}
	.listing li.applicant{ padding-left: 83px;}
	.br-hide{ display:none;}
	.d-only{ display:none;}
	.m-only{ display:block;}
	.rel-para p{margin-bottom:15px;}
	.rel-para span{ font-family: 'TheSansCdRegular', Helvetica, Arial, sans-serif; font-size:28px; line-height: 38px; margin-bottom: 10px;}	
	.button1 a{ background: url(../images/howtoapply.png) top left no-repeat; height: 58px; display:block; width: 299px;}
	.spacer{ height: 30px;}
	.mastheadwrap {background: url(../images/sep-bg.png) repeat-x bottom; height:auto; padding-bottom: 10px;}
	.masthead h1{background: url(../images/h1-mobile.png) no-repeat;}
	.listing li.card{margin-top:100px}
	.mastcopy{height: auto;}
	.terms {float:right}
	.mastheadwrap h2{font-size:48px}
	.button2{ margin: auto; width: 299px;}
	.button1 a{ background: url(../images/howtoapply.png) top left no-repeat; height: 58px; display:block; width: 299px;}
	.button2 a{ background: url(../images/howtoapply.png) top left no-repeat; height: 58px; display:block; width: 299px;}
	img.imgauto{ margin: auto; width: 250px;}
	.mr6{margin-right:0 !important;}
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
	.container { width: 460px; padding: 0; }
	.listing li.card{margin-top:100px}
	h1{height: 260px;}
}

@media only screen and (max-width: 479px) {
	.masthead{ width: 100%; margin-bottom:20px; height:215px}
	.masthead h1{background: url(../images/h1-mobile.png) no-repeat;}
	.mastheadwrap h2 {font-size:31px; line-height:35px; margin-bottom:15px}
	.container{ width: 320px; padding: 0; }
	.termsright a{ font-size: 12px;}	
	.button2{ margin: auto; margin-bottom:20px}
	.rel-para p{margin-bottom:15px;}
	.rel-para span{ font-family: 'TheSansCdRegular', Helvetica, Arial, sans-serif; font-size:28px; line-height: 38px; margin-bottom: 10px;}
	.rel-ul {margin-bottom:15px; margin-top:10px; margin-left:10px;}
	.button1 a{ background: url(../images/howtoapply.png) top left no-repeat; height: 58px; display:block; width: 299px;}
	.spacer{ height: 30px;}
	.learn a{float:right}
	.listing li.card{margin-top:100px}
	.terms {font-size:13px}
	.button1 a{margin-bottom:20px}
}