@charset "UTF-8";
/* CSS Document for mobile version */

/* ======================================================
IMPORT FONTS
====================================================== */
@import 'fonts.css';

/*======================================================
DESKTOP MEDIA QUERIES
======================================================*/

/* FOR ALL SMALLER THAN 1024PX ************************/
@media only screen and (min-width: 320px) and (max-width: 1024px) {
/* BASICS ***************** */
.toShow {
	display: none;
}
.toHide {
	display: block;
}
html, body {
	width: 100%;
	height: 100%;
	position: relative;
	font-size: 100%;
	min-width: 320px !important;
}
p {
	font-size: 85%;	
}
.header-container, .main-container, .footer-container {
	min-width: 320px;
	max-width: 1024px;	
}
.header-container, .footer-container {
	overflow: inherit;
}
/* HEADER ***************** */
.header-container {
	height: auto; 
	max-height: 100px;
	max-width: 1024px !important;
	background-color: #37246a;
	top: 0;
}
.adminHeader {
	height: 77px;
}
.header-container.thumbnailListPG {
	height: 120px;
	max-height: 120px; 
}
.headerLeft {
	width: 65%;
}
.headerRight {
	width: 35%;
}
#m_headerMenuBtn {
	float: right;
	cursor: pointer;
	font-size: 200%;
	color: #ffffff;
}
.headerRightNav, .headerNavTop {
	display: block;
	position: fixed;
	top: 0;
	background-color: #37246a;
	width: 100%;
	min-width: 256px;
	height: 100% !important;
	right: -200%; /* Must be a large value to fix iPhone zoom in glitch */
	font-size: 100%;
	text-align: left;
	z-index: 999;
}
/* Mobile menu animation */
.headerRightNav, .headerNavTop, body, .header-container, .footer-container {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.headerRightNav li, .headerNavTop li {
	float: none !important;
	display: block !important;
	line-height: normal !important;
	padding: 10px 0 10px 15px !important;
	border-bottom: #cccccc solid 1px;
}
.headerRightNav li::after, .headerNavTop li::after {
    content: "";
    display: none;
    padding-left: 0;
} 
.headerRightNav li:last-child {
	border: none;
}
.headerRightNav li a, .headerNavTop li a {
	color: #ffffff;
}
.headerRightNav.searchFieldHeader {
	top: 0;	
}
.toHide fieldset.keywordSearch {
	position: relative;
}
/* admin menu */
.adminHeaderRow {
	display: none;	
}
ul.headerRightNav li.toHide ul.adminMenu {
	margin: -10px 0 0 -15px;
	background-color: #9494d2;
	font-size: 100%;
}
ul.headerRightNav li.toHide ul.adminMenu li {
	display: block;
	width: 100%;
	padding: 0 !important;
}
ul.headerRightNav li.toHide ul.adminMenu li a {
	display: block;
	padding: 10px 0 10px 15px;
}
ul.headerRightNav li.toHide ul.adminMenu li ul.adminSubMenu {
	position: relative;
	top: 0;
	background-color: #000000;
}
ul.headerRightNav li.toHide ul.adminMenu li ul.adminSubMenu li {
	border-bottom: 1px dashed #ffffff;
	padding: 5px 0 5px 15px !important;
}
ul.headerRightNav li.toHide ul.adminMenu li ul.adminSubMenu li:last-of-type {
	border: none;
}
ul.headerRightNav li.toHide ul.adminMenu li ul.adminSubMenu li a {
	padding: 0;
	color: #ffffff;
}
ul.headerRightNav li.toHide ul.adminMenu li ul.adminSubMenu li:after {
	content: "";
    display: none;
    padding-left: 0;
}
ul.headerRightNav li.toHide ul.adminMenu li ul.adminSubMenu li ul.adminSubMenuDeep {
	display: block;
	background-color: #000000;
}
ul.headerRightNav li.toHide ul.adminMenu li ul.adminSubMenu li ul.adminSubMenuDeep li {
	border: none;
}
ul.headerRightNav li.toHide ul.adminMenu li ul.adminSubMenu li ul.adminSubMenuDeep li:after {
	content: "";
    display: none;
    padding-left: 0;
}
ul.headerRightNav li.toHide ul.adminMenu li ul.adminSubMenu li ul.adminSubMenuDeep li a {}
/* FOOTER ***************** */
.footer-container {
	bottom: 0;
	min-height: 40px;
}
.footer-container.noFixFooter {
	position: relative;
}
.footer-container .top {
	height: 30px;
	background-color: #37246a;
}
.footer-container .bottom {}
.footer-container .bottom p {
	text-align: left;
	font-size: 65% !important;
}
.footerLeft {
	width: 25%;
}
.footerRight {
	width: 75%;
	float: left;
}
#m_footerMenuBtn {
	padding: 5px 0 0 10px;
	cursor: pointer;
	font-size: 150%;
	color: #ffffff;
}
ul.footerMenu li::after {
    content: "";
    display: inline-block;
    padding-left: 0;
} 
ul.footerMenu li a {
	color: #ffffff;
}
.footerMenu {
	display: none;
	margin: 0 !important;
	padding: 0 !important;
	position: absolute;
	left: 0;
	bottom: 85px;
	background-color: #37246a;
	color: #ffffff;
	list-style: none;
	width: 85%;
	min-width: 256px;
	max-width: 275px;
	font-size: 85% !important;
	text-align: left !important;
	z-index: 999;
}
.footerMenu li {
	padding: 10px 0 10px 15px !important;
	border-bottom: #cccccc solid 1px;
	display: block !important;
}
.footerMenu li a {
	color: #ffffff;
}

