/* Imports */

@import url("css/reset.css");
@import url("css/elements.less");


/* Variables */

@font-list: 'Droid Sans', Myriad, Tahoma, 'Trebuchet MS', Trebuchet, 'Lucida Grande', 'Lucida Sans', sans-serif;
@font-list-serif: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
@font-size0: 0.75em;
@font-size1: 0.8125em;
@font-size2: 0.875em;
@font-size3: 1em;
@font-size4: 1.25em;
@font-size5: 1.375em;
@font-size6: 1.5em;
@heading-color: #3170b6;
@text-color: #1c3654;
@link-color: #187cb6;
@hover-color: #0a476a;
@page-width: 960px;

/* HTML5 tags */

header, section, footer, aside, nav, article, figure {
	display: block;
}


/* Body */

body {
	background: #fff;
	color: @text-color;
	font-family: @font-list;
	font-size: 100%;
	line-height: 1.375;
	margin: 0;
	padding: 0;
	text-align: left;
}


/***** General Layout *****/

.body {clear: both; margin: 0 auto; width: @page-width;}
img.right, figure.right {float: right; margin: 0 0 2em 2em;}
img.left, figure.left {float: right; margin: 0 0 2em 2em;}
.hide {	visibility: hidden; }
.bold { font-weight: bold; }
.clear { clear: both; }
.columnbreak { column-break-before: always; }
.note { font-style: italic;}
article.person { margin-bottom: 15px; }
abbr { border-bottom: 1px dotted #93b9ca; }
hr { border: 0;	border-bottom: 1px solid #b9cbd5; margin: 25px 0 20px 0; }
.homelink {
	display: block;
	width: @page-width;
	height: 89px;
	position: absolute;
	top: 0px;
}


/***** Header *****/

header#mainheader {
	height: 134px;
	background: url('images/header-bg.png') repeat-x top center;

	section#logo {
		height: 89px;
		background: url('images/logo-pipe.svg') no-repeat top center;
	}

	a h1 {
		.hide;
	}
	
	nav {
		height: 45px;
	}
}


/***** Images *****/

img.person {
	float: left;
	border: 1px solid black;
	margin-right: 15px;
	margin-bottom: 10px;
}
	
img.diagram {
	margin: 25px auto 0px;
	display: block;
}
	
img.buttonlinks {
	margin: 0px 8px 0;
}
	
img.companylogos {
	border: 1px solid #DDDDDD;
}


/***** Banners *****/

aside.banner {
	width: auto;
	height: 258px;

	h2 {
		visibility: hidden;
	}
}

aside#indexbanner {			background: url('images/banner-home-bg.jpg') no-repeat top center;}
aside#pipefibrebanner {		background: url('images/banner-pipefibre-bg.jpg') no-repeat top center;}
aside#pipeethernetbanner {	background: url('images/banner-pipeethernet-bg.jpg') no-repeat top center;}
aside#pipeixbanner {		background: url('images/banner-pipeix-bg.jpg') no-repeat top center;}
aside#pipeipbanner {		background: url('images/banner-pipeip-bg.jpg') no-repeat top center;}
aside#piperackbanner {		background: url('images/banner-piperack-bg.jpg') no-repeat top center;}
aside#pipeipbanner {		background: url('images/banner-pipeip-bg.jpg') no-repeat top center;}
aside#disasterbanner {		background: url('images/banner-disaster-bg.jpg') no-repeat top center;}
aside#cloudbanner {			background: url('images/banner-cloud-bg.jpg') no-repeat top center;}
aside#officemetrobanner {	background: url('images/banner-office-metro-bg.jpg') no-repeat top center;}
aside#officeintercapbanner {background: url('images/banner-office-intercap-bg.jpg') no-repeat top center;}
aside#officeinternatbanner {background: url('images/banner-office-internat-bg.jpg') no-repeat top center;}
aside#virtualisationbanner {background: url('images/banner-virtualisation-bg.jpg') no-repeat top center;}
aside#ppc1banner {			background: url('images/banner-pipeppc1-bg.jpg') no-repeat top center;}


/***** Content *****/

div#contentcontainer {
	background: url('images/content-outside-bg.png') repeat-y top center;
	border-bottom: 1px solid #c6d5e4;
	border-top: 1px solid #c6d5e4;
}

