/***********************************************************************
 * layout.css
 * Project: Waikato Cabling and Communications Ltd
 * Version: 1.0
 * Validation: W3C CSS Validation (CSS Level 3)
 * 
 * This CSS file is structured based on the SMACSS style guide. More
 * information can be found at: http://smacss.com
 * 
 * ----------------------------- History -------------------------------
 * Vers:		By		Date		Description
 * 1.0			IJF		05/2012		Initial version
 ***********************************************************************/ 

/* Base CSS (see SMACSS)
 * Version: 1.0
 * 
 * These definitions form the base of all layout and styling across 
 * the entire website and it includes standard QD styling resets (based 
 * on YUI).
 * ----------------------------- History -------------------------------
 * Vers:		By		Date		Description
 * 1.0			IJF		05/2012		Initial version
 */

/* ---------------------------- Base Resets ------------------------- */
body,div,pre,
h1,h2,h3,h4,h5,h6,
ul,ol,li,
form,fieldset,input,textarea,
p,blockquote,
dl,dt,dd { 
	margin: 0;
	padding: 0;
	}

h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: normal;
	}

ol,ul {
	list-style-type: none;
	}
	
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
	
fieldset, img, abbr,acronym {
	border: 0;
	}

address, caption, cite, code, dfn, strong, th, var {
	font-style: normal;
	font-weight: normal;
	}

caption,th {
	text-align: left;
	}
	
q:before,q:after {
	content: '';
	}

/* ------------------------ Include HTML5 Tags ---------------------- */

article, aside, canvas, details,figcaption, figure, footer, header,
hgroup, nav, section, summary, video {
	margin: 0;
	padding: 0;
	display: block; /* Required for FF 3.6 block formatting */
	} 

/* ------------------------ Standard Styling ------------------------ */

  body {
	background: #FDFDFD;
 	}

  a {
	color: #e79e00;
	text-decoration: none;
	}

  a:hover {
	color: #f3b93d;
	}

  p {
	font-size: 0.875em; /* 14/16px */	
 	}

  h1 {
	line-height: 150%;  /*36px;*/
  	font-size: 1.125em; /* 18/16px */
  	color: #031B65;
  	}	

	.l-baseFont {
  	font-size: 16px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #666; 
  	}

  .bold {
	font-weight: 700;
	}

  .underline {
	text-decoration: underline;
	}

  .leftAlignTxt {
  	text-align: left;
  	}
  
  .centerAlignTxt {
  	text-align: center;
  	}

  #Form_Form input.action[value="Send"] {
	height: 26px;
	width: 100px;
	margin: 8px 0; 
	font-size: 0.875em;
	font-weight: 700;
	background: url(../images/wccl/send_button.png) no-repeat top center transparent;
	border: none;
	}

	#Form_Form input.action[value="Send"]:hover {
	background: url(../images/wccl/send_button.png) no-repeat bottom center transparent;
	}

	#Form_Form label {
	font-size: 0.625em;	
	margin-left: 5px;
	color: #031C65;
	}

	#Form_Form div.field {
		margin-bottom: 8px;
	}

	#Form_Form .middleColumn {
	width: 100%;
	padding: 2px;
	background-color: #DCE1E7;
	border: solid 1px #031C65;
	border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	}
	
	#Form_Form input, #Form_Form textarea {
		width: 100%;
		border: none;
		background-color: #DCE1E7;
	}

	#Form_Form .requiredIndicator {
	margin: 0 0 0 3px; 
	color: red;
	display: inline;
	}	 
	
	#Form_Form div.validationError span {
		color: #FF0000;
		font-size: 0.625em;
	}
/*********************** End of Base Definitions **********************/

