/*  ==========================================================================
	Secondary page stylesheet for USF Enterprise CMS
	Author: Charlotte Koh, USF University Communications and Marketing
	Author URL: http://www.usf.edu/ucm/
    ==========================================================================  */

/*  ==========================================================================
	Global Elements
    ==========================================================================  */
   
.side-content:before, .side-content:after, .info-section:before, .info-section:after {
    content:"";
    display:table;
}
.side-content:after, .info-section:after {
    clear:both;
}
.side-content, .info-section {
    *zoom:1;
}


/*  ==========================================================================
	Page Title
    ==========================================================================  */
	
.page-title-holder {
	position: relative;
}
.page-title-img {
	width: 100%;
}
.page-title-text, .page-title-plain-text {
	margin-bottom: .1em;
	padding-bottom: .25em;
	border-bottom: 1px solid #dcddde;
	color: #057b56;
	font: 3em/1em Garamond, "Times New Roman", serif;
}


/*  ==========================================================================
	Breadcrumbs
    ==========================================================================  */
	
.breadcrumbs {
	margin: 0 auto 1.5em;
}
.breadcrumbs ul {
	margin-left: 0;
}
.breadcrumbs li {
	display: inline;
	color: #999;
	font-size: .9em;
	line-height: 1.667em;
}
.breadcrumbs a {
	font-weight: normal;
}
.page-title-plain-holder + .breadcrumbs {
	margin-bottom: 3em;
}


/*  ==========================================================================
	Side Column
    ==========================================================================  */
	
.side-content, .side-content-image, .secondary-navigation {
	margin-bottom: 1.5em;
}
.side-content-image {
	max-width: 100%;
}

	
/* 	Secondary Navigation
    ==========================================================================  */

.secondary-navigation ul {
	margin-left: 0;
	list-style: none;
}
.secondary-navigation li, .secondary-navigation .collapsible-heading {
	margin-bottom: .5em;
	background: #f7f7f7 url("../images/global/elements/grey-arrow.png") no-repeat right center;
	border-bottom: .077em solid #dcddde;
	-webkit-transition: background 0.2s ease-in-out;
	-moz-transition: background 0.2s ease-in-out;
	-o-transition: background 0.2s ease-in-out;
	transition: background 0.2s ease-in-out;
}
.secondary-navigation .collapsible-heading {
	background-image: none;
}
.secondary-navigation .collapsible-heading a {
	background: url("../images/global/elements/toggle-sprite.png") right -82px no-repeat;
}
.secondary-navigation .collapsible-heading-collapsed a {
	background: url("../images/global/elements/toggle-sprite.png") right 14px no-repeat;
}
.secondary-navigation a, .secondary-navigation a:visited {
	padding: .75em 3em .75em 1em;
	display: block;
	color: #057b56;
	line-height: 1.5em;
}
.secondary-navigation a.active {
	color: #7fb539;
}
.secondary-navigation li:hover {
	background-color: #eee;
}
.secondary-navigation a:focus {
	color: #7fb539;
}
.no-js .secondary-navigation .toggle {
	display: none;
}
	

/*  ==========================================================================
	Main Content
    ==========================================================================  */

.content-main, .introduction {
	margin-bottom: 3em;
}


/* 	Info Sections and Search Results
    ==========================================================================  */
	
.info-section {
	padding-top: 1.5em;
	border-top: .077em solid #dcddde;
}
.content-title + .info-section {
	border-top: none;
	padding-top: 0;
}
.search-headline {
	margin-bottom: 1.25em;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.25em;
}
.info-section-links {
	margin: 0 0 1.5em 0;
	padding-left: 1.5em;
	list-style-type: disc;
	color: #7fb539;
}
.info-section-directory {
	width: 66%;
	float: left;
}
.info-section-headshot {
	width: 23%;
	max-width: 107px;
	float: right;
}
.search-section-headline {
	margin-top: 2.5em;
}


/* 	Search List
    ==========================================================================  */

.search-list {
	width: 100%;
	margin-bottom: 1em;
}
.search-list li {
	width: 25px;
	float: left;
}
.content-search {
	background-color: #f1f2f2;
	border: 1px solid #e6e7e8;
	position: relative;
}
#content-search-input {
   width: 90%;
   padding: .5em;
   background: none;
   border: none;
   color: #314942;
}
.content-search-button {
	width: 14px;
    height: 14px;
    position: absolute;
    top: 7px; 
    right: 7px;
}