section#content {
	padding: 30px 20px;
	position: relative;
	
	aside.idealproducts {
		background: #dc6009;
		border-top: 0px;
		padding: 0px 5px 2px 0px;
		float: right;
		.drop-shadow(0, 3px, 10px, 0.5);

		img { margin: 10px 5px 0px; }

		img:last-child { margin: 5px 5px 0px; }
		
		h4 {
			background: #dc6009;
			text-transform: capitalize;
			line-height: 2.25;
			text-align: center;
			color: #fff;
			padding-top: 2px;
			margin: 0;
			background-image: -moz-linear-gradient(100% 100% 90deg, #db5d08, #e88a1c);
			background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e88a1c), to(#db5d08));
		}

		a img {
			border: 3px solid white;
		}
	}

	.columns3 {
		.columns(auto, 3, 1.5em, #fff, solid, 0px);

		h1, h2, h3, h4, h5 {
			.columnbreak(auto,avoid,avoid);
		}
		
		ul {

			li {
				list-style: circle;
				.columnbreak(auto,avoid,avoid);								
				
				h4 {
					font-size: @font-size4;
					margin-bottom: 5px;
					margin-top: @font-size4;
					line-height: 1.25;
				}
			}
		}
	}

	.columns2 {
		.columns(auto, 2, 1.5em, #fff, solid, 0px);
		width: 620px;
		float: left;
	}

	.fakecolumns {
		width: 290px;
		float: left;
		margin-right: 1.5em;
	}

	.hint {
		color: @link-color;
	}

	aside {
		float: left;
		width: 300px;
		margin-right: 1.5em;
	}
	
	blockquote {
		font-size: @font-size1;	
		font-style: italic;
		line-height: 1.5;
		background: #d0e5ef;
		padding: .6875em;
		margin-bottom: 1.375em;
	}

	h3 {
		font-size: @font-size5;
		color: @heading-color;
		font-weight: 300;
		line-height: 2.75;
	}

	h4 {
		font-size: @font-size3;
		font-weight: 600;
		color: @heading-color;
		margin-bottom: @font-size4;
		line-height: 1.25;
	}

	h5 {
		font-size: @font-size2;
		font-weight: 600;
		margin-bottom: 0em;
		line-height: 1.5;
	}	
	
	h5.spacefix {
		margin-bottom: @font-size3;
	}

	h6 {
		font-size: @font-size1;
		font-weight: 600;
		margin-bottom: @font-size4;
		line-height: 1;
	}

	p {
		font-size: @font-size1;	
		line-height: 1.5;
		margin-bottom: @font-size6;

		&:last-child {
			margin-bottom: 0;
		}

		a {
			text-decoration: none;
			color: @link-color;

			&:hover {
				text-decoration: underline;
				color: @hover-color;
			}
		}
	}

	li {
		font-size: @font-size1;	
		line-height: 1.5;
		list-style-type: square;

		p {
			font-size: @font-size3;	
		}

		a {
			text-decoration: none;
			color: @link-color;

			&:hover {
				text-decoration: underline;
				color: @hover-color;
			}
		}
		
		h5 {
			font-size: @font-size3;
			font-weight: 600;
			margin-bottom: 0em;
			line-height: 1.5;
		}
	}

	li.pdf {
		background: url('./images/pdf.png') no-repeat top left;
		padding-left: 25px;
	}

	ul {
		line-height: 1.375;
		padding-left: 13px;
		margin-bottom: 1.375em;
		margin-top: -1em;
	}

	ol {
		line-height: 1.375;
		padding-left: 25px;
		margin-bottom: 1.375em;
		margin-top: -1em;

		li {
			list-style-type: decimal;

			h4 {
				margin-top: 1.375em;
			}

			ul li {
				font-size: @font-size3;
				list-style-type: square;
			}
		}
	}
	
	
	.accordion {
	
		section ul {
		margin: 0 0 5px 0;
		}

		section ul li {
			float: left;
			list-style-type: none;
			width: 210px;
			border: 1px solid #8aaab9;
			margin-right: 15px;
			margin-top: 10px;
			.rounded(5px);
			.gradient(#e1eff6, #e1eff6, #cee2eb);
		}
	
		h4 {
			margin: 0;
	
			a {
				display: block;
				position: relative;
				padding: 10px;
				text-decoration: none;
				.rounded(5px);
				background-color: #569ebe;
				color: white;
				font-weight: bold;
	
				&:hover {
					background: #3d76a2;
				}
			}
		}
	
		p {
			margin: 0;
			padding: 10px;
		}
	}	
	
	.accordion h4 + ul {
		height: 0;
		overflow: hidden;
		-moz-transition: height 0.3s ease-in-out;
		-webkit-transition: height 0.3s ease-in-out;
		-o-transition: height 0.3s ease-in-out;
		transition: height 0.3s ease-in-out;
	}
	
	.accordion :target h4 a:after {
		content: '';
		position: absolute;
		right: 10px;
		top: 50%;
		margin-top: -3px;
		border-top: 5px solid #333;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
	}
	
	.accordion :target h4 + ul {
		height: auto;
	}
	
	.accordion h4 {
		cursor: pointer;
	}
	
}


/***** Featured Links *****/

section#featuredlinks {
	background: #005a89 url('images/featuredlinks-bg.png') no-repeat;
	width: @page-width;
	height: 106px;
	margin-top: 25px;
	margin-bottom: 30px;
	.rounded(5px);
	
	img {
		display: none;
	}

	a {
		width: 318px;
		height: 105px;
		display: block;
		float: left;
		background-position: center center;
		background-repeat: no-repeat;
	}
	
	a#button-ethernet {	background-image: url("images/button-pipeethernet.svg"); }
	
	a#button-profile {	background-image: url("images/button-corporateprofile.svg"); }
	
	a#button-ppc1 {		background-image: url("images/button-ppc1.svg"); }
}

section#featuredlinks {
	background: #005a89 url('images/featuredlinks-bg.png') no-repeat;
	width: @page-width;
	height: 106px;
	margin-top: 25px;
	margin-bottom: 30px;
	.rounded(5px);
}
section#featuredlinks img {
	display: none;
}
section#featuredlinks a {
	width: 318px;
	height: 105px;
	display: block;
	float: left;
	background-position: center center;
	background-repeat: no-repeat;
}
section#featuredlinks a#button-ethernet {
	background-image: url("images/button-pipeethernet.svg");
}
section#featuredlinks a#button-profile {
	background-image: url("images/button-corporateprofile.svg");
}
section#featuredlinks a#button-ppc1 {
	background-image: url("images/button-ppc1.svg");
}



