/*
*Note:Since DOT application provides its header and footer to external applications as well, a new css file has been created 
*for the external apps i.e. print-external.css which has absolute url's for the background property. Thus if there is a change to background property url's or
*if you are adding a new background property which is related to header or footer, along with this file changes have to be done in print-external.css as well to avoid
*the out of sync issue.
*/
@media print{
	@page { size: auto;  margin-top: 5mm; }
	/*Reset Style*/
	body {
		color: #000;
	}
	
	/* Remove/Add Elements */
	.compare-detail-element-wrapper{
		padding: 5px!important;
	}
	
	.drawer-container .content-inner{
		padding: 10px 0;
	}
	
	.drawer-container .text-columns div img{
		margin-top: -25px!important;
	}	
	
	.tout-container-parsys .tout-container #toutWrapper .heading{
		text-align: center;
	}
	ol,ul,li{width:95% !important}
	.hero-header{color:#000}
	.main-logo{float:left}
	.purple-bar, .purple-bar h2, .purple-bar h3, .purple-bar hr, .purple-bar p, .purple-bar p b{color:#000 !important}
	.purple-bar a{display:none}
	.purple-bar{padding:20px 0 0 !important;clear:both}

	/* This targets Safari only */
	@supports (overflow:-webkit-marquee) and (justify-content:inherit) {
         .purple-bar { margin:-240px auto 0 !important; } 
    }

	#container,.header-wrapper{background:none!important;}
	.nav-content-inner{background:none!important; border: none!important;}
	.nav-toggle, .login-toggle{display:none!important;}
	
	.footer div{
		display: none !important;
	}
	
	.footer{background-color: #fff!important;}

	/*.footer:after{
		content: "\00a9 2016 The PNC Financial Services Group, Inc. All rights reserved.";
	}*/
	
	.js .compare-header nav {display: none!important;}
	.accordion.compare-details {display: none!important;}
	.js .compare-filter {display: none!important;}
	.js table.compare-details {display: table!important;}
	
	.compare-details .feature {border: 1px solid #dfdede!important;}
    .compare-detail-element-wrapper {border: 1px solid #dfdede!important;}
    .compare-detail-element-wrapper {background: #fbf9fa!important;}
	/*****/
	
	.tout-container-parsys .tout-container #toutWrapper .tout{
		padding: 25px 30px;
	}
	
	.tout-container-parsys .tout-container #toutWrapper .tout{
		display: table-cell;
	}
	
	.social-media-ribbon-container-parsys{
		display: none !important;
	}
	
	.highlighted-topics-tout-container-parsys{
		display: none !important;
	}
	
	.most-viewed-tout-container-parsys{
		display: none !important;
	}
	
	.related-content-parsys{display: none !important;}
	.associated-products-parsys{display: none !important;}

	/* Show URL */
	a:link{
		background: transparent;
		color:#333;
		text-decoration:none;
	}
	
	a:visited {
		background: transparent;
		color:#333;
		text-decoration:none;
	}
	
	
	a[href^="http://"]{
		color:#000;
	}
	.no-print{ 
		display:none
	}
	/*p img {
	    display: none;
	}*/

	div.content-blocks{display:block !important;}


	.tout-list.touts .paragraph-element.section:nth-child(1){
		display:none
	}
	.skinny-footer{
		display:none;
	}
	
	.content-popup-container{
		display: block!important;
	}
}

@media only print and (min-width: 600px) {
	.tout-container-parsys .tout-container #toutWrapper .tout:nth-child(2){
		padding-left: 75px;
	}
	
    .compare-header{width: 600px;margin-left: auto;margin-right: auto;}
    
    .compare-tout {
        margin-top: 30px;
        padding: 0 10px 10px;
        border-left: 1px solid #f9bb76;
        text-align: center;
        position: relative;
    }

    .compare-tout img {
        display: block;
        margin: 0 auto;
        position: absolute;
        left: 0;
        right: 0;
    }

    .compare-tout-title {
        padding: 50px 10px 10px 10px;
    }

    .compare-tout-title p {
        display: inline-block;
        padding: 0 10px;
    }
    
    .compare-details .heading {padding-left:10px}
    
    .compare-details th{width:33%}

    .js .compare-filter {
        display: block;
        background: #d9712c;
        text-align: right;
        font: normal 14px/19px "PNC Brand", Arial, sans-serif;
    }
    .compare-filter p {
        margin: 0;
    }
    .compare-filter .heading {
        padding-left: 25px;
        background: url(../img/select-accounts.png) no-repeat;
    }
    .compare-filter .heading p {
        color: #fff;
    }
    .compare-filter .heading:hover p {
        text-decoration: underline;
    }
    .compare-filter .flyout-wrapper {
        position: relative;
        padding: 10px;
        display: inline-block;
    }
    .compare-filter .flyout {
        display: none;
        position: absolute;
        z-index: 1;
        top: 44px;
        left: -100px;
        box-shadow: 0 0 8px rgba(0,0,0,.23);
        background: #f1f1f1;
        padding: 0 25px 21px 25px;
        text-align: left;
    }
    .compare-filter .flyout.open {
        display: block;
    }
    .compare-filter .flyout-inner {
        margin-top: -18px;
        padding-top: 39px;
        background: url(../img/flyout-arrow.png) 76px 0 no-repeat;
    }

    .compare-filter .description {
        margin-bottom: 10px;
    }

    .compare-filter label {
        display: block;
        padding: 11px 0;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .compare-filter .submit {
        text-align: center;
        margin-top: 12px;
    }

    .compare-filter input[type="checkbox"] {
        margin-right: 23px;
    }

    .compare-filter .disabled {
        color: #c2c2c2;
    }
    
    .compare-details .feature-detail{display:none}

	div.content-blocks{display:block !important}
}

@media print and (min-width: 980px) {	
	.tout-container-parsys .tout-container #toutWrapper .tout:nth-child(2){
		padding-left: 200px;
	}
	.hero-header{height:200px}
    .compare-header{width: 940px;}
    .compare-filter {
        max-width: 903px;
        margin: 0 auto;
    }
    
    .compare-details{
    	max-width: 903px;
    }

    .compare-tout {
        width: 280px;
    }
    
    .compare-details th,
    .compare-details td {
        width: 300px;
    }
    .compare-details .feature-detail{display:none}
    .compare-detail-element-wrapper {height: 65px; padding: 5px 0;}

	div.content-blocks{display:block !important}
}