/* CSS Document */

/* Table of Contents
==================================================

    #Tablet (Portrait)
    #Mobile (Portrait)
    #Clearing */

/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 650px) and (max-width: 800px) {
		
	
	/* Main Structural Styles =================== */
	
	.container  { 
		background: url("/images/template/base-level-5-bg.jpg") repeat-x;
	}
	
	#content {
		width:100%;
	}
	
	#audience, .noMobile {display: none !important;}
	
	#masthead {
		height:default;
		width:100%;
		margin:0;
		padding:0;
	}
	
	#logo {
		position:absolute;
		top:15px;
		left:15px;
	}

    .socialMedia {
		width:40px;
	}
		
	#page, #page.two {
		width: 100%;
		padding:0;
		margin:0 0 20px 0;
	}
	
	.breadcrumbNav {
		display:none;
	}
	
	.introduction {
		width:96%;
		margin:0 2%;	
	}
	
	
	.columns.alpha {
		margin-left:10px;
	}
	
	#page-footer {
		position:relative;
		width: 96%;
		margin: 0;
		padding: 0 2%;
		background:none;
		background:#93191b;
		height:120px;
	}
	
	#page-footer ul li {
		display:inline-block;
		text-align:left;
		font-size:12px;
		padding:10px;
	}
	
	
	/* Supporting Structural Styles =================== */
	
	.tinynav { display: block }
    
	.directoryNav #subject { display: none }

	.secondaryNav {
		display:none;
	}
	
	/* Images ===================  */
	
	.introduction img, #page-primary img, #secondary img {
		max-width: 100%;
		height: auto;
	}

	.trucaptcha img { 
		width:inherit !important;
		height:inherit !important;
		max-width:inherit !important;
	}
	
	/* Forms ===================
	#search input {
		width: 100px;
	} */
	
	
	/* Superfish Navigation Restructure =================== */
	
	.subjectNav {
		width:100%;
	}
		
	.subjectNav #subject {
		width:96%;
		margin:0 3%;
		padding:0;
		}
	
		
	.subjectNav #subject li {
		width:16%;
		margin:0;
		padding:0;
	}
	
	.subjectNav #subject li a {
		width:100%;
		padding:0;
		margin:0;
	}
	
	
	.subjectNav #subject li.parent {
		display:none;
	}
	
	.subjectNav #subject a {
		display: block;
		border:none;
		border-left: 1px solid #ccc;
		padding: 0 0 0 10px;
		margin:1px 0 0 0;
		text-align:center;
		font-size:10px;
		line-height:24px;
		background: none;
	}
	
	.subjectNav #subject a, .subjectNav #subject a:visited  {
		color: #666;
	}
	
	.subjectNav #subject li a.on, .subjectNav #subject li a:hover {
		 color: #93191B;
		}
		
	.subjectNav #subject a:hover {
		text-decoration:none;
		background: #eee;
		}
		  
	.subjectNav ul li ul {
		border-right:1px solid #999;
		border-bottom:1px solid #999;
		border-left:1px solid #999;
		background: #fff;
		text-transform:none;
		width:100%;
	}
	
	.subjectNav #subject li ul li a {
		background: #fff;
		color: #666;
		display: block;
		width: 100%;
		padding:5px 5px;
		margin:0;
		font-size:10px;
		text-align:left;
		text-decoration:none;
		font-family:Verdana,sans-serif;
		font-weight:normal;
		border:0;
		line-height:20px;
	}
		
	.subjectNav #subject li:last-child {
		border-right:1px solid #ccc;
	}
	
	.subjectNav #subject li:hover ul,
	.subjectNav #subject li.sfHover ul {
		left:			0;
		top:			25px; /* match top ul list item height */
		z-index:		99;
	}
	
	.subjectNav #subject .listFirst {
		padding:10px;
	}
	
	.subjectNav #subject li:last-child {
		width:100%;
	}
	
	.subjectNav .icon {
		display:none;
	}

        
}

