
/*Colors
Navy: #344A66;
Lighter Navy: #4C617C;

Maroon: #5C0025;
Lighter Maroon: #72103D;
Darker Maroon: #4c0024;

Light Gray: #f2f2f2;
Med Gray: #E1E1DC;
Darker Gray: #c0c0c0;
Dark Gray: #3c3c3c;

*/

/* Retina Displays */
@media 
  only screen and (-webkit-min-device-pixel-ratio: 2), 
  only screen and (min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

/* For Rotator */
@media (max-width: 1960px) {

}


/* Large Desktop */
@media (max-width: 1500px) {

	/* -----------------------------------------------
		GLOBAL
	–––––––––––––––––––––––––––––––––––––––––––––––––– */

    /* -----------------------------------------------
		EMAIL
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
    .email-list .date,
    .date-header {
        width: 130px;
    }
    .email-list .to,
    .to-header {
        width: 130px;
    }

    .email-list .cb,
    .cb-header {
    }

    .email-list .case, .case-header {
        width: 75px;
    }

    .email-list .from,
    .from-header {
        width: 150px;
    }

    .email-list .clickable-rows tr td a.subject {
        padding-left: 350px;
    }

}



/* iPad & Small Desktop */
@media (max-width: 1320px) {

	
	/* -----------------------------------------------
		GLOBAL
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	.main{
		margin-left: 210px;
	}
	.header-bar {
		left: 210px;
	}


	/* -----------------------------------------------
		SIDEBAR
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	.sidebar {
		width: 210px;
	}
	.sidebar nav a {
		font-size: 12px;
	}

    /* -----------------------------------------------
		EMAIL
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
    .email-list td a {
        font-size:12px;
    }
    .email-list .date,
    .date-header {
        width: 130px;
    }

    .email-list .to,
    .to-header {
        width: 100px;
    }

    .email-list .cb,
    .cb-header {
        width: 40px;
    }

    .email-list .case, .case-header {
        width: 75px;
    }

    .email-list .from,
    .from-header {
        width: 100px;
    }

    .email-list .clickable-rows tr td a.subject {
        padding-left: 230px;
    }

    .search .button.clear {
    	font-size: 14px;
    }

    #multi-controls {
    	float: none;
    	margin: 0 0 20px;
    }

}


/* Vert iPad */
@media (max-width: 1023px) {
    	
	/* -----------------------------------------------
		GLOBAL
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	.main {
		margin-left: 0;
	}
	.header-bar {
		left: 0;
	}

	/* -----------------------------------------------
		STRUCTURE
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	.wrapper {
		width: 95%;
	}


	/* -----------------------------------------------
		NAVIGATION
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	.sidebar {
		width: 250px;
		position: absolute;
		left: -250px;
		z-index: 999;
	    -webkit-transition: all 250ms ease-in-out;
	    -moz-transition: all 250ms ease-in-out;
	    -ms-transition: all 250ms ease-in-out;
	    -o-transition: all 250ms ease-in-out;
	    transition: all 250ms ease-in-out;
	}
	.mobile-trigger {
		display: block;
		position: relative;
		top: 10px;
		left: 50px;
		float: left;
		font-size: 28px;
	}
	.mobile-close {
		display: block;
		position: absolute;
		right: 35px;
		top: 10px;
		font-size: 42px;
	}
	.mobile-close a {
		color: #fff;
	}
	.header-breadcrumbs ul {
		padding-left: 130px;
	}
    .sidebar.open {
    	left: 0;
    }
    .sidebar .logo-container {
    	text-align: left;
    	padding-left: 20px;
    }
    /* -----------------------------------------------
		EMAIL
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
    .email-list td a {
        font-size: 11px;
    }

    .email-list .date,
    .date-header {
        width: 130px;
    }

    .email-list .to,
    .to-header {
        width: 90px;
    }   

    .email-list .case, .case-header {
        width: 75px;
    }

    .email-list .from,
    .from-header {
        width: 90px;
    }

    .email-list .clickable-rows tr td a.subject {
        padding-left: 210px;
    }
    .search .button.clear {
    	margin-right: 0px;
    }
    .search .search-filters a {
    	font-size: 14px;
    	margin-right: 30px;
    }

}


/* Smaller than Vert iPad */
@media (max-width: 900px) {





}

@media (max-width: 875px) {

}


/* Smaller than Vert iPad */
@media (max-width: 767px) {

	/* -----------------------------------------------
		GLOBAL
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	.main {
		padding: 100px 30px 100px 30px;
	}
	.mobile-trigger {
		left: 30px;
	}
	.header-bar .user {
		right: 30px;
	}
	.header-breadcrumbs ul {
		padding-left: 90px;
	}
	.header-breadcrumbs ul li a {
		font-size: 11px;
	}


	/* -----------------------------------------------
		STRUCTURE
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	.wrapper {
		width: 95%;
		padding: 0 2.5%;
	}

	/* -----------------------------------------------
		LIST EMAILS
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	.search .form-row.submit {
		text-align: center;
	}
	.search .form-row.submit a.clear {
		display: inline-block;
		width: 40%;
		margin: 15px auto 0;
	}
	.search #lnkAdvancedSearch {
		margin-right: 0;
	}

	.email-list .responsive td {
		display: block;
		float: none;
	}
	.email-list .date {
		position: relative;
		top: auto;
	    -webkit-transform: none;
		-ms-transform: none;
		transform: none;

	}
    .email-list td a {
        font-size: 13px;
    }
	.email-list .clickable-rows .from,
	.email-list .clickable-rows .to,
	.email-list .clickable-rows .date,
    .email-list .clickable-rows .case,
	.email-list .clickable-rows tr td a.subject {
		float: none;		
		padding: 5px;
		z-index: 2;
		position: relative;
		width: 100%;
		white-space: normal;
	}
	.email-list .hidden {
		display: inline-block;
		vertical-align: top;
		width: 18%;
	}
	.email-list a span {
		display: inline-block;
		vertical-align: top;
		width: 70%;
	}
	.email-list .hidden.mobile-view {
		display: block;
		text-align: center;
		margin: 17px 0 0;
		color: #638ab9;
		width: 100%;
	}
    table.responsive.clickable-rows .cb {
        width: 100%;
        padding: 5px;
    }
    .email-list .clickable-rows tr td a.subject {
        margin-left: 0;
    }
    .email-list .sel-emails {
        position: absolute;
        left: 2%;
        top: 30px;
    }
    .email-list .responsive td:nth-child(2) {
    	border: 0;
    }

    /* -----------------------------------------------
		VIEW EMAILS
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
    .email-date {
        float: none;
    }
	.email-links a.button {
		display: block;
		margin: 0 auto 15px;
		max-width: 80%;
		font-size: 12px;
	}


	/* -----------------------------------------------
		CASES
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	.list-cases .content-block .title,
	.list-keywords .content-block .title {
		text-align: center;
	}
	.list-cases .content-block .title .button,
	.list-keywords .content-block .title .button {
		float: none;
		display: block;
		max-width: 180px;				
		margin: 25px auto;
	}

	/* -----------------------------------------------
		RESPONSIVE TABLES
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	.with-table .title {
		margin: 0;
	}
	table.responsive tr {
		display: block;
	}	
	table.responsive tr {
		padding: 30px 18px;
		border: 0;
        max-height: none;
	}
	table.responsive .table-header {
		display: none;
	}
	table.responsive tr.empty {
		display: none;
	}
	table.responsive td {
		display: block;
		width: auto;
		padding: 2px 10px;
		background: none;
		text-align: left;
		border-bottom: 1px solid #eee;
	}
	table.responsive tr:last-child td {
		border-bottom: 1px solid #d2d2d2;
	}
	table.responsive td:first-child {
		border: 0;
	}
	table.responsive td.options {
		padding: 8px 10px;
	}
	table.responsive td.options a {
		position: relative;
		top: 3px;
		padding: 3px 10px;
	}

	table.responsive td:last-child,
	table.responsive tr:last-child td:last-child {
		border: 0;
	}
	table.responsive.first-row-header tr:first-child,
	table.responsive thead {
		display: none;
	}
	table.responsive td .hidden {
		display: inline-block;
		font-weight: bold;
		margin-right: 18px;
		min-width: 70px;
		text-align: right;
	}

    table.responsive.clickable-rows td a {
        padding: 0;
        line-height: 1.6;
        
    }
    .email-list table.responsive tr {
        max-height: none;
    }
        .email-list table.responsive.clickable-rows td a.option {
		display: block;
		text-align: center;
		padding: 20px 0 10px;
		font-size: 18px;
	}

	#tblAttachments td {
		border: 0;
		display: inline-block;
		padding: 2px 35px 2px 0;
	}
	#tblAttachments td:last-child {
		padding-right: 0;
	}

	table.responsive.admin-table tr {
		padding: 20px;
	}

	table.responsive.admin-table td {
		
	}
	table.responsive.admin-table tr:last-child td {
		border: 0;
	}
	table.responsive.admin-table td:last-child{
		padding-right: 0;		
	}	
	table.responsive.admin-table .name {
		width: 35%;
		text-align: left;
	}



}

@media (max-width: 600px) {

}
/* Horizontal Phone */
/* SKELETON MEDIA QUERIES BREAK DOWN TO 100% */
@media (max-width: 550px) {

	/* -----------------------------------------------
		GLOBAL
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	.main {
		padding: 90px 4%;
	}
	.content-block {
		margin: 0 0 25px;
		padding: 20px 25px;
	}
	.mobile-trigger {
		left: 4%;
	}
	.header-bar .user {
		right: 4%;
	}
	.header-breadcrumbs ul {
		padding-left: 20%;
	}
	.header-breadcrumbs ul li a {
		font-size: 11px;
		padding: 15px 10px;
	}	

	h1 { font-size: 2.8rem; line-height: 1.2;}
	h2 { font-size: 2.0rem; line-height: 1.25;}
	h3 { font-size: 1.8rem; line-height: 1.3;}
	h4 { font-size: 1.6rem; line-height: 1.35;}
	h5 { font-size: 1.4rem; line-height: 1.5;}
	h6 { font-size: 1.2rem; line-height: 1.6;}
   
	.content-block .title {
		text-align: center;
	}
	.content-block .title .button {
		float: none;
		display: block;
		max-width: 180px;		
		margin: 15px auto 30px;
	}
	.content-block .title .button.small {
		
	}

	.form-row.submit {
		margin-top: 15px;
	}


	/* -----------------------------------------------
		LIST EMAILS
	–––––––––––––––––––––––––––––––––––––––––––––––––– */	
	.search .form-row.submit .button.blue,
	.search .form-row.submit .button.yellow {
		width: 46%;
		margin: 0;		
		font-size: 12px;
		height: 60px;		
		vertical-align: top;
		padding: 0 15px;			
	}
	.search .form-row.submit .button.yellow {
		display: inline-flex;
  		flex-direction: column;
  		justify-content: center;
	}
	.search .form-row.submit .button.blue {
		margin-right: 5%;
	}


	#multi-controls a {
		display: block;
		text-align: center;
		margin: 0 0 10px;
	}
	

}


/* Another breakpoint */
@media (max-width: 475px) {

	.login .form-row.submit {
		text-align: center;
	}
	.login .form-row.submit a {
		display: block;
	}
	.login .form-row.submit .button {
		margin: 0 0 20px;
	}

	.search .form-row.submit a.clear {
		width: 48%;
		font-size: 13px;
		padding: 0;
	}
	.search .search-filters a {
		display: block;
		margin: 0 0 5px;
	}

	table.responsive tr {
		padding: 20px 5px;
	}
	table.responsive td {
		padding: 2px 5px;
	}
	table.responsive td .hidden {
		min-width: 55px;
		font-size: 12px;
	}
	#multi-controls a {
		display: block;
		text-align: center;
	}
	.email-list .sel-emails {
	    top: 4px;
	    right: 12px;
	    left: auto;
	}
	.email-list .clickable-rows .from, .email-list .clickable-rows .to, .email-list .clickable-rows .date, .email-list .clickable-rows .case, .email-list .clickable-rows tr td a.subject {
		padding: 5px 0;
	}
	.email-list .pagination a.button {
		padding: 3px 10px;
		width: 40px;
	}
	.email-list .pagination a.button i {
		font-size: 14px;
		top: 0;
	}



}


/* iPhone 6 */
@media (max-width: 374px) {

	td, th {
		font-size: 11px;
	}
	table.responsive td .hidden {
		min-width: 60px;
	}
	.header-breadcrumbs li {
		font-size: 3px;
	}
	.header-breadcrumbs ul li a {
		padding: 15px 4px;
		font-size: 10px;
	}
	.email-list {
		overflow: hidden;
	}
	.email-list .pagination a.button {
		width: 30px;
	}

}


/* iPhone 4/5 */
@media (max-width: 320px) {}

