/*
Theme Name: Sembcorp Marine Ecard
Author: Vanxy
Description: Theme for Sembcorp Marine - Ecard
Version: 1.0
Tags: accessibility-ready
Text Domain: http://ecard.sembmarine.com/
*/



@import url(https://fonts.googleapis.com/css?family=Oxygen:700,400,300|Open+Sans:400,600,700|Roboto:400,700|Lora:700);

@font-face {
font-family: Frutiger;
src: url("../fonts/frutiger-light-regular.otf") format("opentype");
}
@font-face {
font-family: Frutiger;
font-weight:bold;
src: url("../fonts/frutiger-light-bold.otf") format("opentype");
}
@font-face {
font-family: Frutiger;
font-style:italic;
src: url("../fonts/frutiger-light-italic.otf") format("opentype");
}
@font-face {
font-family: FTSterling;
src: url("../fonts/FTSterlingRegular.otf") format("opentype");
}
 

@font-face {
font-family: GraublauWeb;
font-weight: bold;
src: url("path-to-the-font-file/GraublauWebBold.otf") format("opentype");
}

::selection {
  background: #dff0d8; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #dff0d8; /* Gecko Browsers */
}
p {font-size:15px;line-height:20px;}
img.alignleft {
    float: left !important;
    margin-top: 5px !important;
    margin-right: 15px !important;
    margin-bottom: 15px !important;
}

img.alignright {
    float: right !important;
    margin-top: 5px !important;
    margin-left: 15px !important;
    margin-bottom: 15px !important;
}

.fullheight {
    margin-bottom: -99999px;
    padding-bottom: 99999px;
    background-color:#fff;
	margin-top:25px;
}

/*body.greenbg {
    background:#008060;
    
}*/
/*.greenbg {
    background:#003eff;
    
}*/
.greenbg {
    background:#2052ed;
    
}
body.redbg {
    background:#a60802;
    
}  
#equalheight {
    overflow: hidden; 
}
.main-login {
    margin-top: 15%;
	
}
.login-box {    background: #eeeeee;
    border-radius: 8px;
    border: 1px solid #145839;}
#login-logo {height:65px;    margin-top: 20px;
    margin-bottom: 10px;}
.main-login .login-button {width:200px!important;margin:0 auto;}
.main-login .form-horizontal .control-label {text-align:Left;}
.main-login .form-horizontal .error-label {color:#ce4844;background:#f7efd8; border:1px solid #CC9C0A;    padding: 2px 10px;
    text-align: center;
    margin-top: 5px;}

.maincontent h1 {
    font-family: 'Oxygen', sans-serif;
    font-weight: 400;
    font-size: 34px;
    line-height: 36px;
    color:#fff;
    margin-top: 15px;
    margin-bottom: 18px;
    display: block;
    margin-left: 10px;
    letter-spacing: -1px;
} 
.maincontent h2 {
    font-family: 'Oxygen', sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 30px;
    color:#333 !important;
    margin-top: 15px;
    margin-bottom: 18px;
    display: block;
    letter-spacing: -1px;
}
 
 
label a {
    color:#fff;
} 
#footer {
    
}

a.label-danger {
background-color: #1c5694;
font-size: 11px;
display: inline-block;
margin-bottom: 5px;
margin-bottom: 5px;
font-weight: normal;
padding: 5px 10px;
border-radius: 5px;
color: #fff !important;
}

a.label-danger[href]:hover {
background-color: #fabd28;
}

 
.innerpagepad {
    padding: 0px 10px 10px;
}
 