/* Layout CSS (See SMACSS)
 * Version 1.0
 * 
 * These definitions define the layout of components on the web page
 * ----------------------------- History -------------------------------
 * Vers:		By		Date		Description
 * 1.0			IJF		05/2012		Initial version
 */
 
  #banner {
 	height: 199px;
 	background: url(../images/wccl/banner_bkgd.jpg) repeat-x transparent;
  	}
 
  #navigationBar {
 	height: 36px;
 	background: url(../images/wccl/navbar_bkgd.png) repeat-x transparent;
  	}
 
  #contentBody {
 	background: #FFF;
  	}
 
  #footer {
 	height: 36px;
 	background: #031C65;
  	}
 
 .l-contentStripe {
 	width: 100%;
  	}
  
 .l-contentStripe > .l-contentContainer {
  	width: 700px;
  	margin: 0 auto;
  	overflow: hidden;
  	}
  
  #contentBody .l-contentContainer {
  	margin-top: 16px;
  }
  
  .l-grid {
  	margin: 0;
  	padding: 0;
  	list-style-type: none;
  	}
  	
  .l-grid > li {
  	display: inline-block;
  	}	  
  
  .l-grid-floated {
  	overflow: hidden;
  	}
  
  .l-grid-floated > li {
  	float: left;
  	}
  
  .l-boxedContainer {
  	width: 100%;
  	margin: 0 0 16px 0;
  	}
  
  .l-column {
  	margin-right: 20px;
  	}
  	
  .l-boxedContainer .l-column:last-child {
  	margin-right: 0;
  	}	
  
  .l-baseWidth .l-column {
  	width: 220px;
  	}
  
  .l-doubleWidth.l-column {
  	width: 460px;
  	}
  
  .l-fullWidth.l-column {
  	width: 100%;
  	}
  	
  	
  .l-halfWidth.l-column {
  	width: 330px;
  	margin-right: 20px;
  }	
  	
  .l-goldenR > li, .l-goldenR > div {
  	height: 148px;
  	}	
	
  .l-goldenR-shadowed > .boxedContainer {
  	height: 155px;
  	}

  /* Special class used to break phone and email link style
   * auto-formatting in Opera Mobile and iPad/iPhone Safari
   * when the meta-tag option doesn't work: 
   * <meta name="format-detection" content="telephone=no" >
   * Refer function autoLinkStyleBuster() for usage
   */	
  .l-bustLinkStyle {
  	display: inline;
  }
	
/*********************** End of Layout Definitions ********************/