/* 	Visit Widget
	==========================================================================  */
	
.visit-widget-search {
	max-width: 320px;
}
#visit-widget-search-input {
    width:79%;
	height: 18px;
    padding:5px;
	float: left;
    background-color:none;
	border: 1px solid #ccc;
	border-right: none;
    color: #666;
}
.search-list-input:active,
.search-list-input:focus {
    outline:none;
    cursor:text;
}
.visit-widget-search-button{
	width: 15%;
	height: 30px;
	float: left;
	background-color: #0e7b5b;
	border: none;
	color: #fff;
	cursor: pointer;
	font-weight: bold;
	text-transform: uppercase;
}


/* 	Tables
    ==========================================================================  */

table { 
	width: 100%; 
	margin-bottom: 1.5em;
	table-layout: fixed;
}
caption {
	padding: .625em; 
	font-weight: bold;
	font-size: 1.2em; 
	line-height: 1.25em;
	text-align: left;
}
thead th {
	border-bottom: 3px solid #DCDDDE;
}
tr + tr td {
	border-top: 1px solid #DCDDDE;
}
th, td {
	padding: .813em;
	text-align: left;
}
th {
	font-weight: bold;
}
.table-striped tbody tr:nth-child(odd), .table-bordered-striped tbody tr:nth-child(odd) {
	background-color: #ECEDED;
}
.table-striped td, .table-striped tbody th {
	border: 2px solid #fff;
}
.lt-ie9 .table-striped td {
	border: none;
	border-top: 1px solid #DCDDDE;
}
.table-bordered, .table-bordered-striped {
	border: 1px solid #DCDDDE;
}
.table-bordered td + td, .table-bordered thead th + th, .table-bordered-striped td + td, .table-bordered-striped thead th + th {
	border-left: 1px solid #DCDDDE;
}


/* 	Tables - Responsive
    ==========================================================================  */
.responsive-table, .responsive-table caption, .responsive-table thead, .responsive-table tbody, .responsive-table tr, .responsive-table th, .responsive-table td {
	display: block;
}
.responsive-table thead, .responsive-table thead th {
	width:1px;
	height:1px;
	position:absolute;
	left:-9999px;
	top:auto;
	overflow:hidden;
}
.responsive-table tr:before, .responsive-table tr:after {
	content: '';
	display: table;
}
.responsive-table tr:after {
	clear: both;
}
.responsive-table tr {
	*zoom: 1;
}
.responsive-table th, .responsive-table td {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;    
	box-sizing: border-box;         
}
.responsive-table td {
	width: 100%;
	padding-left: 50%;
	position: relative;
	float: left;
	border: none;
	border-bottom: 1px solid #DCDDDE;
	text-align: left;
}
.responsive-table td:before {
	width: 45%;
	padding: 10px;
    position: absolute;
    top: 0;
    left: 0;
    content: attr(data-usf-tblcolumn);
    font-weight: bold;
}
.responsive-table tbody tr:nth-child(odd) {
	background-color: #ECEDED;
}
.responsive-table tbody tr:nth-child(odd) td {
	border-bottom: 1px solid #fff;
}
.responsive-table.table-bordered, .responsive-table.table-bordered-striped {
	border: none;
}
.responsive-table.table-bordered td + td, .responsive-table.table-bordered thead th + th, .responsive-table.table-bordered-striped td + td, .responsive-table.table-bordered-striped thead th + th {
	border-left: none;
}
		


/* 	Toggle Items
    ==========================================================================  */

.toggle-section .toggle {
	margin-bottom: 1.5em;
	font-weight: bold;
}
.toggle-section .collapsible-heading a {
	padding-left: 2.25em;
	display: block;
	background: url("../images/global/elements/toggle-sprite.png") 0px -392px no-repeat;
	color: #7FB539;
}
.toggle-section .collapsible-heading-collapsed a, .toggle-section .collapsible-heading-collapsed a:visited {
	background: url("../images/global/elements/toggle-sprite.png") 0px -196px no-repeat;
	color: #057B56;
}
.toggle-section .collapsible-heading-collapsed a:hover, .toggle-section .collapsible-heading-collapsed a:focus {
	background: url("../images/global/elements/toggle-sprite.png") 0px -296px no-repeat;
	color: #7FB539;
}
.toggle-section .collapsible-content {
	padding-left: 2.25em;
}