.panel-heading.announcement {    border-color: #bf5b00;
    background: #bf5b00;}

.panel.panel-primary.announcement  {    margin-top: 23px;
    border-color: #bf5b00;
}
.panel-body.announcement {
    padding: 8px 15px;
    font-size: 14px;
}
.panel-heading .glyphicon {font-size:18px; color:white;    padding: 0 0 0 5px;}

 
/*Media Queries*/
ul.quick-links {list-style:none;padding-left:20px;margin-bottom:0;}
ul.quick-links a{font-size:14px;}
.quick-links li:before {
    content: "\f0da";
    font-family: FontAwesome;
    display: inline-block;
    width: 0.7em;
    margin-left: -1.2em;
    color: #008060;
}

.action {text-align:center;margin-bottom:15px;}
.action a h3 {color:#222121;text-transform:uppercase;height:20px;    font-weight: bold;
    font-size: 14px;}
.action-link {font-size:15px;}
.action a img {width:125px;}
.panel {background:transparent;}
.panel-heading {
    padding: 8px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.main-login .panel-heading {border-bottom:1px solid #145839;}
.panel-title{font-size:15px;}
.panel-body, .panel-body.announcement{font-size:14px;}
.panel-body {padding:10px;color:#222121;background:#ffffff;}
.normal-block {color:#333!important;}

#ecard-form .error-block p {    color: #ce4844;
    background: #f7efd8;
    border: 1px solid #CC9C0A;
    padding: 2px 10px;
    text-align: center;
    margin-top: 5px;}
textarea { resize:vertical ; }
.card-box {background:#cfdde3;max-width:70%;  margin-top:0;} 
.card-box .card-content {font-size:14px; line-height:18px;  padding:20px 40px 20px 50px;padding:0px 40px 20px 50px;font-family:Frutiger,serif;}
.custom-width {width:70%;}

.lobster {font-family: 'Lobster', cursive; font-size:16px; line-height:22px;} 
.lobster2 {font-family: 'Lobster Two', cursive;font-size:17px; line-height:22px;}
.satisfy {font-family: 'FTSterling';font-size:22px; line-height:22px;}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 18px;
  color: #fff;
  line-height: 45px;
  text-align: center;
 font-weight:bold;
}
#ecardlist_wrapper {margin-top:25px;margin-bottom:25px;}
div.list {margin-top:20px; }
div.list p{ font-size:16px;}
div.list img{ border:1px solid #333333;}
.fieldset {margin-top:20px; font-size:15px;}
legend {font-size:16px; font-weight:bold; line-height:20px; margin-bottom:0;}

/* Navigation Menu */
.navbar-inverse .navbar-toggle {border-color:#ffffff;}
.navbar .navbar-toggle .icon-bar {background-color:#ffffff;}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
    background-color: #045d47;
}
/*
.card-content p{
 overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
 
  /* Instead use this non-standard one: 
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink)  
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
} */
@media (max-width: 768px) {
 
 
    .innerpagepad {
/*        padding: 10px 0px 10px;*/
        padding: 0px;
    }
	.main-login {margin-top:15%;    padding: 0 20px;}
 
	.login-box {  border:none;}
	.col-xs-12 .form-horizontal .control-label {
		text-align: Left;
	}
	.card-box {max-width:100%;} 
	.card-box .card-content {padding: 20px 40px 20px 50px;}
}

@media (max-width: 320px) { 
  
	.card-box .card-content {padding: 20px 30px 20px 30px;}
}

@media (min-width: 768px) {
	.innerpagepad {
      padding: 10px 0px 10px; 
    }
	.container {
		width: 750px;
	}
}
@media (max-width: 940px) {
	.maincontent {
      padding-right:0; 
    }
	.panel-body.announcement, .panel-body{
		padding: 8px 15px;
		font-size: 12px;
	} 
	.panel-heading, .panel-title {font-size:14px;}
	.navbar .navbar-nav li a {
	    font-size: 14px;
    height: 35px;
    line-height: 15px;}
	.panel-heading .glyphicon {font-size:16px;}
	.pr0 {padding-right:0;}
	.pl0 {padding-left:0;}
}
.media-date{margin-bottom:5px;}

 @media (min-width: 1200px){
.container {
    width: 1040px;
}
}
 @media (min-width: 1400px){
.container {
    width: 1175px;
}
}