/* Modules CSS (See SMACSS)
 * Version 1.0
 * 
 * These definitions define the modular components on the web page
 * ----------------------------- History -------------------------------
 * Vers:		By		Date		Description
 * 1.0			IJF		05/2012		Initial version
 */

	/* allows semitransparent black background - thks to Robert Nyman for
	 * the hack:
	 * http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/
	 */
 .alpha60 {
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(0, 0, 0);
	/* RGBa with 0.6 opacity */
	background: rgba(0, 0, 0, 0.6);
	/* TODO - move this to alternative CSS file */
	/* For IE 5.5 - 7
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
	}

 .moreLink {
 	color: #990000;
 	font-size: 0.75em;
 	} 

 .mastHead > img {
 	margin: 10px 0 0 0;
 	}
 
 .navMenu {
 	font-size: 1em; 	
 	}
 	
 .navMenu > li {
 	margin-top: 4px;
 	line-height: 28px;
 	border-left: solid 1px #637ECE;
  	}
  	
  .navMenu a {
  	margin: 0 0 0 6px;
  	min-width: 100px;
  	display: inline-block;
  	color: #FFF;
  	text-align: center;
  	}
  
  .navMenu a.is-navMenu-current {
  	color: #E79E00;
  	}
  
  .navMenu a:hover {
  	color: #637ECE;
  	}
    
  .copyright, .byBQD {
  	width: 50%;
  	line-height: 27px;
  	margin: 4px 0 0 0;
  	float: left;
  	font-size: 0.625em;
  	color: #999;
  	}
  
  .byBQD {
  	text-align: right;
  	}
  
  .byBQD a {
  	color: #999;
  	text-decoration: underline;
  	}
  
  .siteIntro p {
  	color: #666;
  	line-height: 133%;
  	margin-bottom: 8px;
  }
  
  .cta {
  	width: 218px;
  	color: #031C65; 
  	background-color: #E79E00;
  	border: solid 1px #967700;
  	border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
  	}
  	
  .cta-action {
  	line-height: 150%;
  	margin: 10px 0 10px 0;
  	font-size: 2em;
  	text-align: center;
  	}
  
   .cta > p {
   	margin: 0 10px 10px 22px;
   	}
  
   p.cta-phone {
  	line-height: 125%;
  	margin-bottom: 2px;
  	letter-spacing: 5px;	
  	}
  	
   p.cta-phone-numeric {
  	margin-left:91px;
  	font-size: 0.625em;
  	letter-spacing: 9px;
  	}	
  
  	p.cta-phone-numeric span {
  	margin-left:8px;
  	letter-spacing: 6px;	
  	}
  
  	.cta-supplemental-text {
  	font-size: 0.75em;
  	margin-left: 23px;
  	}
  
  	.cta-supplemental-text p {
  	margin-bottom: 8px;	
  	}
  	
   .corneredImg {
   	margin-bottom: 16px;
   	border-radius: 13px 0 13px 0; 
	-moz-border-radius: 13px 0 13px 0; 
	-webkit-border-radius: 13px 0 13px 0;
   }
  
   .dropShadow {
  	-webkit-box-shadow: 0 5px 5px 0 #999;
  	-moz-box-shadow: 0 5px 5px 0 #999;
  	box-shadow: 0 5px 5px 0 #999;	
  	}  
  
  .servicesList h1 {
  	line-height: 2.25em;
  	margin-bottom: 8px;
  	border-top: 1px solid #031C65;
  	border-bottom: 1px solid #031C65;
  	color: #FEFEFE;
  	text-align: center;
  	}
  
  .servicesList {
  	overflow: hidden;
  }
 
  .servicesList p {
  	font-size: 0.75em;
  	line-height: 150%;
  	}
  
  .servicesList .network h1 {
  	background-color: #750026;
  	}
  
  .servicesList .voice h1 {
  	background-color: #006600;
  	}
  
  .servicesList .security h1 {
  	background-color: #016582;
  	}
  
  .certifiedFor, .samsungProducts {
  	height: 148px;
  	}
 
  .certifiedFor {
  	color: #FFF;
	background-color: #0165B2;
	border: solid 1px #0165B2;
	font-size: 0.875em; /* 14/16px */
  }
  
  .certifiedFor li {
  	margin: 8px 0;
  	}
  
  	.samsungProducts {
  		border: solid 1px #333;
  	}
  	
  	.samsungProducts > li {
  		height: 148px;
		width: 220px;
		display: block;
  		float: left;
  	}
  	
	.samsungProducts .logo {	
  	background: url(../images/wccl/samsung_enterprise_ip_logo.jpg) no-repeat #000;
  	}
  	
  	.samsungProducts #slideshow ul {
  		height: 124px
  	}
  	
  	.clientsList p, .suppliers p {
  		font-size: 0.75em;
  		margin-bottom: 4px;
  		color: #999;
  	}
  	
  	.svc > h1, .contactUs > h1, .inTouch > h1 {
  		line-height: 150%;
  		margin: 0 0 8px 0;
  		color: #021B65;
  		border-bottom: solid 1px #3C61CE;	
  	}
  	
  	.svc-detail {
  		height: 293px;
  		margin-bottom: 16px;
  		border-bottom: solid 1px #3C61CE;
  		color: #666;
  		overflow: hidden;
  		text-overflow: clip;
  	}
  	  	
  	.svc-detail p {
  		margin-top: 6px;
  		letter-spacing: 0.075em;
  		line-height: 150%;
  		font-size: 0.75em;
  	}
  	
  	.svc-detail > ul {
  		margin: 16px;
  		list-style-type: circle;
  		list-style-position: outside;
  	}
  	
  	.svc-detail li {
  		margin-bottom: 6px;
  		font-size: 0.75em;
  	}
  	
  	.svc-image {
  		height: 295px;
  		width: 218px;
  		border: solid 1px #777;
  		position: relative;
  	}
  	
  	.svc-image span {
  		width: 212px;
  		height: 36px;
  		line-height: 36px;
  		color: #FFF;
  		font-size: 0.75em;
  		display: inline-block;
  		position: relative;
  		left: 3px;
  		top: -42px;
  		z-index: 10;
  	}
  	
  	.svc-image img {
  		margin: 3px;
  	}
  	
	.beforeAfter {
  		margin-top: 0;
  		border-top: solid 1px #3C61CE;
  		overflow: hidden;
  	}
  	
  	.beforeAfter > ul {
  		margin-top: 16px;
  		border: solid 1px #666; 
  	}
  	
  	.beforeAfter li {
  		margin: 3px 0 3px 3px;
  	}
  	
  	.beforeAfter-image {
  		width: 214px;
  		height: 142px;
  	}
  	
  	.beforeAfter-text {
  		width: 258px;
  		height: 142px;
  		color: #3C61CE;
  	}
  	
  	.beforeAfter-text p {
  		line-height: 150%;
  		margin: 3px 20px 6px 20px;
  		font-size: 0.625em;
  		text-align: justify;
  	}

	.inTouch > ul {
		margin: 16px 0;
		font-size: 0.625em;
	}
	
	.inTouch > ul li {
		margin-bottom: 4px;	
	}
	
	.inTouch span {
		width: 10px;
		margin-right: 16px;
		display: inline-block;
	}
	
	.inTouch .l-bustLinkStyle {
		width: 150px;
	}
	
	.suppliers img {
		border-top: solid 1px #999;
		border-bottom: solid 1px #999;
	}
	
/*********************** End of Layout Definitions ********************/

/* State CSS (See SMACSS)
 * Version 1.0
 * 
 * These definitions define the state components on the web page
 * ----------------------------- History -------------------------------
 * Vers:		By		Date		Description
 * 1.0			IJF		05/2012		Initial version
 */

/*********************** End of State Definitions *********************/

/* Theme CSS (See SMACSS)
 * Version 1.0
 * 
 * These definitions define the theme components on the web page
 * ----------------------------- History -------------------------------
 * Vers:		By		Date		Description
 * 1.0			IJF		05/2012		Initial version
 */

/*********************** End of Theme Definitions *********************/