@charset "UTF-8";

/* Global Styles */

body {
	color: #0E5144;
	line-height: 1.5em;
	font-family: Arial;
	font-size: 14px;
	background: #FFF;
	/* background: #515673 url(../images/background_gradient.jpg) repeat-x 0px 0px; */
}
.page {
	max-width: 980px;
	margin: 0px auto;
	position: relative; background-color: #fff;
}

h1 { color: #00362B; margin: 0em 0em .5em 0em; font-size: 2em; font-weight: normal; }
h2 { font-size: 1.7em; margin: 0em 0em 1em 0em; }
h3 { font-size: 1.5em; margin: 0em 0em 1em 0em; }

p { margin: 0px 0px .75em 0px; }
a { color: #44887B; }
a:hover { color: #FFE508; }
a.cta {
	text-transform: uppercase;
	font-size: .9em;
	font-weight: bold;
	text-decoration: none;
	margin: .5em 0 0 0;
	padding: 0px 12px 0px 0px;
	background: url(../images/cta_arrow.png) no-repeat right 0px;
}
a.cta:hover { background-position: right -50px; }
footer { font-size: .85em; color: #FFF; background-color: #0E5144; padding: 10px 10px 10px 10px; }

.promo h3 { font-size: 1.1em; margin: 0; }
.promo p { line-height: 1.2em; font-size: .9em; margin-bottom: .5em; }

.promo { background-repeat: no-repeat; background-size: 60px 60px; }

.promo.one { background-image: url(../images/promo_1.jpg); }
.promo.two { background-image: url(../images/promo_2.jpg); }
.promo.three { background-image: url(../images/promo_3.jpg); }

.news h2 { font-size: 1.1em; margin: 15px 0px 3px 0px; }

.futprj h2 { font-size: 1.1em; margin: 15px 0px 3px 0px; }

p { text-align: justify; }
.blog {font-size: 0.9em;}

.refer { font-size: 0.75em; color: #grey; }

/* special message */
.special {  border: 2px solid;
            border-spacing: 1px;
            border-radius: 25px; 
            background: #FFE508;
            border-color: #373523;
            text-align:center;
            padding: 15px;
            font-weight: bolder;
            font-size: 1.6em;
            box-shadow: 10px 10px 5px #888888;
   }
   
.special a:hover { color: #373523}
 
/* for personal page */
.perspage {font-size: 0.7em; }
  
/* for centering the picture on the image page */
.container {
    height: 100px;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.container:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

#element {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    font: 16px/1 Arial sans-serif;        /* <-- reset the font property */
}

/* for centering the picture on the australia page */
.container2 {
    height: 450px;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.container2:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

#element2 {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    font: 16px/1 Arial sans-serif;        /* <-- reset the font property */
}
/* navigation bar */
nav a {
	color: #FFF;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-block;
	font-weight: bold;
	font-size: .9em;
}
nav a:hover { color: #6DA398; }

.clear-fix { clear: both; line-height: 1px; }

/* progress bar on lifestyle */
#progress {
	width: 280px;
	border: 1px solid black;
	position: relative;
	padding: 3px;
}
#percent {
	position:absolute;
	left: 50%;
}
#bar {
	height: 20px;
	background-color: green;
	width: 6.8%
}
/* buttons for lifestyle */
.btn {
  background: #A3181C; 
  color: #FFF;
  display: inline-block;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  font-family: Arial, sans-serif;
  line-height: 2.0em;
  padding: 0 1em;
  text-decoration: none; 
}

.btnsmall {
  background: #00362B; 
  color: #FFF;
  display: inline-block;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  font-family: Arial, sans-serif;
  line-height: 1.5em;
  padding: 0 1em;
  text-decoration: none; 
}

@media
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (   min--moz-device-pixel-ratio: 2),
	only screen and (     -o-min-device-pixel-ratio: 2/1),
	only screen and (        min-device-pixel-ratio: 2),
	only screen and (                min-resolution: 192dpi),
	only screen and (                min-resolution: 2dppx)
{
	.promo.one { background-image: url(../images/promo_1_2x.jpg); }
	.promo.two { background-image: url(../images/promo_2_2x.jpg); }
	.promo.three { background-image: url(../images/promo_3_2x.jpg); }
}