/* CONTENT ***************** */
.main-container {
	width: 100%;
	border: none !important;
	max-width: 1024px !important;
	min-height: 200px;
	background-color: #ffffff;
}
.wrapper {
	width: 100%;
}
.main {
	margin: 0 auto 0 auto;
	padding: 0 !important;
	width: 97%;
	height: 100%;	
}
.adminPG, .nonAdminPG {
	margin-bottom: 30px;
}
.adminPgCol {
	width: 95%;
	margin: 0 0 0 10px !important;
}

/* FIELDSET ***************** */
fieldset, fieldset.adminForms1Column, fieldset.query4report, 
fieldset.popUp, fieldset.customqueryList {
	margin: 0 auto;
	float: none;
	overflow: hidden;
	width: 100%;
}

/* Login Page, Landing Page, Registration Page ******************************************* */
body.loginPage, body.landingPG, body.registrationPG {
	background-color: #37246a;
	background-image: none;
}
div.loginPage, div.landingPG, div.registrationPG {
	background-color: #37246a;
}
div.loginPage .top, div.loginPage .bottom, div.loginPage .top .inner, div.loginPage .bottom .inner, 
div.registrationPG .top, div.registrationPG .top .inner, div.registrationPG .term .inner {
	width: 100%;
	margin: 40px 0 0 0;
	padding: 0;
}
div.loginPage .top, div.loginPage .bottom, div.loginPage .term {
	background-color: transparent;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
}
fieldset.login, fieldset.registration {
	width: 90%;	
}
fieldset.login h1 {
	margin: 40px 0 5px 0;
}
fieldset.login p {
	padding-bottom: 5px;
}
fieldset.login input {
	margin-bottom: 15px;
}
div.landingPG {
	width: 100% !important;
}
div.landingPG .main {
	padding: 0 !important;
	width: 100% !important;
}
ul.landingPGMenu {
	margin: 0 auto;
	width: 95%;
	font-size: 100%; /* rest to default font size */
	border: 1px solid #cccccc;
}
ul.landingPGMenu li p {
	padding: 15px 5px 15px 20px;
	font-size: 120% !important;
}
ul.landingPGMenu li ul {
	font-size: 110%;
}
ul.landingPGMenu li ul li a {
	padding: 10px 0 10px 20px;
}
fieldset.registration {
	max-width: 400px;
}
/* End of Login Page, Landing Page ******************************************* */

/* Page Styles ************************** */
/* Thumbnail List Pages */
.thumbnailListTabs ul {
	font-size: 100%;	
}

/* Report Pages */
.section2Columns {
	width: 100%;
	margin: 0;
}
.section2Columns:nth-of-type(even) {
	margin-top: 15px;	
}
div.section.wideTable .listTable {
	width: 1000px;
}
/* Admin Pages */
p.uploadSection label, p.uploadSection input[type="file"], p.uploadSection span {
	width: 95%;
	margin-top: 8px;
	display: block;	
}
.legalsCol {
	width: 100%;
	margin: 0 0 15px 0;	
}
}

