/* ==========================================
   [Master Stylesheet]

   Project name:	Perducta Limited
   Last change:		--
   Assigned to:		--
   ========================================== */

/* ==========================================
   Import additional stylesheets
   ========================================== */

@import "non-standard.css";
@import "helpers.css";

/* ==========================================
   Set core layout
   ========================================== */

body {
	min-width: 960px;
	position: relative;
	text-align: center; /* As positioning */
}

#header, #intro, #article, #footer {
	clear: both;
	display: block;
	position: relative;
	width: 100%;
}

#slide-set, #bg {
	clear: both;
	display: block;
	position: relative;
	width: 100%;
}

.content {
	clear: both;
	display: block;
	margin: 0 auto;
	min-width: 940px;
	position: relative;
	text-align: left; /* As positioning */
	width: 960px;
	z-index: 10;
}

/* 24-COL GRID [http://960.gs/] === */

.col-wrap, .col, .cell {
	float: left;
	position: relative;
}

.col-wrap, .col {
	display: block;
}

.col {
	margin: 0 10px 0 10px;
}

.cell {
	display: inline;
	margin: 0 10px 0 10px;
}

#article .col {
	margin-bottom: 9px;
}

/* CELL MEASURES === */

.colspan_1 { width: 20px; }

.colspan_2 { width: 60px; }

.colspan_3 { width: 100px; }

.colspan_4 { width: 140px; }

.colspan_5 { width: 180px; }

.colspan_6 { width: 220px; }

.colspan_7 { width: 260px; }

.colspan_8 { width: 300px; }

.colspan_9 { width: 340px; }

.colspan_10 { width: 380px; }

.colspan_11 { width: 420px; }

.colspan_12 { width: 460px; }

.colspan_13 { width: 500px; }

.colspan_14 { width: 540px; }

.colspan_15 { width: 580px; }

.colspan_16 { width: 620px; }

.colspan_17 { width: 660px; }

.colspan_18 { width: 700px; }

.colspan_19 { width: 740px; }

.colspan_20 { width: 780px; }

.colspan_21 { width: 820px; }

.colspan_22 { width: 860px; }

.colspan_23 { width: 900px; }

.colspan_24 { width: 940px; }

/* FLOW CONTROLS (Alpha ~ First, Omega ~ Last) === */

.alpha {
	clear: left !important;
	/* margin-left: 0 !important; */
}

.omega {
	clear: right !important; 
	/* margin-right: 0 !important; */
}

/* ==========================================
   HEADER ELEMENTS
   ========================================== */

#header, #header .content {
	height: 71px;
	z-index: 50;
}

#header #logo, 
#header #main-menu, 
#header #social-options {
	display: block;
	position: absolute;
}

#header #logo {
	left: 10px;
	overflow: hidden;
	top: 12px;
}

#header #logo, 
#header #logo a {
	height: 50px;
	width: 200px;
}

#header #logo a {
	display: block;
	background: url('../img/logo-perducta-new.gif') no-repeat 0 0;
}

#header #main-menu {
	right: 10px;
	top: 30px;
}

#header #main-menu li {
	display: block;
	float: left;
	height: 36px;
	margin-left: 18px;
}

#header #main-menu li a {
	display: block;
	padding: 0 0 0 12px;
	position: relative;
}

#header #main-menu li a.home {
	margin-right: -5px;
	padding: 0;
}

#header #main-menu li a span {
	display: block;
	height: 16px;
	left: -2px;
	position: absolute;
	top: 1px;
	width: 9px;
		background: url('../img/arrow-sprite-small.gif') no-repeat -9px -96px;
}

#header #main-menu li a.home span {
	left: 0;
	position: relative;
	width: 16px;
		background: url('../img/home-sprite.gif') no-repeat 0 0;
}

#header #main-menu li a:hover span 			{ background-position: -9px 0px; }
#header #main-menu li.current a span 		{ background-position: -9px -64px; }
#header #main-menu li a.home:hover span 		{ background-position: 0 -16px; }

#header #social-options {
	bottom: -26px;
	right: 10px;
}

#header #social-options li {
	display: block;
	float: left;
	height: 25px;
	margin-left: 10px;
	width: 25px;
}