/***** Menu Navigation *****/

ul#topnav {
	padding: 0;
	margin: 0 auto;
	list-style: none;
	z-index: 100;
	width: 32em;
	
	ul {
		padding: 0;
		margin: 0;
		list-style: none;
		z-index: 100;
	}

	a {
		font-family: @font-list;
		display: block;
		width: 8em;
		font-size: @font-size2;
		font-weight: normal;
		letter-spacing: .5px;
		text-align: center;
		color: #e7f5ff;
		text-decoration: none;
		line-height: 3.25;
	}

	li {
		float: left;
		width: 8em;

		ul {
			position: absolute;
			width: 15em;
			left: -999em;
			box-shadow: 0px 7px 10px rgba(0,0,0,.5);

			li a {
				text-align: left;
				background: #04709c;
				background-color: rgba(4,112,156,.9);
				line-height: 2.5;
				border-bottom: 1px solid #3994b9;

				span {
					padding-left: 8px;
				}

				&:hover {
					background-color: #064a70;
					background-color: rgba(6,74,112,.95);
				}
			}
		}

		ul#topnavproducts, ul#topnavproducts li a { width: 115px; }
		
		ul#topnavscenarios, ul#topnavscenarios li a { width: 220px; }
		
		ul#topnavtools, ul#topnavtools li a { width: 155px; }

		ul#topnavaboutus, ul#topnavaboutus li a { width: 205px; }
		
		&:hover ul { left: auto; }
		
	}
}


/***** Tabs Navigation *****/

ul#subnav {
	padding: 0;
	margin: 0;
	list-style: none;
	position: absolute;
	top: 363px;

	ul {
		padding: 0;
		margin: 0;
		list-style: none;
	}

	a {
		display: block;
		width: 185px;
		height: 30px;
		background: #c4d7e3;
		text-align: center;
		color: #3c6b89;
		font-size: @font-size1;	
		font-weight: 300;
		text-decoration: none;
		line-height: 2.5;
		.border-radius(5px, 0, 0, 5px);
	}

	li {
		float: left;
		width: 185px;
		margin-right: 5px;

		&.active a {
			background: #ebf8fe;
		}
	}
}