/* FOR SMALLER THAN 1024PX BUT LARGER THAN 768PX *******************/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
/* BASICS **************** */
html, body {
	min-width: 768px;
	max-width: 1024px;
}
.siteLogo {
	width: 350px;
}
.main-container {
	padding: 77px 0 70px 0;
}
.main-container.adminPG {
	padding: 90px 0 70px 0;	
}
.main-container.thumbnailListPG {
	padding: 120px 0 70px 0;
}
.headerRightNav.active, .headerNavTop.active {
	right: -50%;
	overflow-y: scroll;
	overflow-x: hidden;
}
#m_headerMenuBtn {
	padding: 0 10px 0 0;
}
body.active, .header-container.active, .footer-container.active {
	left: -50%;
}
.footerMenu {
	bottom: 70px;	
}
/* ATT Login Page, Landing Page ******************************************* */
fieldset.login {
	width: 60%;	
}
ul.landingPGMenu {
	margin: 30px auto 0 auto;
	width: 60%;
	max-width: 460px;
}
ul.landingPGMenu li ul {
	width: 100%;
}
ul.attDarkBlue li:last-child {
	border-bottom: none !important;
}
/* Eod of ATT Login Page, Landing Page ******************************************* */

/* FIELDSET ************* */

/* Page Styles ************************** */
/* Thumbnail List Pages */
.thumbnailListTabs ul li {
	width: 19.5%;
	margin-top: 2px;	
}
div.thumbnailListLevelPane {
	width: 38%;
}
div.thumbnailListContent {
	width: 58%;
}
ul.thumbnailCube {
	width: 40%;
}
div.thumbnailListContent .listRow {
	border-bottom: none !important;
}

/* Content Delivery Page */
.contentDeliveryLeftCol {
	width: 40%;
	margin: 0;
}
.contentDeliveryRightCol {
	width: 48%;
	padding: 20px;
	margin-left: 40px;
}
fieldset.contentRpt {
	margin: 0;
}
fieldset.iruPreload {
	margin: 0;
	width: 90%;
}
/* End of Content Delivery Page */

/* Admin pages */
fieldset.adminForms2Column {
	width: 46%;
	overflow: hidden;
	margin: 0 15px 0 0;
}
fieldset.adminForms2Column:nth-of-type(2) {
	margin: 0 0 0 35px;	
}

/* End of Admin pages */


/* Needed for user create page - user role select box */
div.userRolesSelect {
	overflow: hidden !important;	
}
fieldset.userRolesSelect {
	overflow: visible !important;
}
}

/* FOR SMALLER THAN 767PX BUT LARGER THAN 480PX ***/
@media only screen and (min-width: 481px) and (max-width: 767px) {
/* BASICS ******************* */
html, body {
	min-width: 481px;
	max-width: 767px;
}
.siteLogo {
	max-width: 320px;
}
.header-container {
	height: 73px; 
}
.header-container.thumbnailListPG {
	height: 120px; 
	max-height: 120px; 
}
.main-container {
	padding: 100px 0 70px 0;
}
.main-container.adminPG {
	padding: 100px 0 70px 0;	
}
.main-container.thumbnailListPG {
	padding: 120px 0 70px 0;
}
.headerRightNav.active, .headerNavTop.active {
	right: -25%;
	overflow-y: scroll;
	overflow-x: hidden;
}
#m_headerMenuBtn {
	padding: 0 10px 0 0;
}
body.active, .header-container.active, .footer-container.active {
	left: -75%;
}
.footerMenu {
	bottom: 85px;	
}
/* FIELDSET ******************* */