#header #social-options li a {
	display: block;
	height: 25px;
	overflow: hidden;
	width: 25px;
		background: url('../img/icon-sprite.gif') no-repeat 0 0;
}

#header #social-options li.ico-blogger a 			{ background-position: 0 0; }
#header #social-options li.ico-facebook a 			{ background-position: 0 -25px; }
#header #social-options li.ico-linkedin a 			{ background-position: 0 -50px; }
#header #social-options li.ico-twitter a 			{ background-position: 0 -75px; }

#header #social-options li.ico-blogger a:hover 	{ background-position: -25px 0; }
#header #social-options li.ico-facebook a:hover 	{ background-position: -25px -25px; }
#header #social-options li.ico-linkedin a:hover 	{ background-position: -25px -50px; }
#header #social-options li.ico-twitter a:hover 	{ background-position: -25px -75px; }

/* ==========================================
   INTRO ELEMENTS
   ========================================== */

#intro {
	height: 162px;
}

body.index #intro {
	height: auto;
	padding-bottom: 61px;
}

#intro p {
	margin: 0 0 18px 0;
}

body.index #intro p {
	margin-top: 36px;
}

#intro p a {
	display: block;
}

#intro #outcomes p {
	margin: 82px 0 18px 0;
}

#intro #outcomes p a {
	display: block;
	padding-left: 12px;
	position: relative;
}

#intro #outcomes p a span.arrow {
	display: block;
	height: 30px;
	left: -12px;
	position: absolute;
	top: 1px;
	width: 16px;
		background: url('../img/arrow-sprite-large.gif') no-repeat -16px -150px;
}

#intro #outcomes p a:hover span.arrow {
		background-position: -16px 0px;
}

#intro #side {
	margin-top: 36px;
}

#intro #side p {
	margin-bottom: 0;
}

#intro #side #study-nav {
	display: block;
	list-style: none;
}

#intro #side #study-nav li {
	margin: 0;
	padding: 0;
	position: relative;
}

#intro #side #study-nav li.current {
	display: none;
}

#intro #side #study-nav li a {
	display: block;
	padding-left: 10px;
	position: relative;
}

#intro #side #study-nav li a span.arrow {
	display: block;
	height: 12px;
	left: 0px;
	position: absolute;
	top: 2px;
	width: 6px;
		background: url('../img/arrow-sprite-tiny.gif') no-repeat -9px -60px;
}

#intro #side #study-nav li a:hover span.arrow {
		background-position: -9px 0px;
}

h1 {
	margin: 36px 0 9px 0;
}

/* ==========================================
   ARTICLE ELEMENTS
   ========================================== */

#article {
	padding: 36px 0 18px 0;
}

#article p, #article ul {
	margin: 0 0 9px 0;
	padding: 0;
}

#article ul li {
	margin-left: 14px;
	padding-left: 6px;
}

#article img.client-logo {
	display: block;
	height: 80px;
	margin: 0 0 18px -1px;
	width: 300px;
}

h2, h3, h4 {
	margin: 0 0 9px 0;
	padding: 0;
}

/* ==========================================
   SLIDING ELEMENTS (HOME PAGE)
   ========================================== */

#slide-set #viewport {
	height: 288px;
	margin: 0 0 0 -1px;
	overflow: hidden;
	position: relative;
	top: -48px;
	width: 100%;
	z-index: 10;
}

#slide-set ul {
	display: block;
	height: 288px;
	width: 1000px;
	z-index: 10;
}

#slide-set ul li {
	display: block;
	float: left;
	height: 286px;
	overflow: hidden;
	position: relative;
	width: 191px;
}

#slide-set ul li.compact {
	width: 142px;
}

#slide-set ul li.open {
	width: 387px;
}

#slide-set ul li a {
	display: block;
	height: 100%;
	position: relative;
	width: 100%;
}

#slide-set ul li a img, 
#slide-set ul li a div.slide-title, 
#slide-set ul li a div.slide-content, 
#slide-set ul li a span.arrow {
	position: absolute;
}

#slide-set ul li a img {
	height: 288px;
	max-width: 387px;
	width: 387px;
}

