html,body{height:100%;
}
body{
background: url("http://www.coms.com.sg/images/body-tail.gif") top center repeat;
font:13px/20px Arial, Helvetica, sans-serif;
color:#808092;
/* position:relative; */
min-width:320px;
}
/*********************************header*************************************/
header{width:100%;}
/* #page1 header{background:url("http://www.coms.com.sg/images/dashed-border.gif") center bottom repeat-x; padding-bottom:10px;} */
.header-border{background:url("http://www.coms.com.sg/images/header-border.gif") center bottom repeat-x; padding-bottom:10px;}
.header-bg{padding:14px 0 12px; background:url("http://www.coms.com.sg/images/header-pannel-tail.gif") center top repeat;}
h1{
margin-left:6px;
float:left;
font-size:36px;
line-height:44px;
font-weight:bold;
}
h1 a{color:#dfdfb9;}
h1 a strong{color:#07a2ca; font-weight:bold;}
h1 a:hover{text-decoration:none;}
/********************************* Content **********************************/
#content{width:100%;}
.content-bg1{
position:relative;
padding:21px 0 0;
width:100%;
}
.content-bg1.indent-bottom{padding-bottom:44px;}
.content-bg2{
background: none repeat scroll 0 0 #F3F3E8;
border-bottom: 6px solid #ddddd5;
border-top: 5px solid #ddddd5;
padding: 31px 0 58px;
width: 100%;
font-size:12px;
line-height:18px;
color:#282640;
margin-top:-30px;
}
.content-bg3{
background:url("http://www.coms.com.sg/images/slider-tail.gif") center top repeat;
position:inherit;
/* width:100%; */
padding: 38px 0 66px;
font:12px/18px Arial, Helvetica, sans-serif;
color:#282640;
}
#page3 .content-bg3{padding-bottom:47px;}
.content-border-top{
background:url("http://www.coms.com.sg/images/slider-border-top.png") center top repeat-x;
width:100%;
height:7px;
position:absolute;
top:0;
left:0;
z-index:99;
}
.content-border-bot{
background:url("http://www.coms.com.sg/images/slider-border-bot.png") center top repeat-x;
width:100%;
height:7px;
position:absolute;
bottom:0;
left:0;
z-index:99;
}
/* ---------- Titles ---------*/
h3{font-size:30px; line-height:36px; color:#1d1a33;}
h3 strong{color:#07a2ca; font-weight:bold;}
h4{font-size:22px; line-height: 27px; color:#305dd0;}
h5{font-size:20px; line-height:24px; color:#1d1a33;}
h5 a{color:#1d1a33;}
h5 a:hover{text-decoration:none; color:#07a2ca;}
h6{font:bold 13px/20px Arial, Helvetica, sans-serif; color:#dfdfb9;}
.content-bg2 h6, #page6 .content-bg3 h6{font: bold 12px/18px Arial, Helvetica, sans-serif; color:#282640;}
.content-bg3 h6{font: bold 12px/18px Arial, Helvetica, sans-serif; color:#07a2ca;}
h6 a{color:#dfdfb9;}
h6 a:hover{text-decoration:none; color:#000;}
.content-bg2 h6 a{color:#282640;}
.content-bg2 h6 a:hover{text-decoration:none; color:#000;}
.content-bg3 h6 a{color:#000;}
/*---------- Columns --------*/
.col-3-1{float:left; width:240px; margin-right:37px;}
/*----------- Boxes ----------*/
.welcome-box{
/* background:url("http://www.coms.com.sg/images/welcome-box-shadow.png") 0 0 repeat; */
margin:-91px -10px 0;
padding:0 10px;
font:13px/20px Arial, Helvetica, sans-serif;
color:#808092;
}
.welcome-box .bg{
background:url("http://www.coms.com.sg/images/welcome-box-tail.gif") 0 0 repeat;
margin-top:-163px;
float:left;
width:100%;
z-index:900;
position:relative;
}
.welcome-box .indents{padding: 45px 30px 42px 32px;}
.welcome-box h2{
color: #dfdfb9;
font-size: 100px;
line-height: 120px;
margin:0 0 6px -3px;
}
.welcome-box .slogan{
color: #07A2CA;
font-size: 38px;
line-height: 46px;
margin: 0 0 26px -3px;
}
.box1{
background: #DFDFB9;
color: #282640;
font: 12px/18px Arial, Helvetica, sans-serif;
width: 100%;
}
.box1 .indents {padding: 10px 10px 28px;}
.box1 .indents1 {padding: 0 10px;}
/*----------- Other -----------*/
blockquote{width:100%;}
.quote-caption{text-align:right;}
/*---------- Links ----------*/
a{color:#282640; outline:none; cursor:pointer; text-decoration:none;}
a:hover{text-decoration: underline;}
a[href^="tel:"]{color: inherit; text-decoration:none;}
.link{color:#fff;}
.link:hover{text-decoration:none; color:#07a2ca;}
.button{
display:inline-block;
cursor:pointer;
font:12px/18px Arial, Helvetica, sans-serif;
color:#fff;
padding:4px 12px;
background:#07a2ca;
}
.button:hover{text-decoration:none; background-color:#1d1a33;}
.button2{
display:inline-block;
cursor:pointer;
font:12px/18px Arial, Helvetica, sans-serif;
color:#fff;
padding:4px 12px;
background:#07a2ca;
}
.button2:hover{text-decoration:none; background-color:#040606;}
/*----- Images -----*/
.img-indent{float:left; margin-right:20px;}
.img-indent1-1{float:left; margin-right:7px;}
.img-indent2{float:left; margin-right:10px;}
.img-indent3{float:left; margin-right:15px;}
.img-box{
display:block;
background:#fff;
padding:4px;
border:1px solid #d2caca;
box-shadow:2px 2px 5px #dadad1;
}
.content-bg1 .img-box{box-shadow:none;}
/*---------- Lists -----------*/
.last-item{margin-right:0 !important; margin-bottom:0 !important;}
.list-1 li{
overflow:hidden;
font:12px/18px Arial, Helvetica, sans-serif;
color:#282640;
margin-bottom:12px;
}
.list-1 .term{
float:left;
width:48px;
font-size:20px;
line-height:24px;
color:#1d1a33;
margin-top:-2px;
}
.list-1 .term:hover{text-decoration:none; color:#07a2ca;}
.list-2 li{
font:12px/18px Arial, Helvetica, sans-serif;
color:#282640;
padding-left:28px;
background:url("http://www.coms.com.sg/images/marker-2.png") 0 3px no-repeat;
margin-bottom:24px;
}
.list-2 a{color:#282640;}
.list-2 a:hover{text-decoration:none; color:#07a2ca;}
.list-3 li{
font:12px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin-bottom:1px;
}
.list-3 a{
display:block;
color:#fff;
background:#07a2ca;
padding:6px 12px 7px;
}
.list-3 a:hover{text-decoration:none; background-color:#212036;}
.list-4 li{
font:12px/18px Arial, Helvetica, sans-serif;
color:#282640;
padding-left:24px;
background:url("http://www.coms.com.sg/images/marker-4.png") 0 0 no-repeat;
margin-bottom:16px;
}
.list-5 li{
font:13px/20px Arial, Helvetica, sans-serif;
color:#808092;
padding-top:3px;
padding-left:30px;
background:url("http://www.coms.com.sg/images/marker-5.png") 0 5px no-repeat;
margin-bottom:11px;
}
.list-5 a{color:#808092;}
.list-5 a:hover{text-decoration:none; color:#cfcfac;}
/*---------- Borders ---------*/
.border-bottom{
background:url("http://www.coms.com.sg/images/border.png") 0 0 repeat;
width:100%;
height:8px;
position:absolute;
left:0;
bottom:0px;
margin-left:-5px;
z-index:998;
}
.border-top{background:url("http://www.coms.com.sg/images/dashed-border.gif") center 9px repeat-x; padding-top:10px;}
/*---------- Indents ---------*/
p, .p3-1{margin-bottom:18px}
.p0{margin-bottom:0;} .p0-1{margin-bottom:3px;}
.p1{margin-bottom:5px;} .p1-1{margin-bottom:8px;}
.p2{margin-bottom:10px;} .p2-1{margin-bottom:12px;}
.p3{margin-bottom:15px;}
.p4{margin-bottom:20px;} .p4-1{margin-bottom:22px;}
.p5{margin-bottom:25px;} .p5-1{margin-bottom:27px;}
.p6{margin-bottom:30px;} .p6-1{margin-bottom:32px;}
.p7{margin-bottom:35px;} .p7-1{margin-bottom:37px;}
.p8{margin-bottom:40px;} .p8-1{margin-bottom:42px;}
.indent-top1{padding-top:5px;}
.indent-top3{padding-top:16px;}
.indent-left4-1{padding-left:22px;}
.indent-right3{padding-right:15px;}
.indent-right8{padding-right:40px;}
.indent-right9-1{padding-right:47px;}
.indent-bottom4{padding-bottom:20px;}
.indent-bottom8-1{padding-bottom:43px; }
/*----------- Map ------------*/
#map iframe{width:100%; height:189px;}
#map dl{width:100%; position:relative; overflow:hidden;}
#map dt{margin-bottom:18px;}
#map dl span {float:left; width:82px;}
/************************************** Footer *************************************/
footer{
width:100%;
font:12px/18px Arial, Helvetica, sans-serif;
color:#fff;
padding: 0px 0 25px;
margin-top:-45px;
}
.footer-text{float:left;}
.footer-text a{color:#07a2ca;}
.footer-text a:hover{text-decoration:none; color:#fff;}
.footer-link{float:right;}
/*=================================================================================*/
@media only screen and (max-width: 995px) {
p, .p3, .p3-1{margin-bottom:15px}
.p4-1, .p5, .p5-1, .p6, .p6-1, .p7, .p7-1, .p8, .p8-1{margin-bottom:20px;}
h3{margin-bottom:15px !important;}
.img-indent:not(.img-indent-none-tp) img, img-indent1-1:not(.img-indent-none-tp) img, .img-indent2:not(.img-indent-none-tp) img, .img-indent3:not(.img-indent-none-tp) img{width:auto;}
.col-3-1{width:204px; margin-right:20px;}
.indent-left4-1{padding-left:0;}
.indent-right3, .indent-right8, .indent-right9-1{padding-right:0;}
/*-----------------------------------------*/
h1{padding-left:10px;}
.welcome-box .bg{margin-top:-40px;}
.welcome-box .indents{padding: 5px 20px 30px;}
.welcome-box h2{font-size: 80px; line-height: 96px; margin-left:-2px;}
.welcome-box .slogan{font-size: 30px; line-height: 36px; margin: 0 0 15px -2px;}
.welcome-box h6{margin-bottom:10px !important;}
}
@media only screen and (max-width: 767px) {
.img-indent:not(.img-indent-none-ml) img, .img-indent1-1:not(.img-indent-none-ml) img, .img-indent2:not(.img-indent-none-ml) img, .img-indent3:not(.img-indent-none-ml) img{width:auto;}
.col-3-1{width:200px;}
.content-bg1{padding:21px 0 30px;}
.indent-bottom4{padding-bottom:30px;}
/*-----------------------------------------*/
h1{padding-left:0;}
.welcome-box {padding-bottom:10px;}
.welcome-box .bg{margin-top:0;}
footer{padding: 30px 0;}
.footer-text, .footer-link{float:none;}
}
@media only screen and (max-width: 479px) {
.img-indent:not(.img-indent-none-mp) img, .img-indent1-1:not(.img-indent-none-mp) img, .img-indent2:not(.img-indent-none-mp) img, .img-indent3:not(.img-indent-none-mp) img{width:auto;}
.col-3-1{float:none; width:100%; margin-right:0; margin-bottom:30px;}
}