/***** Tables *****/

table {
	
	td {
		font-size: @font-size1;	

		a {
			text-decoration: none;
			color: @link-color;

			&:hover {
				text-decoration: underline;
				color: @hover-color;
			}
		}
	}
}

table.DataTable {
	.drop-shadow(0, 3px, 6px, 0.5);
	margin-bottom: 10px;

	tr {

		td {
			padding: 5px;
			font-size: @font-size0;	
			border-bottom: 1px solid #8aaab9;

			table.DataTableSub {
				width: 100%;
		
				tr {
					font-size: @font-size4;

					th {
						color: white;
					}

					&:nth-child(even) {
						background-color: #b6d2de;
					}
				}
			}
		}

		th {
			background-color: #569ebe;
			color: white;
			font-weight: bold;
			padding: 5px;
			margin: 0;
			font-size: @font-size1;
		}

		&:first-child {
			border-top: 1px solid #8aaab9;
		}

		&:nth-child(even) {
			background-color: #cee2eb;
		}

	}


}


/***** Form *****/

form#enquiryform {
	background: #dceef7;
	.rounded(5px);
	padding: 20px;
	width: 500px;

	fieldset {
		border: none;
		margin-bottom: 10px;

		&:last-of-type {
			margin-bottom: 0;
		}
	}

	legend {
		color: @link-color;
		font-size: @font-size0;
		padding-bottom: 15px;
		text-shadow: 0 1px 1px #fff;
	}

	ol {
		margin: 0;
		padding: 0;

		li {
			background: #e6f3f9;
			background: rgba(255,255,255,.3);
			border-color: #f5fafc;
			border-color: rgba(255,255,255,.6);
			border-style: solid;
			border-width: 2px;
			.rounded(5px);
			line-height: 2.25;
			list-style: none;
			padding: 5px 10px;
			margin-bottom: 5px;
		}
	}

	label {
		float: left;
		font-size: @font-size3;
		width: 110px;
	}

	:-moz-placeholder {
		font-family: @font-list-serif;
		font-size: @font-size3;
		font-style: italic;
		color: #999;
	}

	::-webkit-input-placeholder {
		font-family: @font-list-serif;
		font-size: @font-size3;
		font-style: italic;
		color: #999;
	}

	textarea, input:not([type=radio]) {
		background: #ffffff;
		border: none;
		.rounded(3px);
		outline: none;
		padding: 5px;
		width: 350px;
	}

	textarea:focus, input:not([type=submit]):focus {
		background: #fff;
		border: 1px solid #bed9e6;
	}

	input[type=radio] {
		float: left;
		margin-right: 5px;
	}

	button {
		.gradient(#1a4f69, #1a4f69, #316d8b);
		.rounded(10px);
		.drop-shadow(0, 1px, 3px, 0.2);
		border: none;
		color: #ffffff;
		display: block;
		font-size: @font-size3;
		font-family: @font-list;
		letter-spacing: 1px;
		margin: 0px auto;
		padding: 7px 25px;
		text-shadow: 0 1px 1px #000000;

		&:hover {
			.gradient(#316d8b, #316d8b, #1a4f69);
			.drop-shadow(0,0,0,0);
			.inner-shadow(0, 1px, 3px, 0.5);
			cursor: pointer;
		}
	}
}

.columnLeft {
	float: left;
	font-weight: bold;
	width: 95px;
	padding: 5px 0 5px 5px;
	background: #e6f3f9;
	background: rgba(255,255,255,.3);
}

.columnRight {
	float: left;
	padding: 5px 10px;
	margin-left: 15px;
	width: 350px;
	background: #e6f3f9;
	background: rgba(255,255,255,.3);
}

.positive {
	color: black;
	font-weight: bold;
}

.negative {
	color: red;
	font-weight: normal;
}

.results {
	margin-bottom: 20px;
	background: #dceef7;
	.rounded(5px);
	width: 500px;
	padding: 15px 20px;
}

  


/***** Footer *****/

footer#contentinfo {
		
	ul {
		background: #fff;
		text-align: center;

		li {
			display: inline;
			font-size: @font-size1;	
			list-style-type:none; 
			padding-left:1em; 
			margin-left:1em; 
			border-left:1px solid #ccc;
			text-align: center;

			&:first-child {
				border-left:none
			}

			a {
				color: #8a98a7;
				text-decoration: none;

				&:hover {
					text-decoration: underline;
					color: #0096d6;
				}
			}
		}
	}
}