/*  #Mobile (Portrait)
============================================================================ */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 650px) {
       
	
	/* Main Structural Styles =================== */

	.container, body  { 
		background:none;
	}
	
	.column.half  {  width:48.5%; } 
	.column.twothirds, .column.third, .column.third, .column.alpha.third, .column.omega.third, .column.alpha.omega.third {  width:100%; }
	.column.half img, .column.twothirds img, column.third img {
		width:100%;
		height:auto;
	}
	
	#content {
		width:100%;
		padding:0;
	}
	
	#audience, .socialMedia, .noMobile {display: none !important;}
	
	select#tinynav1 {
		top:10px;
		right:5px;
		width:115px;
		background:#ccc;
	}
	
	#masthead {
		height:80px !important;
		width:100%;
		margin:0px 0 0 0;
		padding:0;
		background:#AA003E; /* cmyk main red red */
		background:#7C211E; /*pantone 1815c - supporting red */
		background:#7D0C00; /*cmyk 0.90.100.51 - supporting red */
	}
	
	#logo {
		position:absolute;
		top:10px !important;
		left:15px;
		background: url(/images/template/scu-home-rd.png) no-repeat;
		height:70px;
		width:200px;
	}
	
	#logo img {
		display:none;
	}
	
	#logo #linkseal {
		display:block;
		position:absolute;
		top:0;
		height:60px;
		width:158px;
	}
	
	#search {
		top:10px !important;
		display:block;
		width: 120px;
		}
		
	#search div {
		display:none;
	}
	
	#search .searchText {
		border:none;
		background:#ccc url(/images/icon/glyphish/mini/mini-gray/01-magnify.png) no-repeat;
		background-size:13px;
		background-position:right;
		background-position:98px 2px;
		font-size:11px;
		color:#000;
		width:110px;
	}
	
	#search .searchSubmit {
		color:#ececec;
		font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
		font-size:10px;
		display:none;
	}
		
	#page {
		width: 100%;
		padding:0;
		margin:0;
	}
	
	.breadcrumbNav, .secondaryNav {
		display:none;
	}
	
	.introduction, .container.level-5 .introduction {
		width:100%;
		margin:0;
		padding:0;
		overflow:hidden;
	}
	
	.introduction h2 {
		margin-left:10px;
	}
	
	.introduction img {
		width:100%;
		height:auto;
	}
	
	.columns.alpha {
		margin-left:10px;
	}
	
	#page.two, #page.three {
		width:100%;
		}
		
	#page-primary {
	 	width:94%;
		margin:0 3% 3% 3%;
	 }

	 #page-primary.two, #page-primary.three {
	 	width:94%;
		margin:0 3% 3% 3%;
	 }
	 
	 #page-primary .image-inset-left, #page-primary .image-inset-right {
	 	width:45%;
	 }

	.featuregrid table, 
	.featuregrid thead, 
	.featuregrid tbody, 
	.featuregrid th, 
	.featuregrid td, 
	.featuregrid tr,
	.CS_Layout_Table,
	.CS_Layout_TR,
	.CS_Layout_TD,
	.grid th,
	.grid td { 
		display: block;
		width:100%;
		text-align:left;
	}
	
	table.CS_Layout_TD {
	display:block;
	}
	
	.rd-container {
	    position: relative;
	    padding-bottom: 56.25%;
	    padding-top: 30px; height: 0; overflow: hidden;
	}
	
	.rd-container iframe,
	.rd-container object,
	.rd-container embed {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	}
	
	select, textarea {
		max-width:300px;
	}
	
	
	#secondary {
		width:100%;
		margin:0;
		padding:3%;
		background:#eee;
	}
	
	#page-footer {
		position:relative;
		width: 94%;
		margin: 0;
		padding: 3%;
		background:none;
		background:#c9c9c9;
		height:100px;
	}
	
	#page-footer ul li {
		display:inline-block;
		width:30%;
		text-align:left;
		font-size:12px;
		padding:5px 0;
	}
	
	#page-footer ul li a{ 
		color:#333;
	}
	
	#page-footer address, #page-footer #est1851 {
		display:none;
	}
	
	/* Supporting Structural Styles =================== */
	
	.tinynav { 
		display: block;
		position:absolute;
		top:10px;
		margin:0;
		padding:0;
		border:0;
		right:10px;
		width:50%;
		font-size:12px;
		background:#ececec;
		}
		 
    #subject { display: block; }

	.directoryNav { margin:0; width:100%; }
	
	.directoryNav .CS_Element_Textblock { float:left; }
	
	.directoryNav #subject { display:none; }
	
	.directoryNav .bannerNav {
		position:absolute;
		bottom:-130px; 
		left:8px;
		z-Index:10;
		
	}
	
	.directoryNav .bannerNav img {
		display:inline-block;
		width:20px;
		height:auto;
	}
	
	/* Images =================== */
	
	#page-primary img, #secondary img {
		max-width: 100%;
		height: auto;
	}
	
	.rslides img {
		width:100% !important;
	}
	
	.trucaptcha img { 
		width:inherit !important;
		height:inherit !important;
		max-width:inherit !important;
	}
	
	/* Forms =================== */

	/* Superfish Navigation Restructure */

        .subjectNav {
				width: 100%;
				margin: 0;
				padding: 0;
                position: relative;
				background: #999;
        }
 
        /* menu icon */
        #menu-icon {
                width: 60px;
                padding: 10px 0 10px 30px;
                margin-left:10px;
                cursor: pointer;
                width:100%;
				background: url(/images/icon/glyphish/259-list-w.png) no-repeat left center;
                display: block; /* show menu icon */
        }
		
		#menu-icon { /*font styling for Menu button */
			color: #fff;
			font: normal 16px/16px Verdana, Geneva, Arial, Helvetica, sans-serif;
			text-transform:uppercase;
		}
			
		
        #menu-icon:hover {
				/*background: #760c16 url(../images/bg-nav-arrow-down.png) no-repeat right center;*/
                color: #fff;
        }
		
        #menu-icon.active {
                color: #fff;
				/*background: #760c16 url(../images/bg-nav-arrow-up.png) no-repeat right center;*/
        }
 
        /* main nav */
        .subjectNav #subject {
                clear: both;
                position: relative;
                width: 100%;
                padding: 0;
                background: #eee;
                display: none; /* visibility will be toggled with jquery */
        }
        .subjectNav #subject li {
                clear: both;
                float: none;
				border-bottom: 1px solid #999;
                padding: 10px;
                height:default;
		}
		
		
		.subjectNav #subject li ul li {
			border: none;
			padding: 0;
		}
		
		.subjectNav #subject li ul li a {
			background:none;
			font: normal 14px/14px Verdana, Geneva, Arial, Helvetica, sans-serif;
			color: #333;
		}
		
		.subjectNav #subject li li:hover {
			background: none;
			text-decoration: underline;
		}
		
        .subjectNav #subject a,
        .subjectNav #subject ul a {
                font: normal 14px/15px Verdana, Geneva, Arial, Helvetica, sans-serif;
                background: none;
                display: inline-block;
                color: #333;
                border: none;
                padding:0;
                width:100%;
                text-align:left;
                }
        .subjectNav #subject a:hover,
        .subjectNav #subject ul a:hover {
                background: none;
                color: #93191b;
		}
		
		.subjectNav #subject li ul {
				background: none;
		}
		
		
		.subjectNav #subject li:hover ul.short-nav,
		.subjectNav #subject li.sfHover ul.short-nav {
			border: none;
			text-decoration: none;
			background: none;
		}
		.subjectNav #subject li ul.short-nav li {
			border-top: none;;
		}
		
		.subjectNav #subject li li:first-child, .subjectNav #subject li ul.short-nav li:first-child {
			margin-top: 8px;
		}
		
		
 
        /* dropdown */
        .subjectNav #subject ul {
                width: auto;
                position: static;
                display: block;
                border: none;
                background: inherit;
        }
        .subjectNav #subject ul li {
                margin: 3px 0 3px 15px;
        }
	
		.subjectNav .icon {
			display:none;
		}
	
	
	/* #Clearing
================================================== */

    /* Self Clearing Goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }
	
}

/* handles SCU logo display on smartphone portrait view */
@media only screen and (max-width: 479px) {
	
	.container {
		background:none !important;
	}
	
	
	#page-footer {
		height:140px;
	}
	
	#page-footer ul li {
		display:inline-block;
		width:47%;
		text-align:left;
		font-size:12px;
		padding:5px 0;
	}

	.image-inset-right {
		float:right;
		margin:10px 0;
	}
	
	.image-inset-left img, .image-inset-right img {
		min-width:75px;
	}

	
	.ui-tabs .ui-tabs-nav {
		margin:0;
		padding:0;
		font-size:smaller;
	}
	
	.ui-tabs .ui-tabs-panel {
		padding:0;
	}
	
	.ui-tabs .featblock {
		display:none;
	}
	
}
	

 
@media only screen and (min-width: 650px) {
 
        /* ensure #nav is visible on desktop version */
        .subjectNav {
                display: block !important;
        }
 
}