/* Page Styles ************************** */
/* Thumbnail List Pages */
.thumbnailListTabs ul li {
	width: 32%;
	margin-top: 2px;	
}
div.thumbnailListLevelPane {
	width: 100%;
}
div.thumbnailListLevelPane .inner {
	width: auto;	
}
fieldset.thumbnailListLevelPane input[type="button"], 
fieldset.thumbnailListLevelPane input[type="submit"] {
	display: inline-block;
}
div.thumbnailListContent {
	width: 100%;
	margin: 10px 0 0 0;
}
ul.thumbnailCube {
	width: 40%;
}
div.thumbnailListContent .listRow {
	border-bottom: none !important;
}
/* RSVP status table */
.rsvpStatusTable, .rsvpStatusTable thead, 
.rsvpStatusTable tbody, .rsvpStatusTable tr, 
.rsvpStatusTable td {
	display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
.rsvpStatusTable th {
	position: absolute;
	top: -9999px;
	left: -9999px;
}
.rsvpStatusTable tr {
	border: 1px solid #d2d2d2;
	margin-bottom: 5px;	
}
/* Reset thead row style */
.rsvpStatusTable thead tr {
	border: none;
	margin-bottom: none;
}
.rsvpStatusTable td {
	/* Behave  like a "row" */
	border: none;
	border-bottom: 1px solid #eeeeee; 
	position: relative;
	padding-left: 40%; 
	width: 100% !important;	
	min-height: 10px;
	overflow: hidden;
}
/* Reset padding for 1st child */
.rsvpStatusTable th:first-child, .rsvpStatusTable td:first-child {
	padding-left: 40%;
}
.rsvpStatusTable td:before {
	/* Now like a table header */
	position: absolute;
	/* Top/left values mimic padding */
	top: 8px;
	left: 8px;
	width: 30%; 
	padding-right: 10px; 
	white-space: nowrap;
	color: #ea7400;
}
/* labeling data */
.rsvpStatusTable td:nth-of-type(1):before { content: "Date"; }
.rsvpStatusTable td:nth-of-type(2):before { content: "Recipient"; }
.rsvpStatusTable td:nth-of-type(3):before { content: "Information"; }
.rsvpStatusTable td:nth-of-type(4):before { content: "Status"; }
.rsvpStatusTable td:nth-of-type(5):before { content: "Follow Up Notes"; }
.rsvpStatusTable td:nth-of-type(6):before { content: ""; /* No label for last td because of the clickable link */}
/* End of RSVP status table */

/* IRU Preload Pages */
fieldset.iruPreload {
	width: 100%;	
}
/* End of IRU Preload Pages */

/* Content Delivery Page */
.contentDeliveryLeftCol {
	width: 100%;
	margin: 0;
}
.contentDeliveryLeftCol textarea {
	height: 180px;	
}
.contentDeliveryRightCol {
	width: 95%;
	margin: 15px 0 0 0;
	padding: 10px;	
	border: none;
}
.contentDeliveryRightCol .contentDeliveryAssetInfo {
	margin-left: 10px;
}
.contentDeliveryRightCol .contentDeliveryAssetInfo h4 {
	padding-top: 15px;
}
fieldset.contentRpt {
	width: 100%;	
}
/* End of Content Delivery Page */

/* Report pages */
fieldset.report h2 {
	width: 90%;
}
.listTable.status {
	width: 80%;
}

/* End of Report pages */

/* Admin pages */
fieldset.adminForms2Column, fieldset.adminForms2Column:nth-of-type(2) {
	margin: 0 auto;
	width: 100%;
	overflow: hidden;
}

/* End of Admin pages */


/* Needed for user create page - user role select box */
div.userRolesSelect {
	overflow: hidden !important;	
}
fieldset.userRolesSelect {
	overflow: visible !important;
}
.ui-datepicker {
	position: absolute !important;
}
}

/* FOR SMALLER THAN 480PX ************************/
@media only screen and (min-width: 320px) and (max-width: 480px) {
/* BASICS ******************** */
html, body {
	min-width: 320px;
	max-width: 480px;
}
.header-container {
	height: 62px; 
}
.header-container.thumbnailListPG {
	height: 105px; 
	max-height: 105px; 
}
.headerNav {
padding: 7px 0 0 0;	
	}
.siteLogo {
	width: 235px;
	height: auto;	
}
.main-container {
	padding: 70px 0 80px 0;
}
.main-container.adminPG {
	padding: 70px 0 80px 0;	
}
.main-container.thumbnailListPG {
	padding: 105px 0 20px 0;
}
.headerRightNav.active, .headerNavTop.active {
	right: -25%;
	overflow-y: scroll;
	overflow-x: hidden;
}
#m_headerMenuBtn {
	padding: 0 10px 0 0;
}
body.active, .header-container.active, .footer-container.active {
	left: -75%;
}

/* FIELDSET ****************** */

/* Needed for user create page - user role select box */
div.userRolesSelect {
	overflow: hidden !important;	
}
fieldset.userRolesSelect {
	overflow: visible !important;
}
	fieldset.login h1, fieldset.registration h1 {
    margin: 20px 0 5px 0;
}
	fieldset.login input {
	margin-bottom: 5px;
}
.ui-datepicker {
	position: absolute !important;
}

/* Page Styles ************************** */
/* Thumbnail List Pages */
.thumbnailListTabs ul li {
	width: 49%;
	margin-top: 2px;	
}
.thumbnailListView {
	text-align: left;
}
div.thumbnailListLevelPane {
	width: 100%;
}
div.thumbnailListLevelPane .inner {
	width: auto;	
}
div.thumbnailListLevelPane .inner p:first-child {
	width: auto;
}
fieldset.thumbnailListLevelPane input[type="button"], 
fieldset.thumbnailListLevelPane input[type="submit"] {
	display: inline-block;
}
div.thumbnailListContent {
	width: 100%;
	margin: 10px 0 0 0;
}
ul.thumbnailCube {
	width: 95%;
	margin: 15px 0 0 0;	
}
ul.thumbnailCube li.assetActions input[type="button"] {
	font-size: 115%;
	width: 115px;	
}
div.thumbnailListContent .listRow {
	border-bottom: none !important;
}

