﻿/* Page Layout */
.headerWrapper {
	margin: 0;
}
table td:before {
	display: none;
}
.mobile-only {
    display: none;
}
fieldset.checkbox p.accordion {
    background-image: none;
}
fieldset.checkbox p.accordion:after {
    content: '';
    display: inline-block;
    width: 0; 
	height: 0; 
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 10px solid #63658f;
    float: right;
    margin-top: 6px;
}
fieldset.checkbox p.accordion.open:after {
    border-top: none;
    border-bottom: 10px solid #63658f;
}
.refineSearchButton {
    display: none;
}
/**************************************************************************************************
*   Medium Sized Screens
**************************************************************************************************/
@media screen and (max-width: 980px) {
	.wrapper {
		max-width: 680px;
	}
    .cookied {
        padding-right: 70px;
    }
	#globalHeader {
        height: calc(125px + 5vw);
    }
    #textResize {
        display: none;
    }
    #container div#mainContent,
    #container div#sideContent {
        width: 100% !important;
        margin: 0;
    }
    /* Navigation */
	.header-bar .wrapper img {
		width: 120px;
	}
	#mainNav {
		margin-top: 60px;
	}
	#mainNav ul {
		margin-left: 120px;
	}
	#mainNav ul li {
		margin-left: 10px;
		padding-left: 10px;
	}
    /* Homepage - Hero Area */
	.hero-area img {
		width: 100%;
		height: auto;
		border: none;
	}
	.hero-area .hero-list {
		width: auto;
	}
	.hero-area .hero-list li {
		width: 339px;
		height: 63px;
	}
	.hero-area .hero-list li:first-of-type ,
	.hero-area .hero-list li:nth-of-type(2){
		margin-top: 1px;
		margin-bottom: 1px;
	}
	.hero-area .hero-list li:first-of-type,
	.hero-area .hero-list li:nth-of-type(3)	{
		margin-right: 1px;
	}
    .hero-area .hero-list li a,
    .hero-area .hero-list li a.current {
        padding-top: 20px;
        padding-bottom: 20px;
        background-position: calc(100% - 30px) -37px;
    }
    /* Search Bar */
	.searchbar label {
		width: 100%;
	}
	.searchbar input#query {
		width: calc(100% - 390px);
	}
    /* Side Content */
	#sideContent,
	.key-links ul {
		width: 100%;
		float: none;
	}
    .key-links {
        padding: 0;
    }
	.key-links ul li {
		width: 48%;
		float: left;
		margin-right: 2%;
	}
	.key-links li:nth-of-type(2n) {
		margin-right: 0;
		margin-left: 2%;
	}
    /* Back Link */
	#backLink {
		bottom: -130px !important;
        left: 15%;
        width: 70%;
        height: 48px;
		text-align: center;
		opacity: 1 !important;
		-webkit-transition: all .2s ease;
		        transition: all .2s ease;
		display: block !important;
        background-image: none;
		padding: 12px;
	}
    #backLink:before {
        display: block;
        content: '';
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid #fff;
        margin: 0 auto 2px;
    }
	#backLink.show {
		-webkit-transform: translate(0px, -170px);
		    -ms-transform: translate(0px, -170px);
		        transform: translate(0px, -170px);
	}
	
    /* Report */

    /*
        Sets the standard display properties for the content container    
    */
    #container,
    .report {
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-orient: vertical;
	    -webkit-box-direction: normal;
	    -webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;
	    -webkit-flex-wrap: nowrap;
		    -ms-flex-wrap: nowrap;
		        flex-wrap: nowrap;
	    -webkit-box-pack: start;
	    -webkit-justify-content: flex-start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
	    -webkit-align-content: stretch;
		    -ms-flex-line-pack: stretch;
		        align-content: stretch;
	    -webkit-box-align: start;
	    -webkit-align-items: flex-start;
		    -ms-flex-align: start;
		        align-items: flex-start;
    }
    /*
        Sets the standard display properties for the sub-containers (#mainContent and #sideContent)
    */
    #container > div,
    .report > div {
	    -webkit-order: 1;
		    -ms-flex-order: 1;
		        order: 1;
	    -webkit-box-flex: 0;
	    -webkit-flex: 0 1 auto;
		    -ms-flex: 0 1 auto;
		        flex: 0 1 auto;
	    -webkit-align-self: stretch;
		    -ms-flex-item-align: stretch;
		        align-self: stretch;
	    float: none;
    }

    /*
        Ensures the second of the two content sub-containers is at the top of the page by default.

        i.e. the left hand side navigation goes to the bottom of the page and side content on the right hand side goes to the top of the page
    */
    #container > div:last-of-type,
    .report > div:last-of-type {
		-webkit-order: 0;
		-ms-flex-order: 0;
		order: 0;
	}

    /*
        Used to override the above    
    */
    #sideContent.key-links,
    .pagination {
        -webkit-order: 1 !important;
        -ms-flex-order: 1 !important;
        order: 1 !important;
    }
    .pagination > a {
        position: relative;
        top: -10px;
    }

    .searchRefinement {
        -webkit-order: 2 !important;
        -ms-flex-order: 2 !important;
        order: 2 !important;
    }

    #container > div {
        width: 100% !important;
    }
    #container #sideContent {
        margin-right: 0;
    }
    .link-bar {
        margin-top: 40px !important;
    }
    .report-video {
        margin-left: 0;
	    margin-top: 0;
	    margin-bottom: 55px;
    }

    /* Witness Lists */
    .witness-list-alpha li {
        display: inline-block !important;
        width: 50px;
        padding: 8px 0 !important;
    }
    .witness-list-alpha li a {
        display: block;
    }
    /* Search */
    #mainContent.search {
        width: auto !important;
    }

    #mainContent .searchPane li {
        float: none;
        display: block;
        text-align: left;
    }
    #mainContent .searchPane li ul li:nth-child(2) {
        margin: 8px 0;
    }
    #mainContent .searchPane li:before {
        content: none;
    }
    .pagination ul {
        display: block;
        margin-bottom: 20px;
    }
    .header-info {
        margin-left: 0;
    }
    .refineSearchButton {
        width: 100%;
        height: 40px;
        //background: #14235A;
        background: url("../img/btn-sprite.png");
        background-repeat: no-repeat;
        background-position: 0 -120px;
        background-size: 100% 240px;
        box-shadow: inset -1px -1px 2px #999;
        border-radius: 3px;
        font-size: 1.6em;
        line-height: 40px;
        color: #fff;
        text-align: center;
        margin-bottom: 25px;
        display: block;
        cursor: pointer;
    }
    .refineSearchButton:hover {
        background-position: 0 -160px;
    }

    /* Tables */
	table tr {
		border: 2px solid #e5e5e5;
	}
	table td {
		display: block;
		border: none;
        width: 100% !important;
	}
    table td br {
        display: none;
    }
    table td.expander-target p {
        display: inline;
    }
	table td:before {
		display: block;
		font-weight: bold;
		font-size: 1.2em;
	}
	.expander-target {
		background: #f8f8f8;
		height: 41px !important;
	}
	.expander-target:after {
		display: block;
		content: '';
		float: right;
		width: 0;
		height: 0;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-top: 8px solid #888;
		margin-top: 5px;
	} 
	.expander-target a {
		display: inline;
	}
	table tr.closed td {
		display: none !important;
	}
	table tr.closed td:first-child:nth-last-child(3) {
		display: block !important;
	}
	table tr.closed td:first-child:nth-last-child(3):after {
		-webkit-transform: rotate(-90deg);
		    -ms-transform: rotate(-90deg);
		        transform: rotate(-90deg);
	}
	.expander-target:before {
		display: none;
	}
	.t_s_0 table t,
	.t_s_2 table th {
		display: none;
	}
	.t_s_0 tr:first-of-type,
	.t_s_2 tr:first-of-type {
		display: none;
	}
	.t_s_0 tr:nth-of-type(2),
	.t_s_2 tr:nth-of-type(2) {
		border-top: 10px solid #e5e5e5;
	}
    .t_s_1 {
        border-bottom: 1px solid #e5e5e5;
    }
	.t_s_1 th {
		display: none;
	}
	.t_s_1 th:first-of-type {
		display: table-cell;
        width: 100%;
        border-left: 2px solid #e5e5e5;
        border-right: 2px solid #e5e5e5;
        border-top: 2px solid #e5e5e5;
	}

    .t_s_1 tr {
        display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-flex-wrap: nowrap;
		    -ms-flex-wrap: nowrap;
		        flex-wrap: nowrap;
		-webkit-box-pack: start;
		-webkit-justify-content: flex-start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
		-webkit-align-content: stretch;
		    -ms-flex-line-pack: stretch;
		        align-content: stretch;
		-webkit-box-align: start;
		-webkit-align-items: flex-start;
		    -ms-flex-align: start;
		        align-items: flex-start;
    }
    .t_s_1 td,
    .t_s_1 th {
        -webkit-box-ordinal-group: 1;
		-webkit-order: 0;
		    -ms-flex-order: 0;
		        order: 0;
		-webkit-box-flex: 0;
		-webkit-flex: 0 1 auto;
		    -ms-flex: 0 1 auto;
		        flex: 0 1 auto;
		-webkit-align-self: stretch;
		    -ms-flex-item-align: stretch;
		        align-self: stretch;
    }
    .t_s_1 tr td:nth-last-child(2) {
		-webkit-order: 1;
		    -ms-flex-order: 1;
		        order: 1;
        border-top: none;
	}
    .t_s_1 tr td:nth-last-child(1) {
        border-bottom: none;
    }
    .t_s_1 tr {
        border: none;
    }
    .t_s_1 tr td {
        border: 1px solid #e5e5e5;
        border-left: 2px solid #e5e5e5;
        border-right: 2px solid #e5e5e5;
    }
    .t_s_2 tr td span.mobile-only br.show:nth-child(1) {
        display: none !important;
    }
}