#slide-set ul li a div.slide-title {
	bottom: 0;
	height: 96px;
	width: 387px;
	z-index: 10;
}

#slide-set ul li a div.slide-title p {
	height: 64px;
	margin: 16px 0 0 24px;
	padding: 0 10px 0 10px;
	width: 99px;
}

#slide-set ul li a div.slide-content {
	bottom: 16px;
	display: none;
	height: 64px;
	left: 140px;
	overflow: hidden;
	padding-left: 10px;
	width: 220px;
	z-index: 20;
}

#slide-set ul li.open a div.slide-content {
	display: block;
}

#slide-set ul li a span.arrow {
	bottom: 49px;
	display: block;
	height: 30px;
	left: 10px;
	width: 16px;
	z-index: 30;
		background: url('../img/arrow-sprite-large.gif') no-repeat -16px -30px;
}

#slide-set ul li.open a span.arrow {
		background-position: -16px -30px;
}

#slide-set ul li a:hover span.arrow {
		background-position: -16px -240px;
}

/* ==========================================
   FOOTER ELEMENTS
   ========================================== */

#footer .content {
	padding: 32px 0 16px 0;
}

body.index #footer .content {
	padding-top: 0;
}

#footer ul {
	list-style: none;
}

#footer .vcard {
	display: block;
	margin-top: 16px;
	margin-bottom: 32px;
}

#footer .vcard .tel {
	display: block;
}

#footer #twine a {
	display: block;
	height: 50px;
	margin: 0 0 16px 0;
	width: 175px;
}

#footer #twine a {
		background: url('../img/logo-twine.gif') no-repeat 0 0;
}

#footer #twine a:hover {
		background-position: 0 -50px;
}



/* ==========================================
   FORM ELEMENTS
   ========================================== */

form {
	position: relative;
}

form .field-wrap {
	clear: both;
	display: block;
	margin: 0 0 10px 0;
	padding: 0;
	position: relative;
	width: 100%;
}

form .field-wrap.submit {
	left: 121px;
	width: 50%;
}

button, input, label, radio, select, textarea {
	display: block;
	position: relative;
	vertical-align: bottom;
}

label {
	float: left;
	padding: 5px 0 5px 0;
	width: 120px;
}

input, textarea {
	padding: 5px 10px 5px 10px;
	width: 350px;
}

input {
	height: 16px;
}

select {
	height: 19px;
	padding: 2px 1px 1px 2px;
}

label sup {
	position: relative;
	top: -6px;
}

button, input.button {
	height: 36px;
	padding: 0 10px 0 10px;
	vertical-align: middle;
	white-space: nowrap;
	width: 50%;
}
















/* ==========================================
   SET TYPE
   ========================================== */

body {   
	font-family: Helvetica, Arial, sans-serif;
	font-size: 62.5%; /* 10px */
	font-weight: normal;
	letter-spacing: 0;
	line-height: 1.80em; /* 18px */
	text-decoration: none;
}

#main-menu li, 
#intro p, #intro #outcomes p, 
#intro #side p, #intro #side li, 
#slide-set ul li a div.slide-title, 
h1, h2, h3, h4, 
button, input.button {
	font-family: 'Montserrat', Arial, sans-serif;
}

#main-menu li {
	font-size: 1.70em; /* 17px */
	line-height: 1.06em; /* 18px */
	text-transform: uppercase;
}

#intro p {
	font-size: 1.50em;  /* 15px */
	line-height: 1.20em;  /* 18px */
}

body.index #intro p {
	font-size: 2.00em;  /* 20px */
	line-height: 1.35em;  /* 27px */
}

#intro #outcomes p {
	font-size: 1.20em; /* 12px */
	line-height: 1.33em; /* 16px */
	text-transform: uppercase;
}

#intro #side p {
	font-size: 1.20em; /* 12px */
	line-height: 16px; /* 16px */
}

#intro #side #study-nav li {
	font-size: 1.00em; /* 10px */
	line-height: 1.60em; /* 16px */
	text-transform: uppercase;
}