/* RSVP status table */
.rsvpStatusTable, .rsvpStatusTable thead, 
.rsvpStatusTable tbody, .rsvpStatusTable tr, 
.rsvpStatusTable td {
	display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
.rsvpStatusTable th {
	position: absolute;
	top: -9999px;
	left: -9999px;
}
.rsvpStatusTable tr {
	border: 1px solid #d2d2d2;
	margin-bottom: 5px;	
}
/* Reset thead row style */
.rsvpStatusTable thead tr {
	border: none;
	margin-bottom: none;
}
.rsvpStatusTable td {
	/* Behave  like a "row" */
	border: none;
	border-bottom: 1px solid #eeeeee; 
	position: relative;
	padding-left: 40%; 
	width: 100% !important;
	min-height: 10px;	
	overflow: hidden;
}
/* Reset padding for 1st child */
.rsvpStatusTable th:first-child, .rsvpStatusTable td:first-child {
	padding-left: 40%;
}
.rsvpStatusTable td:before {
	/* Now like a table header */
	position: absolute;
	/* Top/left values mimic padding */
	top: 8px;
	left: 8px;
	width: 30%; 
	padding-right: 10px; 
	white-space: nowrap;
	color: #ea7400;
}
/* labeling data */
.rsvpStatusTable td:nth-of-type(1):before { content: "Date"; }
.rsvpStatusTable td:nth-of-type(2):before { content: "Recipient"; }
.rsvpStatusTable td:nth-of-type(3):before { content: "Information"; }
.rsvpStatusTable td:nth-of-type(4):before { content: "Status"; }
.rsvpStatusTable td:nth-of-type(5):before { content: "Follow Up Notes"; }
.rsvpStatusTable td:nth-of-type(6):before { content: ""; /* No label for last td because of the clickable link */}
/* End of RSVP status table */

/* IRU Preload Pages */
fieldset.iruPreload {
	width: 100%;	
}
/* End of IRU Preload Pages */

/* Content Delivery Page */
.contentDeliveryLeftCol {
	width: 100%;
	margin: 0;
}
.contentDeliveryLeftCol textarea {
	height: 180px;	
}
.contentDeliveryRightCol {
	width: 97%;
	margin: 15px 0 0 0;
	padding: 10px 5px;	
	border: none;
}
.contentDeliveryRightCol .contentDeliveryAssetInfo {
	margin-left: 10px;
}
.contentDeliveryRightCol .contentDeliveryAssetInfo h4 {
	padding-top: 15px;
}
fieldset.contentRpt {
	width: 100%;	
}
/* End of Content Delivery Page */

/* Report pages */
fieldset.report h2 {
	width: 100%;
}
.listTable.status {
	width: 100%;
}
/* End of Report pages */

/* Admin pages */
fieldset.adminForms2Column, fieldset.adminForms2Column:nth-of-type(2) {
	margin: 0 auto;
	width: 100%;
	overflow: hidden;
}

/* End of Admin pages */
}

/* ==========================================================
EXTRA - DEVICE SPECIFICS
(Keep it blank if no special styles needed!)
============================================================= */
@media only screen and (min-width: 320px) and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 1) {
}

/* iPad mini (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
}

/* iPad 2 (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
}

/* iPad 2 (landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
}

/* iPad 2 (portrait) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
}

/* iPad 3 (landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
}

/* iPad 3 (portrait) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
}

/* iPhone 4 (landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
}

/* iPhone 4 (portrait) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
}

/* iPhone 5 (landscape) ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
}

/* iPhone 5 (portrait) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
}

/* iPhone 6 (landscape) ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
}

/* iPhone 6 (portrait) ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
}

/* iPhone 6+ (landscape) ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
}

/* iPhone 6+ (portrait) ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
}

/* Samsung Galaxy S3 (landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
}

/* Samsung Galaxy S3 (portrait) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
}

/* ===========================================================================================
Extra styles for other tricky mobile devices
============================================================================================== */
/* for LG Optimus G, Google Nexus 4, Blackberry Z10 */
@media only screen and (min-device-width: 384px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
}