@charset "utf-8";

/*tablet styles*/
@media only screen and (min-width:481px) and (max-width:1060px) {

body {
	width: 95%;
	margin: 0 auto;
	min-width: 500px;
	max-width: 768px;
}

/*header styles*/
#pageHeader {
	position: relative;
}

#pageHeader a {
	margin: 30px auto 15px;
	height: 46px;
	width: 380px;
	background-image: url(images/PTL_logo_tab.png);
	background-repeat: no-repeat;
}

#pageHeader h2 {
	margin: 0 auto;
	width: 200px;
	padding-bottom: 1em;
}

/*seach box styles*/

.header_tag {
	display: none;
}

/*nav styles*/
#mainNav ul {
    margin: 8px 0 8px; /*white space above and below ul nav*/
}
#mainNav li {
	display: block;
	position: relative;
	float: left;
	width: 20%;
	text-align: center;
}

#mainNav li > a {								/*change text size of main menu items ONLY*/
	font-size: 1.2em;
	display: inline-block;
}

#mainNav em {
	display: none;
}
#mainNav .title_pos{
	width: 100px;
	height:	62px;
	margin: 0 auto;
}

#mainNav ul.sub-menu {
    position: absolute;
    display: block;	
    margin-top : 15px;			/* lining up block with botton of menu area */
    left: -15px;
    right: -15px;
    min-width: 165px;
    text-align: center;  		/*centered within the container... but li inside will be left aligned*/
    max-height: 0;					/*menu is collapsed*/
    z-index: 1000;					/*added to make the menu appear over anything else on page*/ 
    -moz-transition:max-height 0.4s ease;
    -webkit-transition:max-height 0.4s ease;
    -o-transition:max-height 0.4s ease;
    transition:max-height 0.4s ease;
    overflow: hidden;  			/*important as it will only animate the UL. Without that and li a appear immediately*/
    clear:both;
}
#mainNav li:nth-child(1) > ul.sub-menu {
    left: 0px;
    min-width: 120px;
}
#mainNav li:nth-child(3) > ul.sub-menu {
    left: -95px;
    right: -95px;
    min-width: 311px;
}
#mainNav li:nth-child(4) > ul.sub-menu {
    min-width: 150px;
}
#mainNav ul.sub-menu > li {
	padding:0;    /*IMPORTANT: otherwise it inherits the padding from the top menu item!!*/
	float: none;	/*so stacked*/
	width: 100%;	/*required so the li container width equals the anchor text width*/
	background: rgb(55,88,129);
	background: rgba(55,88,129, .85);
	border-bottom: 1px solid;
	border-bottom-color:rgb(255,255,255);
	border-bottom-color:rgba(255,255,255, .75);
}
#mainNav ul.sub-menu ul > li{
	padding:0;    
	float: none;	
	width: 100%;
}

#mainNav ul.sub-menu li a {
	display: block;  
	text-align:left;
	font-size: 1em;
	padding:0.15em 0.8em;
	white-space: nowrap;
	color: rgb(255,255,255);
	color: rgba(255,255,255, .90);
}

#mainNav ul.sub-menu > li > ul{
	display: none;
}

#mainNav a.hover:hover + ul.sub-menu,
#mainNav ul.sub-menu.expand{
	max-height: 75em;
}

#mainNav ul.hover:hover {			/*keeps the UL drop-down menu expanded when anchor focus lost*/
	max-height: 75em;
}
#mainNav ul.sub-menu > li:hover {				/*change background of drop-down hovered items to dark blue*/
	background: rgb(24, 52, 87);
}
#mainNav > ul {
	margin: 15px 0 15px; 									/*white space above and below ul nav*/
}

#mainNav li:first-child li{  						/*indent text of first menu*/
	padding-left: 20px;
}
#mainNav ul.sub-menu li:last-child {
	border-bottom: none;
}
#mainNav ul.sub-menu li a:hover {
	background: rgb(24, 52, 87);
}

#mainNav div.ptl {
	background: url(images/icon_sprites_40.png) no-repeat 30px 20px;
}
#mainNav div.sectors {
	background: url(images/icon_sprites_40.png) no-repeat 28px -60px;
}
#mainNav div.expertise {
	background: url(images/icon_sprites_40.png) no-repeat 28px -140px;
}
#mainNav div.services {
	background: url(images/icon_sprites_40.png) no-repeat 28px -220px;
}
#mainNav div.resources {
	background: url(images/icon_sprites_40.png) no-repeat 28px -303px;
}

/* splash styles*/

.splash_pic {
	height: 198px;
	background: url(images/ptl_site_tab.jpg) no-repeat right 0px top 0px;
	overflow: hidden;
}
.splash_txt {
	display:none;
}
#tag1{
	width: 500px;
	height: 50px;
	left: 0;
	top: -61px;
	padding-left: 20px;
	line-height: 1.3em;
}
#tag2{
	width: 100%;
	height: 28px;
	bottom: 16px;
	padding: 4px 25px 0 0px;
	background: #E8E8E8;
	text-align: right;
	box-sizing: border-box;
}
#tag3{
	display: none;
}
#nav_left{
        top: 206px;
}
#nav_right{
	top: 206px;
}
/* carousel styles */

#carousel{
	color: #353535;
	font-style: italic;
	font-size: 1.25em;
	font-weight: 400;
	letter-spacing: 0.7px;
	height: 305px;
}
#carousel_container{
	margin-top: 53px;
}
/* nav_button styles */