#slide-set ul li a div.slide-title {
	font-size: 1.10em; /* 11px */
	line-height: 1.45em; /* 16px */
	text-transform: uppercase;
}

#slide-set ul li a div.slide-content p {
	font-size: 1.10em; /* 11px */
	line-height: 1.45em; /* 16px */
}

h1 {
	font-size: 2.60em; /* 26px */
	line-height: 1.38em; /* 36px */
}

h2 {
	font-size: 1.80em; /* 18px */
	line-height: 1.33em; /* 24px */
}

h3 {
	font-size: 1.60em; /* 16px */
	line-height: 1.12em; /* 18px */
}

h4 {
	font-size: 1.40em; /* 14px */
	line-height: 1.28em; /* 18px */
}

#article p, #article ul {
	font-size: 1.20em; /* 12px */
	line-height: 1.50em; /* 18px */
}

label, .button {
	font-weight: bold;
}

input, option, select, textarea {
	font-size: 0.92em; /* 12px > 11px */
	line-height: 1.64em; /* 18px */
}

button, input.button {
	font-size: 1.16em; /* 12px > 14px */
	font-weight: bold;
	line-height: 2.57em; /* 36px */
	text-align: left;
	text-transform: uppercase;
}

#footer {
	font-size: 1.10em; /* 11px */
	line-height: 1.45em; /* 16px */
}

/* ==========================================
   SET COLOURS
   
   REBRAND PALETTE:
   
   Reds:
   MAIN:	#D50F3B
   TINT:	#DD3F62 // 80%
   
   Greys:
   DARK:	#362E28
   TINT:	#5E5853 // 80%

   MID:		#B3AFB0
   TINT:	#D1CFD0 // 60%
   TINT:	#E1DFDF // 40%
   TINT:	#F0EFEF // 20%
   
   REVISED PALETTE:
   
   Oranges:
   FOCOLTONE 3507:		#F58220
   FOCOLTONE 1161:		#F7931E
   FOCOLTONE 1155:		#FAA61A
   FOCOLTONE 3389:		#FBB040

   Greys:
   FOCOLTONE 4064:		#D1D3D4
   FOCOLTONE 4063:		#DCDDDE
   FOCOLTONE 4062:		#E6E7E8
   FOCOLTONE 4061:		#F1F1F2

   Plums:
   FOCOLTONE 2216:		#524354
   ^ 75%:				#7D727F

   FOCOLTONE 2202:		#5F4A68
   FOCOLTONE 2217:		#756177
   ========================================== */


/* REDS ======= */

#slide-set ul, 
#slide-set ul li a div.slide-title, 
input.button {
	background-color: #D50F3B;
}

#slide-set ul li a:hover div.slide-title, 
input.button:hover {
	background-color: #DD3F62;
}

a			{ color: #DD3F62; }
a:hover		{ color: #D50F3B; }

p.alert {
	color: #D50F3B !important;
}


/* GREYS ======= */

#intro {
	background-color: #E1DFDF;
}

#article {
	background-color: #F0EFEF;
}

#article img.client-logo, 
input, textarea {
	border: 1px solid #D1CFD0;
}

#slide-set ul li a div.slide-content {
	border-left: 1px dotted #D1CFD0;
}

#slide-set ul li a:hover div.slide-content {
	border-left: 1px dotted #E1DFDF;
}

#intro, 
h1, h2, h3, h4, 
#article p, #article ul {
	color: #362E28;
}

#footer, 
#header #main-menu li.current a, 
#side p {
	color: #5E5853;
}


/* WHITES ======= */

body, 
#header {
	background-color: #FFF;
}

#article img.client-logo {
	background-color: #FFF;
}

#intro {
	border-top: 1px #FFF solid;
}

#slide-set #viewport {
	border-right: 1px #FFF solid;
}

#slide-set ul li {
	border-top: 1px #FFF solid;
	border-bottom: 1px #FFF solid;
	border-left: 1px #FFF solid;
}

#slide-set ul li a div.slide-title, 
#slide-set ul li a div.slide-content, 
.white, input.button {
	color: #FFF;
}

#slide-set ul li.open a div.slide-title	{ color: #FFF; }


/* Border cancellation */

.no-border {
	border: 0;
}