/* 	Callouts
    ==========================================================================  */
.callout-caption {
    color: #999999;
    font-style: italic;
	width: 100%;
}
.callout img {
    max-width: 100%;
    width: auto;
    height: auto;
	display: block;
	margin-top: .25em;
}
.callout-small {
	width: 100px;
}
.callout-small.callout-right {
	float: right;
    margin-left: 1.5em;	
}
.callout-small.callout-left {
	float: left;
    margin-right: 1.5em;	
}

/*  ==========================================================================
    Snippet - Media
    ==========================================================================  */
    .media-caption { margin-top: 0; font-style: italic; }

    [class*="media-small"] { width: 100px; }

    .media-small-right { float: right; margin-left: 1.5em; }
    .media-small-left { float: left; margin-right: 1.5em; }

/*  ==========================================================================
	Applications
    ==========================================================================  */
.application {
	margin-bottom: 3em;
}


/*  ==========================================================================
	Media Queries
    ==========================================================================  */
	
@media screen and (min-width: 515px) {
	
/* 	Side Content
    ==========================================================================  */
.side-content-image {
	float: left;
	margin-right: 1.5em;
}	
	
	
/* 	Info Sections
    ==========================================================================  */
		
.info-section-text {
	width: 66%;
	float: left;
}
.info-section-links {
	width: 23%;
	float: right;
}


/* 	Callouts
    ==========================================================================  */
.callout-medium {
    width: 44%;
}
.callout-right {
    float: right;
    margin-left: 1.5em;
}
.callout-left {
	float: left;
	margin-right: 1.5em;
}

/*  ==========================================================================
    Snippet - Media
    ==========================================================================  */
    [class*="media-medium"] { width: 44%; }

    .media-medium-right { float: right; margin-left: 1.5em; }
    .media-medium-left { float: left; margin-right: 1.5em; }

}
@media screen and (min-width: 750px) {
	
/* 	Page Title
    ==========================================================================  */	
	
.page-title-holder {
	min-height: 176px;
	margin-bottom: .25em;
}
.about-title {
	background-image: url("../images/secondary-title/about-usf.jpg");
}
.academics-title {
	background-image: url("../images/secondary-title/academics.jpg");
}
.admissions-title {
	background-image: url("../images/secondary-title/admissions.jpg");
}
.campuslife-title {
	background-image: url("../images/secondary-title/campus-life.jpg");
}
.research-title {
	background-image: url("../images/secondary-title/research.jpg");
}
.notfound-title {
	background-image: url("../images/secondary-title/not-found.jpg");
}
.page-title {
	min-width: 256px;
	padding-right: 4.5em;
	position: absolute;
	bottom: 33%;
	left: -7px;
	background: url("../images/secondary-title/giant-ribbon.png") no-repeat right center;
	background-size: cover;
	border-left: 7px solid #9aca3c;
	-moz-box-shadow:    0px 8px 5px -5px rgba(0, 0, 0, .25);
  	-webkit-box-shadow: 0px 8px 5px -5px rgba(0, 0, 0, .25);
  	box-shadow:         0px 8px 5px -5px rgba(0, 0, 0, .25);
	color: #fff;
}
.page-title-text {
	margin-bottom: 0;
	padding: .25em 0 .25em .75em;
	background: url("../images/secondary-title/giant-ribbon-repeat.png") repeat-x right center;
	background-size: contain;
	border-bottom: none;
	color: #fff;
}


/* 	Breadcrumbs
    ==========================================================================  */
	
.breadcrumbs {
	text-align: right;
}


/* 	Side Column
    ==========================================================================  */
	
.side-content, .secondary-navigation, .side-widgets {
	width: 23%;
	float: left;
	margin-bottom: 3em;	
}
.content-main {
	width: 72%;
	float: right;
}
.side-content-image {
	float: none;
	margin-right: 0;
}	
.alt-layout .side-content, .alt-layout .secondary-navigation, .alt-layout .side-widgets {
	float: right;
}
.alt-layout .content-main {
	float: left;
}


/* 	Secondary Navigation
    ==========================================================================  */
	
.secondary-navigation .collapsible-content-collapsed {
	display: block;
}
.secondary-navigation .toggle {
	display: none;
}
}

@media screen and (min-width: 1000px) {

/* 	Page Title
    ==========================================================================  */	
.page-title-plain-text {
	padding-top: .5em;
}
}