/***** Accordion Menus *****/

.accordion {

	section ul li {
		float: left;
		list-style-type: none;
		width: 210px;
		border: 1px solid #8aaab9;
		margin-right: 15px;
		margin-top: 10px;
		.rounded(5px);
		.gradient(#e1eff6, #e1eff6, #cee2eb);
	}

	h4 {
		margin: 0;

		a {
			display: block;
			position: relative;
			padding: 10px;
			text-decoration: none;
			.rounded(5px);
			background-color: #569ebe;
			color: white;
			font-weight: bold;

			&:hover {
				background: #3d76a2;
			}
		}
	}

	p {
		margin: 0;
		padding: 10px;
	}
}	

.accordion h4 + ul {
	height: 0;
	overflow: hidden;
	-moz-transition: height 0.3s ease-in-out;
	-webkit-transition: height 0.3s ease-in-out;
	-o-transition: height 0.3s ease-in-out;
	transition: height 0.3s ease-in-out;
}

.accordion :target h4 a:after {
	content: '';
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -3px;
	border-top: 5px solid #333;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
}

.accordion :target h4 + ul {
	height: auto;
}


/***** Page-Specific *****/

#sitemap #content {

	ul {
		margin-bottom: 0; 
		padding-bottom: 0; 
		position: relative;
		font-size: 11pt;
		margin: 0;
		padding: 0;
	
		li {
			text-align: left;
			margin: 7px 0 0 40px;
			padding: 0px;
			list-style-type: none;
		
			&:after {
				content: '';
				position: absolute;
				top: 0px;
				left: 30px;
				border-left: 1px solid #ccc;
				height: 100%;
				z-index: 1;
			}
		
			a {
				border: 1px solid #ccc;
				padding: 3px 10px;
				z-index: 999;
				display: inline-block;
				background: white;
		
				&:hover, &:hover+ul li a {
					background: #c8e4f8;
					color: #000; 
					border: 1px solid #94a0b4; 
				}
			}
		}
	}
}


body#pipeix-rules section#content p,
body#pipeix-terms section#content p { font-family: monospace; }

body#index section#content .columns3 {
	.columns(auto, 2, 1.5em, #fff, solid, 0px);
}
body#mediareleases #content table td {
	padding: 3px;
}
body#pipeix-who #content table td p {
	margin: 0 0 20px 0;
}
div#transparentlogo {
	background: url('images/logo-trans-pipe.png') no-repeat;
	width: 279px;
	height: 199px;
	display: block;
	float: left;
	margin-top: -30px;
	margin-right: 50px;
}
body#am-i-connected #content.body .results .columnLeft {
	width: 60px;
	margin: 5px;
	display: inline-block;
}
body#am-i-connected #content.body .results .columnRight {
	width: 150px;
	margin: 5px;
	display: inline-block;
}
body#am-i-connected .columnRight .negative {
	background: #ffc8c8;
	color: #8a0000;
	padding: 4px;
}
body#am-i-connected .columnRight .positive {
	background: #d8ffc8;
	color: #1f6a00;
	padding: 4px;
}
body#pipeix-who #content table {
	background: #fff;
}
body#pipeix-who #content table img {
	margin: 0px 40px;
}
body#pipeix-who #content table tr p {
	margin: 0px 40px 40px 40px;
}
body#pipeix-who #content table h2 {
	margin: 10px 40px;
	font-size: @font-size4;
	padding: 10px;
	/* Safari 4-5, Chrome 1-9 */
	background: -webkit-gradient(linear, left top, right top, from(#dbe6eb), to(#fff));
	/* Safari 5.1, Chrome 10+ */
	background: -webkit-linear-gradient(left, #dbe6eb, #fff);
	/* Firefox 3.6+ */
	background: -moz-linear-gradient(left, #dbe6eb, #fff);
	/* IE 10 */
	background: -ms-linear-gradient(left, #dbe6eb, #fff);
	/* Opera 11.10+ */
	background: -o-linear-gradient(left, #dbe6eb, #fff);
}