/* ==|== Font styles =====================================================
 ========================================================================== */
@font-face {
    font-family: 'avenir_85_heavyregular';
    src: url('avenir-heavy-webfont.eot');
    src: url('avenir-heavy-webfont.eot?#iefix') format('embedded-opentype'),
         url('avenir-heavy-webfont.woff') format('woff'),
         url('avenir-heavy-webfont.ttf') format('truetype'),
         url('avenir-heavy-webfont.svg#avenir_85_heavyregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'avenir_65medium';
    src: url('avenir-medium-webfont.eot');
    src: url('avenir-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('avenir-medium-webfont.woff') format('woff'),
         url('avenir-medium-webfont.ttf') format('truetype'),
         url('avenir-medium-webfont.svg#avenir_65medium') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* ==|== primary styles =====================================================
   Author: Druff Interactive
 ========================================================================== */
 
span.skype_pnh_container {display:none !important;}
span.skype_pnh_print_container {display:inline !important;}
 
 .mainWrap {width:960px; height:auto; margin:0 auto; position:relative;  display:block}
 
   header {width:100%; height:196px; float:left; position:relative; background:url(../images/Pinnacle_headerimage.png) no-repeat top center; z-index:100}
   	
		.logo {width:138px; height:141px; float:left; position:absolute; top:25px; background:url(../images/Pinnacle_mainSprite.png) 0px 0px; display:block;
				  transition:all .2s linear; 
			      -o-transition:all .2s linear; 
			      -moz-transition:all .2s linear; 
			      -webkit-transition:all .2s linear
		}
	
	.sliderWrapper {width:100%; height:auto; float:left; position:relative; margin-top:-20px; display:block; background:url(../images/Pinnacle_SliderBG-Repeat.gif)}
		nav {width:222px; height:auto; position:absolute; top:20px; left:20px; z-index:100}
		
			nav ul {list-style:none}
				nav ul li {width:222px; height:38px; display:block; margin:2px 0 3px 0}
					nav ul li a {width:100%; height:38px; display:block}
					
						  nav ul li div {width:38px; height:38px; float:left; display:block; background:#000}
						  	nav ul li div img {width:28px; height:24px; margin:7px 5px; display:none}
						  nav ul li span {width:169px; height:38px; float:left; display:block; background:#000; margin:0 0 0 5px; font: 15px/37px 'avenir_85_heavyregular'; text-transform:uppercase; color:#FFF; padding:0 0 0 10px}
						  
						  	nav ul li:hover div, nav ul li:hover span {background:#bd1d22}
							nav ul li:hover div img, nav ul li.active div img {display:block}
							nav ul li.active div, nav ul li.active span {background:#bd1d22}
		
		.sliderSpace {width:100%; height:420px; float:left}
		
			.sliderSpace img {display:none}
		
			/*Slider styles */
			.menuWrapper{
    position:relative;
    height:420px;
    width:960px;
	margin:0;
}
ul.menu{
    list-style:none;
    width:960px;
}
ul.menu > li{
    float:left;
    width:238px;
    height:420px;
    border-right:1px solid #777;
}
ul.menu > li.last{
    border:none;
	width:240px
}
.bg1{
    background-image: url(../images/1.jpg);
}
.bg2{
    background-image: url(../images/2.jpg);
}
.bg3{
    background-image: url(../images/3.jpg);
}
.bg4{
    background-image: url(../images/4.jpg);
}
ul.menu > li > a{
    float:left;
    width:238px;
    height:420px;
	margin:0;
    cursor:pointer;
    text-decoration:none;
}
ul.menu > li ul{
    list-style:none;
    float:left;
    width:100%;
    height:420px;
}
ul.menu > li ul li{
    display:none;
}
ul.menu > li ul.sub1{
    background-image:url(../images/bg1sub.png);
}
ul.menu > li ul.sub2{
    background-image:url(../images/bg2sub.png);
}
ul.menu > li ul.sub3{
    background-image:url(../images/bg3sub.png);
}
ul.menu > li ul.sub4{
    background-image:url(../images/bg1sub.png);
}
ul.menu > li ul.sub1 li{
    display:block;
}
	
	section {width:100%; height:auto; float:left; position:relative; display:block; background:#333}
		section h1 {width:950px; height:30px; font: 20px/30px 'avenir_85_heavyregular'; color:#FFF; text-transform:uppercase; background:#000; padding:0 0 0 10px; margin:10px 0 0 0}
			section h1 .shadowStripLeft {width:4px; height:37px; background:url(../images/Pinnacle_mainSprite.png)-153px 0px; position:absolute; left:0px; top:-3px}
			section h1 .shadowStripRight {width:4px; height:37px; background:url(../images/Pinnacle_mainSprite.png)-166px 0px; position:absolute; right:-1px; top:-3px}
			
			.contentWrap {width:900px; height:auto; float:left; position:relative; padding:20px; background:#FFF; margin:10px 10px 0 10px;
									/* --- shadow ---*/
									-moz-box-shadow:  0 0 5px #000;
									-webkit-box-shadow: 0 0 5px #000;
									box-shadow:   0 0 5px #000;
			}
			
			.contentWrap h2.sideHeader {font: 18px/18px 'avenir_65medium'; float:left; width:50%;  color:#999; text-transform:uppercase; letter-spacing:1px;  padding:0 0 5px 0; border-bottom:1px dotted #999}
				.contentWrap .contact {width:450px; height:auto; float:right; font: 14px/18px 'avenir_65medium'; color:#4b4a4a; letter-spacing:1px; padding:10px 0 0 0}
					.contentWrap form {width:450px; height:auto; float:right; margin:10px 0 0 0}
						.contentWrap form input {width:135px; height:18px; font: 12px/10px 'avenir_65medium'; color:#666; margin:0 5px 0 0}
							.contentWrap form input:last-child {margin:0}
						.contentWrap form textarea {width:440px; height:50px; margin:10px 0 0 0; font: 12px/10px 'avenir_65medium'; color:#666}
							.contentWrap form .submitButton {font: 14px/25px 'avenir_65medium'; color:#FFF; text-align:left; text-transform:uppercase; width:200px; height:25px; position:relative; float:right; right:-30px; top:10px; top:7px\9; margin:0 0 10px 0; background:url(../images/Pinnacle_readmore-repeat.jpg) repeat-x; border:none; cursor:pointer}
								.contentWrap form .paperclip {width:10px; height:10px; position:absolute; right:-9px; top:200px; background:url(../images/Pinnacle_mainSprite.png)-153px -39px; display:block}
								.contentWrap form .submitButton:hover {background:url(../images/Pinnacle_readmore-repeath.jpg) repeat-x}

				.contentWrap p {width:450px; height:auto; float:left; font: 14px/18px 'avenir_65medium'; color:#4b4a4a; letter-spacing:1px; text-align:justify}
				.contentWrap p:nth-of-type(2) {width:900px; padding:15px 0 0 0}
				.contentWrap p.home {width:450px; height:auto; float:left; font: 14px/18px 'avenir_65medium'; color:#4b4a4a; letter-spacing:1px; text-align:justify}
				.contentWrap p.home:nth-of-type(2) {width:900px; padding:15px 0 0 0}

				.contentWrap img {width:420px; height:185px; float:left; border:3px solid #b6adad; margin:0 0 0 20px;
											  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
											  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
											  box-sizing: border-box;         /* Opera/IE 8+ */
				}
				
				.contentWrap a button.learnMore {font: 14px/25px 'avenir_65medium'; color:#FFF; text-align:left; text-transform:uppercase; width:200px; height:25px; position:relative; float:right; right:-30px; background:url(../images/Pinnacle_readmore-repeat.jpg) repeat-x; border:none; cursor:pointer}
					.contentWrap a button.learnMore .paperclip{width:10px; height:10px; position:absolute; right:1px; top:-9px; background:url(../images/Pinnacle_mainSprite.png)-153px -39px; display:block}
										.contentWrap a button.learnMore:hover {background:url(../images/Pinnacle_readmore-repeath.jpg) repeat-x}
										
										@media \0screen {
															.contentWrap p.ie8 {width:900px; padding:15px 0 0 0}

				.contentWrap a button.learnMore {font: 14px/25px 'avenir_65medium'; color:#FFF; text-align:left; text-transform:uppercase; width:200px; height:25px; position:relative; float:right; right:-30px; top:10px; background:url(../images/Pinnacle_readmore-repeat.jpg) repeat-x; border:none; cursor:pointer}
								.contentWrap form .paperclip {width:10px; height:10px; position:absolute; right:-9px; top:202px; background:url(../images/Pinnacle_mainSprite.png)-153px -39px}
					.contentWrap a button.learnMore .paperclip{width:10px; height:10px; position:absolute; right:1px; top:-20px; background:url(../images/Pinnacle_mainSprite.png)-153px -39px; display:block}
										.contentWrap a button.learnMore:hover {background:url(../images/Pinnacle_readmore-repeath.jpg) repeat-x}
										  }

										  /* ---- contact page styles --*/
										     .contentWrap h2 {font: 18px/18px 'avenir_65medium'; float:left; color:#bd1d22; text-transform:uppercase; width:100%; letter-spacing:1px; margin:10px 0 0 0; padding:0 10px 10px 0; border-bottom:1px dotted #bd1d22}
											.contentWrap .Tommy {width:445px; height:auto; float:left; margin:20px 0 20px 0px}
											.contentWrap .Tommy img {width:100px; height:100px; float:left}
											.contentWrap .Tommy h2 {font: 16px 'avenir_65medium'; float:left; color:#bd1d22; text-transform:uppercase; width:210px; float:left; letter-spacing:1px; margin:0; padding:0 0 0 10px; border:none}
											.contentWrap .Tommy sub {font: 10px 'avenir_65medium'; float:left; color:#333; text-transform:uppercase;  float:left; letter-spacing:1px; margin:0; padding:0 0 0 10px; border:none}
											.contentWrap .Tommy p {font: 10px 'avenir_65medium'; color:#333; float:left;  padding:10px 0 0 10px}
											.contentWrap .Tommy p a {color:#bd1d22; text-decoration:none; cursor:pointer}
												.contentWrap .Tommy p a:hover {color:#333}
											
											.contentWrap .Oscar {width:445px; height:auto; float:left; margin:20px 0 20px 0}
											.contentWrap .Oscar img {width:100px; height:100px; float:left}
											.contentWrap .Oscar h2 {font: 16px 'avenir_65medium'; float:left; color:#bd1d22; text-transform:uppercase; width:210px; float:left; letter-spacing:1px; margin:0; padding:0 0 0 10px; border:none}
											.contentWrap .Oscar sub {font: 10px 'avenir_65medium'; float:left; color:#333; text-transform:uppercase; width:210px; float:left; letter-spacing:1px; margin:0; padding:0 0 0 10px; border:none}
											.contentWrap .Oscar p {font: 10px 'avenir_65medium'; color:#333; float:left; width:210px; padding:10px 0 0 10px}
											.contentWrap .Oscar p a {color:#bd1d22; text-decoration:none; cursor:pointer}
												.contentWrap .Oscar p a:hover {color:#333}
										
										/* --- Content Layout of tables --- */

										.contentLayoutWrap {width:900px; height:auto; float:left; position:relative; padding:20px; background:#FFF; margin:10px 10px 0 10px;
																/* --- shadow ---*/
																-moz-box-shadow:  0 0 5px #000;
																-webkit-box-shadow: 0 0 5px #000;
																box-shadow:   0 0 5px #000;
										}
										
										.contentLayoutWrap h2 {font: 18px/18px 'avenir_65medium'; float:left; width:100%;  color:#999; text-transform:uppercase; letter-spacing:1px; margin:20px 0 15px 0; padding:0 0 5px 0; border-bottom:1px dotted #999}
										
										.contentLayoutWrap ul {width:900px; height:auto; list-style:none}
												.contentLayoutWrap  ul li{width:430px; float:left; margin:0 0 5px 0}
													.contentLayoutWrap  ul li div {width:18px; height:18px; float:left; margin:0 10px 0 0; background:#000; display:block}
														.contentLayoutWrap  ul li div img {width:13px; height:16px; border:none; margin:2px 0 0 5px}
													.contentLayoutWrap  ul li span {width:370px; height:16px; font: 14px/21px 'avenir_65medium'; color:#4b4a4a; letter-spacing:1px}
											.contentLayoutWrap p {width:900px; height:auto; float:left; font: 14px/18px 'avenir_65medium'; color:#4b4a4a; letter-spacing:1px; text-align:justify}
											
											.contentLayoutWrap ol {width:900px; list-style:none}
												.contentLayoutWrap ol li {width:438px; height:auto; min-height:100px; float:left; margin:5px; border:1px solid #CCC; display:block;
																						 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
																						  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
																						  box-sizing: border-box;         /* Opera/IE 8+ */
												}
													.contentLayoutWrap ol li img {width:438px; height:200px; background:#CCC; display:block}
													.contentLayoutWrap ol li h2 {font: 15px/18px 'avenir_65medium'; float:left; width:405px; height:35px; color:#bd1d22; text-transform:uppercase; letter-spacing:1px; margin:20px 0 0 10px; padding:0 10px 10px 0; border-bottom:1px dotted #bd1d22}
													.contentLayoutWrap ol li p{width:415px; min-height:235px; overflow-style:marquee-line; font:13px/18px 'avenir_65medium'; color:#999; letter-spacing:1px; padding:10px 10px 10px 10px}
											
											
											.contentBlock {width:900px; height:auto; float:left; border: 1px solid #666; margin:15px 0 0 0; padding:5px;
																	 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
																	  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
																	  box-sizing: border-box;         /* Opera/IE 8+ */
											} 
											.contentBlock h2 {font: 18px/18px 'avenir_65medium'; color:#bd1d22; text-transform:uppercase; width:96.5%; letter-spacing:1px; margin:10px; padding:0 0 5px 0; border-bottom:1px dotted #bd1d22}
											
											.contentBlock ul {width:900px; height:auto; list-style:none}
												.contentLayoutWrap .contentBlock ul li{width:430px; float:left; margin:10px}
													.contentLayoutWrap .contentBlock ul li div {width:40px; height:40px; float:left; margin:0 10px 20px 0; background:#000; display:block}
														.contentLayoutWrap .contentBlock ul li div img {width:30px; height:36px; border:none; margin:4px 0 0 10px}
													.contentLayoutWrap .contentBlock ul li span {width:370px; height:auto; font: 14px/18px 'avenir_65medium'; color:#4b4a4a; letter-spacing:1px}
													
											.contentBlock ul.projectLists {width:890px; height:auto; list-style:circle inside}
												.contentLayoutWrap ul.projectLists li {width:271px; height:20px; float:left; border-bottom:1px dotted #CCC; text-indent:2px}
													.contentLayoutWrap ul.projectLists li span {width:248px; height:auto; font: 12px/10px 'avenir_65medium'; color:#4b4a4a; letter-spacing:1px}
													.contentLayoutWrap ul.projectLists li div {display:none}
													.contentLayoutWrap ul.projectLists li .active {width:23px; height:20px; float:right; margin:0 0 5px 5px; background:url(../images/Pinnacle_imageHolder.png)0px 0px; display:block}
													 .contentLayoutWrap ul.projectLists li .active:first-child {margin:0}
													.contentLayoutWrap ul.projectLists li .active:hover {background:url(../images/Pinnacle_imageHolder.png) 0px -21px; cursor:pointer}
	
	.clientLogos {width:100%; height:auto; float:left; position:relative; display:block; background:#333}
		.clientLogos ul {list-style:none; margin:20px 0 0 0}
			.clientLogos ul li {width:150px; height:68px; float:left; margin:0 0 0 40px; background:#FFF; border:3px solid #b6adad; display:block}
			.clientLogos ul li:first-child {margin:0 0 0 10px}
				.clientLogos ul li a {border:none; cursor:pointer}
				.clientLogos ul li a:hover {
															/* IE 8 */
															-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
															
															/* IE 5-7 */
															filter: alpha(opacity=50);
															
															/* Netscape */
															-moz-opacity: 0.5;
															
															/* Safari 1.x */
															-khtml-opacity: 0.5;
															
															/* Good browsers */
															opacity: 0.5;
				}
															
															
	
	footer {width:100%; height:auto; float:left; position:relative; padding:20px 0 0 0; display:block; background:#333}
	
		footer .quickLinks {width:940px; height:auto; float:left; position:relative; margin:0 10px}
		
			footer .quickLinks ul {list-style:none}
				footer .quickLinks ul li {width:200px; height:47px; float:left; position:relative; margin:0 0 20px 30px; text-indent:45px; background:#000; font: 14px/50px 'avenir_65medium'; color:#FFF; text-align:left}
				footer .quickLinks ul li:nth-child(1) {width:450px; margin: 0 0 20px 30px;  text-indent:66px}
				footer .quickLinks ul li:nth-child(3) {text-indent:35px}
					footer .quickLinks ul li:hover {background:#bd1d22}
					
						footer .quickLinks ul li a {color:#FFF; text-decoration:none}
							footer .quickLinks ul li a:hover {color:#FFF; text-decoration:none; cursor:pointer}
							
					footer .quickLinks ul li .phoneIcon {width:69px; height:50px; position:absolute; left:-30px; background:url(../images/Pinnacle_mainSprite.png) 0px -148px}
					footer .quickLinks ul li .serviceIcon {width:47px; height:55px; position:absolute; left:-18px; top:-2px; background:url(../images/Pinnacle_mainSprite.png) -72px -145px}
					footer .quickLinks ul li .awardsIcon {width:42px; height:59px; position:absolute; left:-22px; top:-2px; background:url(../images/Pinnacle_mainSprite.png) -120px -144px}

		footer .footerMenu {width:100%; height:50px; float:left; background:#bd1d22}
		
		footer .footerMenu ul {list-style:none; margin:20px 0 0 10px}
			footer .footerMenu ul li {width:auto; height:15px; padding:0 10px 0 0; margin:0 0  0 10px; border-right:1px solid #FFF; float:left; font: 15px/16px 'avenir_65medium'; color:#FFF}
			footer .footerMenu ul li:first-child {margin:0}
			footer .footerMenu ul li:last-child {border-right:0}
			
				footer .footerMenu ul li a {text-decoration:none; color:#FFF}
					footer .footerMenu ul li a:hover {color:#000; cursor:pointer}
					
			footer .footerMenu p {font: 15px/15px 'avenir_65medium'; color:#FFF; float:right; margin:0 10px 0 0}