@media screen and (max-width: 680px) {
    .wrapper,
    .report {
		max-width: 570px;
	}
    .hero-area .hero-list li {
		width: 284px;
	}
    br.show {
        display: block !important;
    }
    .searchbar span {
		display: none;
	}
    .searchbar input#query {
		width: calc(100% - 190px);
	}
}
/**************************************************************************************************
*   Small Sized Screens
**************************************************************************************************/
@media screen and (max-width: 570px) {
    .mobile-only {
        display: block;
    }
    .desktop-only {
        display: none;
    }
	.wrapper {
		width: 90%;
	}
    #container.standard #mainContent {
		width: 100% !important;
		margin: 0;
	}
    /* Navigation */
    #mobileNavButton {
        width: 30px;
        height: 30px;
        float: right;
        margin: 40px 5% 0 0;
		cursor: pointer;
    }
	#mobileNavButton span {
		display: block;
		width: 30px;
		height: 5px;
		background: #14235a;
		margin-bottom: 5px;
		-webkit-transition: all .5s ease;
		        transition: all .5s ease;
	}
	#mobileNavButton.open .one {
		-webkit-transform: rotate(45deg);
		    -ms-transform: rotate(45deg);
		        transform: rotate(45deg);
		margin-top: 10px;
	}
	#mobileNavButton.open .two {
		opacity: 0;
	}
	#mobileNavButton.open .three {
		-webkit-transform: rotate(-45deg);
		    -ms-transform: rotate(-45deg);
		        transform: rotate(-45deg);
		margin-top: -20px;
	}
	#mainNav {
		margin-top: 0;
		-webkit-transition: all .5s ease;
		        transition: all .5s ease;
		margin-top: 100px;
	}
	#mainNav ul {
		width: 100%;
		height: 0;
		overflow: hidden;
		-webkit-transition: height .5s ease;
		        transition: height .5s ease;
	}
	#mainNav ul li {
		border-left: none;
		display: block;
		float: none;
		text-align: center;
		margin-left: 0;
		padding-left: 0;
		height: 50px;
		border-bottom: 1px solid #e5e5e5;
		line-height: 50px;
	}
	#mainNav li:last-of-type {
		border-bottom: none;
	}
	#mainNav a {
		display: block;
		height: 100%;
	}
	#mainNav.open ul {
		height: 250px;
	}
    #contentWrapper {
        -webkit-transition: margin .5s ease;
                transition: margin .5s ease;
    }
    #contentWrapper.navOpen {
        margin-top: 240px;
    }
    /* Homepage - Hero Area */
	.hero-area {
		margin-bottom: 5%;
        margin-top: 0;
		-webkit-transition: all .5s ease;
		        transition: all .5s ease;
		background: #fff;
	}
	.hero-area .hero-list li {
		margin-top: 1px !important;
		margin-bottom: 0 !important;
		margin-left: 0 !important;
	}
	.hero-area .hero-list li {
		width: 100%;
	}
	.hero-area .hero-list a {
		background-position: calc(100% - 40px) -27px;
	}
    /* Search Bar */
	.searchbar {
		margin-top: 0;
	}
	.searchbar .btn {
		width: 100px;
	}
	.searchbar label {
		margin-left: 0;
	}
    /* Side Content */
	.key-links ul li {
		display: block;
		float: none;
		width: 100%;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	
	
    /* News Archive */
    .news-archive-list a {
        display: inline;
        max-width: calc(100% - 100px);
    }
    /* Search */
    .header-info {
        margin: 0;
    }
    .sortOption,
    .resultStats {
        display: block;
        position: relative !important;
        margin-bottom: 10px;
    }
    .resultStats {
        padding-bottom: 10px;
    }
    .searchResult {
        margin-bottom: 45px !important;
    }
    /* Committee */
    #mainContent .picture {
        width: 150px;
        height: 210px;
        margin-bottom: 30px !important;
    }
    #mainContent .picture img {
        height: 100%;
    }
    /* Other */
    .session-information {
        width: auto;
        margin-top: 20px !important;
    }
}

@media screen and (max-width: 500px) {
    .searchbar input#query {
        width: calc(100% - 60px);
    }
    .searchbar input.btn {
        width: 46px;
        color: rgba(0,0,0,0);
		background-position: -20px 0;
        padding-left: 0;
    }
}

@media screen and (max-width: 400px) {
    #globalFooter li,
    #globalFooter li a {
        float: none;
        display: block;
    }
    #globalFooter li.left {
        float: none;
    }
}