div.nav_button {
	margin: .8em 2.9% .8em 2.9%;
	width: 95%;
}
div.nav_button a{
	margin-bottom: 0.5em;
}
div.nav_button a{
	width: 80px;
}

/* landing page styles */ /* landing page styles */ /* landing page styles */ /* landing page styles */ /* landing page styles */ /* landing page styles */ 

#landing_banner {
	height: 77px;
	background-image: url(images/landing_banner_tab.jpg);
}

#child_pages{
	padding-left: 60px; /*brings the 2 column layout right a bit to center it*/
	-webkit-column-count: 2;
  -moz-column-count: 2;
   column-count: 2;
}
#child_pages ul{
	list-style:none;
}
#child_pages > ul > li{
	display: inline-block;
	width: 100%;
	height: 160px;
}
#child_pages .panel_rollover{
	display:block;
	width: 100%;
	height: 100%;
	/*background: rgba(204,255,255,0.6); for testing rollover area*/ 
}
#child_pages .panel_rollover:hover a{
	color	:	#00b511;
}
#child_pages li li{
	height: auto;
}
#child_pages li a{
	font-size: 1.85em;
	line-height: 1.5em;
	font-weight: 400;
	color	:	#111111;
	outline: 0;
}
#child_pages li li a{
	font-size: 1.2em;
	line-height: normal;
	color	:	#747474;
}
#child_pages li li a:hover{
	color	:	#00b511;
}
section.level2 {
  padding: 20px 0px;
}

/* MAIN BODY SYLES = Section and Article*/

section {
    padding: 10px 3.9% 10px 3.9%;
}
#header article{
    padding: 24px 6.8% 0px; /*6.8% comes from combined section and article padding to match posts*/
}
article.page .img{
    float: right;
    padding-left: 25px;
    max-width: 135px;
    margin: 0;
}
article {
    padding: 0 2.9%;
}
article.level3 {
    padding-top: 10px;
}
article.level3 h2 {
    display: block;
    float: left;
    font-size: 1.7em;
    margin: 5px 0 16px;
}
article.post .img{
    position: relative;
    float: right;
    margin: 15px 0 0 15px;
    z-index: 1;
}
article .article_text{
    margin-left: 0px;
}
article p {
    margin-top: 1em;
}
.showhide{
    margin: 10px 0 20px;
}
.ptl_lotus{
    display: none;
}
#google_map{
    height: 330px;
    background-image: url(images/address_dsk.jpg);
    background-repeat: no-repeat;
}

/* homepage bottom pics */

div.bottom-images > ul > li {
    width: 50%;
}

/*footer styles*/
#pageFooter .top_panel p {
	font-size: 11px;
}
.bottom_panel h2, .bottom_panel .column2{
	display:none;
}
#pageFooter ul.column3{
    position:absolute;
    left: 30%;
    padding: 0;
}
#pageFooter div.column4{
    padding-left: 15%;
}
#search_panel {
    margin: 0;
    width: 100%;
    padding-left: 15px;
    box-sizing: border-box;
}

/* location styles */

#contact #map-canvas {
    height: 345px;
    margin: 0 0 30px 0;
}
ul.cd-tabs-navigation{
    width: 130px;
    min-height: 280px;
    float:	left;
}
.cd-tabs-navigation a {
    padding: 15px 0px 15px 10px;
}
.cd-tabs.nav{
    border: solid 3px #E9E9E9;
}
ul.cd-tabs-content {
    min-height: 262px;
    margin-left: 130px;
    padding: 10px 10px 10px 33px;
}
.cd-tabs-content .loc_icon{
    display: none;
}
#address_location td {
    padding: 0 0 8px;
}
/* Team styles */

#team article{
    width: 100%;
    margin: 30px 0 30px;
}
#team > h3{
    height: 35px;
    padding: 15px 0 0 67px;
    margin: 10px 0 0 20px;
}
#team .extra_details{
	height: 165px;
}
/* Contact us styles */
section.ptl_page{
	padding: 30px 3.9% 30px 3.9%;
}
#contact h2{
	font-size:1.5em;
}
.contact_container{
	margin: 0 auto 40px;
	padding: 30px 40px 40px 40px;
	position: relative;
	border: thin solid #999;
}
.stamp{
	position:absolute;
	width: 96px;
	height: 38px;
	background: url(images/stamp_medium.gif) no-repeat;
	top: -60px;
	right: -17px;
}
#contact #respond{
	float: left;
	width: 100%;
	height: 380px;
	padding: 20px 0 0 0;
}
#contact #panel{
	/* float: left; */
	width: 100%;
	height: 379px;
	padding: 0 0 0 20px;
	background-color: #f1f1f1;
	font-size:1.1em;
	box-sizing: border-box;
}
.contact_form{
	width: 95%;
}
.text_area {
	width: 100%;
}
#contact table{
	table-layout: fixed;
	margin-top: 15px;
}
#contact table{
    margin-top: 15px;
}

.rail national-rail-timetable td:first-child{
    width: 126px;
}
#contact td:first-child{
	width: 200px;
}
#contact td{
	padding: 0px 0 20px;
}
input[type="submit"].contact_submit {
    right: -13px;
    left: initial;
}

/* About us styles */
#ptl h3{
	height: 31px;
	padding: 9px 0 0 0;
}

/* Social icons */
span.search_img{
	margin-right: 10px;/*tighter grouping of social icons*/
}
#social-icons a {
	margin-right: 11px;/*tighter grouping of social icons*/
}
#social-icons span.tel_number{
	display: none;
}
#social-icons a.generalTel{
	display: none;
}
}