/* 
Theme Name: Trojan - Parent Theme
Theme URI: http://www.usc.edu/web
Description: Trojan Theme is built off of the gateway2012 theme structure
Version: 1
*/

/* ----------------------
TABLE OF CONTENTS:

1 --- GLOBAL STYLES ---
---- PAGE LAYOUT -----
2 - HEADER
	2.1 - accessibility navigation
	2.2 - main navigation
	2.3 - search box
3 - MAIN CONTENT
	3.1 - archives
	3.2 - meta
4 - SIDEBAR
	4.1 - in this section nav
5 - FOOTER
6 --- RESPONSIVENESS ---
---------------------- */

@import "css/trojan.css";

/***----------------------------------- 1 GLOBAL STYLES -----------------------------------***/

/* embed custom fonts
-----------------------------*/
/* NOTE: all styles & file types of the National font for use in wordpress themes can be found in the usc_gateway theme directory */
@font-face {
	font-family: 'National';
	src: url('/wp-content/themes/usc_gateway/fonts/NationalWeb-Regular.eot');
	src: local(':)'), url('/wp-content/themes/usc_gateway/fonts/NationalWeb-Regular.woff') format('woff'), url('/wp-content/themes/usc_gateway/fonts/NationalWeb-Regular.ttf') format('truetype'), url('/wp-content/themes/usc_gateway/fonts/NationalWeb-Regular.svg') format('svg');
	font-weight:500;
	font-style:normal;
}

@font-face { 
	font-family: 'National'; 
	src: url('//www.usc.edu/assets/fonts/NationalWeb-Semibold.eot'); src: local(':)'), url('//www.usc.edu/assets/fonts/NationalWeb-Semibold.woff') format('woff'), url('//www.usc.edu/assets/fonts/NationalWeb-Semibold.ttf') format('truetype'), url('//www.usc.edu/assets/fonts/NationalWeb-Semibold.svg') format('svg'); 
	font-weight: 700; 
	font-style: normal; 
}

 
/* keyframes fadeIn function 
-----------------------------*/
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
 
@-moz-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
 
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
  
@-ms-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

@-o-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

/* reset styles
-----------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

address, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }

body { font: 100% Georgia, "Times New Roman", Times, serif; background-color: #FAF9F2; }

/* headings 
-----------------------------*/
h1 { }
h2 { color: #989056; font: 400 2.375em National, Helvetica, Arial, sans-serif; font-size: 2.375rem; margin-bottom: .8em; } 
h3 { color: #373737; font: 700 1.625em National, Helvetica, Arial, sans-serif; font-size: 1.625rem; margin: .8em 0 .2em 0; } 
h4 { color: #373737; font: 700 1.375em National, Helvetica, Arial, sans-serif; font-size: 1.375rem; margin: .8em 0 .2em 0; }
h5 { color: #373737; font: 700 1.125em National, Helvetica, Arial, sans-serif; font-size: 1.125rem; margin: .8em 0 .2em 0; }
h6 { color: #373737; font: 700 1em National, Helvetica, Arial, sans-serif; font-size: 1rem; margin: .8em 0 .2em 0; }

/* default wordpress editor styles 
-----------------------------*/
.content_main ol, .content_main ul { margin: 15px 30px; }
.content_main li { font: normal 1em/150% Georgia, "Times New Roman", Times, serif; font: normal .875rem/150% Georgia, "Times New Roman", Times, serif; color: #373737; }
strong { font-weight: bold; } 
em { font-style: italic; }
blockquote { margin: 20px 50px; padding: 20px; background-color: #e8e5d1; font-style: italic; border-radius: 10px; color: #373737; border: none; font-size: 14px; line-height: 150%; width: 400px; }
blockquote .author { text-align: right; font-style: normal; }
code, code>p { font: normal 1em monospace; }
del { } /* <del> acts as strikethrough in wordpress */
.content_main img { border: 4px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
p { color: #373737; line-height:18px; font: normal .875em/150% Georgia, "Times New Roman", Times, serif; font-size: .875rem; /* 14pt / 16 */ margin-bottom: 10px; } 
a { color: #990000; text-decoration: none; outline: none; }
a:hover { text-decoration: underline; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.alignright { float: right; margin: 0 0 1em 1em; }
table { border-collapse: collapse; margin: 30px 0; }
table { border-collapse: collapse; margin: 30px 0; }
table th { border: 1px solid #ccc; color: #373737; font-weight: 700; text-shadow: rgba(255,255,255,.9) -1px 1px 0px; background: #e8e5d1; padding: 3px 8px; text-align: center; }
table td { border: 1px solid #ccc; padding: 8px; font-size: 14px; }
table td:first-child { font-weight: 700; }

/* global classes 
-----------------------------*/
.clear { clear: both; }
.page_wrapper { margin: 0 auto; position: relative; } 
.title_acronym { color: #FFCC00; }
.print { display: none; }
.content_main .noborder { border: none; box-shadow: none; }

/* Icon Sprite 
-----------------------------*/
/* INCLUDE IN CORRESPONDING JAVASCRIPT FILE:
// append icons for links to non-web filetypes (email, pdf, doc, xls, ppt, etc)
	$("a[href^='mailto:']").addClass("email");
	$("a[href$='.pdf']").addClass("pdf");
	$("a[href$='.xls']").addClass("xls");
	$("a[href$='.ppt']").addClass("ppt");
	$("a[href$='.doc'], a[href$='.txt'], a[href$='.rft']").addClass("txt");
*/
a.pdf, a.txt, a.xls, a.ppt, a.email {
	background-image: url('images/usc_document_sprite.png');
	background-repeat: no-repeat;
	padding-left: 20px;
	line-height: 16px;
}
a.xls { background-position: 0 -36px; }
a.pdf { background-position: 0 -72px; }
a.txt { background-position: 0 -108px; }
a.ppt { background-position: 0 -144px; }

.footer_main a.email, .footer_main .phone, .footer_main .fax, .footer_main .address {
	background-image: url('images/usc_footer_sprite.png');
	background-repeat: no-repeat;
	padding-left: 20px;
	line-height: 16px;
}
.footer_main a.email { background-position: 0 -1px; }
.footer_main .phone { background-position: 0 -33px; }
.footer_main .fax { background-position: 0 -65px; }
.footer_main .address { background-position: 0 -97px; }


/***----------------------------------- PAGE LAYOUT -----------------------------------***/
/***----------------- 2 HEADER -----------------***/
.header_main { width: 100%; padding: 18px 0 0 0; margin-bottom: 18px; background-color: #990000; border-top: 1px solid #B43133; }
.header_wrapper { border-bottom: 1px solid #660000; padding-bottom: 3px;}
.header_main h1 { float: right; margin: 0;}
.header_main h1 .logo { display: block; text-indent: -9999px; margin-bottom: 13px; }
.header_main h1 .logo {
	background: url('images/usc_logo.svg') 0 0 no-repeat;
	background-size: 176px, 38px; height: 38px; width: 176px;
}

.header_main h2 { margin: 0; padding-top: 12px; }
.header_main h2 { color: #fff; font: 2.5em "adobe-caslon-pro", "adobe-caslon-pro-1","adobe-caslon-pro-2", Georgia, serif; font-size: 2.5rem; /* 40pt / 16 */  line-height: 42px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); }
.header_main h2 a { color: #fff; }
.header_main h2 a:hover { text-decoration: none; }
.header_main h3.tagline { color: #fff; font: 400 1.125em "adobe-caslon-pro", "adobe-caslon-pro-1","adobe-caslon-pro-2", Georgia, serif; font-size: 1.125rem; margin: 0; font-style: italic; opacity: 0.9; }

/**----- 2.1 accessibility navigation -----**/
.accessibility { display: none; list-style: none; }
.accessibility a {color: #fff; font-size: 12px; }

.search_wrapper { position: relative; }

/**----- 2.2 main navigation -----**/
.nav_wrapper { border-top: 1px solid #84241E;}
.nav_main { width: 740px; }
.nav_main ul { }
.nav_main ul li { list-style: none; float: left; position: relative; }
.nav_main ul li:first-child { border-left: 1px solid #660000; }
.nav_main ul li:last-child { border-right: 1px solid #84241E; }
.nav_main ul li a { display: block; width: 82px; height: 36px; padding: 12px 10px; border-left: 1px solid #84241E; border-right: 1px solid #660000; font: 14px National, Helvetica, Arial, sans-serif; color: #fff;
	-moz-transition:background 0.3s linear 0s;
	-webkit-transition:background 0.3s linear 0s;
	transition:background 0.3s linear 0s; 
}
.nav_main ul li a:hover { background-color: #373737; text-decoration: none; }

.nav_main ul.sub-menu { border-top: none; min-width: 208px; }
.nav_main ul.sub-menu { display: none; }
.nav_main>ul>li>ul.sub-menu { position: absolute; top: 60px; left: 0; z-index:100; 
	background: #373737;
	background: -moz-linear-gradient(top,  rgba(55,55,55,1) 0px, rgba(0,0,0,1) 90%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0px,rgba(55,55,55,1)), color-stop(90%,rgba(0,0,0,1)));
	background: -webkit-linear-gradient(top,  rgba(55,55,55,1) 0px,rgba(0,0,0,1) 90%);
	background: -o-linear-gradient(top,  rgba(55,55,55,1) 0px,rgba(0,0,0,1) 90%);
	background: -ms-linear-gradient(top,  rgba(55,55,55,1) 0px,rgba(0,0,0,1) 90%); 
	background: linear-gradient(to bottom,  rgba(55,55,55,1) 0px,rgba(0,0,0,1) 90%);
}
.nav_main ul.sub-menu li { float: none; border-top: 1px solid #666; border-right: none; border-left: none; }
.nav_main ul.sub-menu a { width: auto; height: auto; font-size: 12px; border: none; padding: 8px 10px; }
.nav_main ul.sub-menu a:hover { 
	background: #3f3f3f;
	background: -moz-linear-gradient(top,  rgba(63,63,63,1) 0%, rgba(53,53,53,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(63,63,63,1)), color-stop(100%,rgba(53,53,53,1)));
	background: -webkit-linear-gradient(top,  rgba(63,63,63,1) 0%,rgba(53,53,53,1) 100%);
	background: -o-linear-gradient(top,  rgba(63,63,63,1) 0%,rgba(53,53,53,1) 100%);
	background: -ms-linear-gradient(top,  rgba(63,63,63,1) 0%,rgba(53,53,53,1) 100%);
	background: linear-gradient(to bottom,  rgba(63,63,63,1) 0%,rgba(53,53,53,1) 100%);
}
.nav_main ul.sub-menu a { padding-left: 10px; }
.nav_main ul.sub-menu ul a { padding-left: 25px; }
.nav_main ul.sub-menu ul ul a { padding-left: 40px; }
.nav_main ul.sub-menu ul ul ul a { padding-left: 50px; }
.nav_main ul.sub-menu ul ul ul ul a { padding-left: 60px; }
.nav_main ul.sub-menu ul ul ul ul ul a { padding-left: 70px; }
.nav_main>ul>li ul.sub-menu {  } 
.nav_main>ul>li:hover ul.sub-menu { display: block;
	-webkit-animation: fadeIn 0.3s;
    -moz-animation: fadeIn 0.3s;
    -ms-animation: fadeIn 0.3s;
   	animation: fadeIn 0.3s;
} 

.nav_mobile { display: none; }

/**----- 2.3 search box -----**/
#searchform { position: absolute; right: 0; top: 15px; width: 170px; height: 25px; z-index: 100; }
#searchform label { position: absolute; top: 4px; left: 5px; font: normal normal 12px/19px Arial, sans-serif; color: #999; cursor: text; }
#search { display: block; width: 136px; height: 21px; margin: 0; padding: 0 27px 0 3px; border: 2px solid #fff; background: #fff; font: 14px/19px Helvetica, Arial, sans-serif; color: #333;
	-moz-border-radius: 0; 
	-webkit-border-radius: 0;
	border-radius: 0;
	-webkit-appearance: none;
}
#searchform button { display: block; position: absolute; top: 2px; right: 2px; border: 0; margin: 0; padding: 0; width: 21px; height: 21px; text-indent: -9999px; background-position: 0 0; background-repeat: no-repeat; 
	background: #fc0; 
	background-image: url('images/searcharrow.png'); 
	background-image: url('images/searcharrow.png'), -webkit-gradient(linear,left top,left bottom,color-stop(0, #fc0),color-stop(0.85, #D1A832)); 
	background-image: url('images/searcharrow.png'), -moz-linear-gradient(center top,#fc0 0%,#D1A832 85%); 
	background-image: url('images/searcharrow.png'), -o-linear-gradient(center top,#fc0 0%,#D1A832 85%); }
#searchform button:hover, #searchform button:active { background: url('images/searcharrow.png') no-repeat #fc0; cursor: pointer; }


/***----------------- 3 MAIN CONTENT -----------------***/
.content_main { min-height: 800px; background-color: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
.content_padding {
	width: 94%; padding: 3%;
}

/**----- 3.1 archives -----**/
.archive .post { clear: both; margin-bottom: 1em; }
.archive_post_title { margin-top: 0; }


/**----- 4.1 in this section nav -----**/
.news_archive { position: relative; margin: 17px 0 34px; }
.news_archive h3 { position: relative; padding: 0 10px; color: #444; font: 700 18px/32px National, Helvetica, Arial, sans-serif; text-shadow: rgba(255,255,255,.9) -1px 1px 0px; background: #e8e5d1; letter-spacing: .5px; }
.news_archive ul { margin: 0; color: #000;  font: normal 300 14px/120% Helvetica, Arial, sans-serif; text-shadow: none; padding: 0px 8px 8px 22px; list-style-image: url('images/arrow.png'); }
.news_archive li { margin: 2px 0; letter-spacing: .5px; }
.news_archive{
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #faf9f2),color-stop(1, #f1eee2));
	background-image: -moz-linear-gradient(center top, #faf9f2 0%,#f1eee2 100%);
}
.news_archive a { display: block; padding: 3px 3px 3px 15px; margin: 0 0 0 -15px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; text-decoration: none; color: #555;}
.news_archive a:hover { background: #fff; }
.news_archive a.active { background: #fff; color: #900; border:1px solid #f1eee2; font-weight: 500; }


/**----- 3.2 meta -----**/
.post .meta_date,
.post .meta_after { font: 700 .875em National, Helvetica, Arial, sans-serif; font-size: .875rem; margin-bottom: 1em; }
.post .meta_after { clear: both; padding-bottom: .25em; border-bottom: 1px solid #ccc; color: #777; text-align: right; }
.post .comments_link { margin-left: .25em; padding-left: .25em; border-left: 1px solid #ccc; }


/***----------------- 4 SIDEBAR -----------------***/
.content_sidebar { min-height: 800px; font-family: Helvetica, Arial, sans-serif; }

/**----- 4.1 in this section nav -----**/
.menu_sidebar { position: relative; margin: 0 0 20px; }
.menu_sidebar h2 { position: relative; padding: 0 10px; color: #444; font: 700 18px/32px National, Helvetica, Arial, sans-serif; text-shadow: rgba(255,255,255,.9) -1px 1px 0px; background: #e8e5d1; letter-spacing: .5px; }
.headline_arrowDown { position: absolute; bottom: -12px; left: 10px; width: 0;  height: 0; 
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	border-top: 12px solid #e8e5d1; /*dark color of gradient - should match default bkgd color of h2*/
}
.menu_sidebar h4 { margin-bottom: 0; }
.menu_sidebar p { margin-top: 0; }
.menu_sidebar ul { margin: 0; color: #000;  font: normal 300 14px/120% Helvetica, Arial, sans-serif; text-shadow: none; padding: 0px 8px 8px 22px; list-style-image: url('images/arrow.png'); }
.menu_sidebar ul ul { padding: 0 0 0 15px; }
.menu_sidebar li { margin: 2px 0; letter-spacing: .5px; }

.menu_sidebar{
	background: #f2f0e6;
	background: -moz-linear-gradient(top,  #faf9f2 0%, #f1eee2 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#faf9f2), color-stop(100%,#f1eee2));
	background: -webkit-linear-gradient(top,  #faf9f2 0%,#f1eee2 100%);
	background: -o-linear-gradient(top,  #faf9f2 0%,#f1eee2 100%);
	background: -ms-linear-gradient(top,  #faf9f2 0%,#f1eee2 100%);
	background: linear-gradient(to bottom,  #faf9f2 0%,#f1eee2 100%);
}
.menu_sidebar a { display: block; padding: 5px 0px 3px 15px; margin: 0 0 0 -15px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; text-decoration: none; color: #555;}
.menu_sidebar a:hover { background-color: #fff; }
.menu_sidebar a.active { background-color: #fff; color: #900; border:1px solid #f1eee2; font-weight: 500; }
.menu_sidebar .current_page_item>a { background-color: #fff; }



/***----------------- 5 FOOTER -----------------***/
.footer_main { min-height: 50px; width: 100%; padding: 17px 0; margin-top: 20px; border-top: 4px solid #EDEBDC;
	background: #555;
	background: -moz-linear-gradient(top, #666 0%, #777 10%, #444 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #666), color-stop(10%, #777), color-stop(100%, #444));
	background: -webkit-linear-gradient(top, #666 0%, #777 10%, #444 100%);
	background: -o-linear-gradient(top, #666 0%, #777 10%, #444 100%);
	background: -ms-linear-gradient(top, #666 0%, #777 10%, #444 100%);
	background: linear-gradient(to bottom, #666 0%, #777 10%, #444 100%);
	color: #fff;
}
.footer_main h1, .footer_main h2, .footer_main h3, .footer_main h4, .footer_main h5, .footer_main h6, .footer_main p {color: #fff;}
.footer_main a {color: #fc0;}


/***----------------------------------- 6 RESPONSIVENESS -----------------------------------***/
@media only screen and (min-width: 960px) {
	.header_main {
		background: #990000;
		background: -moz-linear-gradient(center top , #990000 10%, #660000 90%);	
		background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,#990000), color-stop(90%,#660000));
		background: -webkit-linear-gradient(top, #990000 10%, #660000 90%);
		background: -o-linear-gradient(top, #990000 10%, #660000 90%);
		background: -ms-linear-gradient(top, #990000 10%, #660000 90%);
		background: linear-gradient(to bottom, #990000 10%, #660000 90%);
	}
}

@media only screen and (max-width: 959px) {
	.header_main {
		background: #990000;
		background: -moz-linear-gradient(center top , #990000 10%, #660000 90%);	
		background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,#990000), color-stop(90%,#660000));
		background: -webkit-linear-gradient(top, #990000 10%, #660000 90%);
		background: -o-linear-gradient(top, #990000 10%, #660000 90%);
		background: -ms-linear-gradient(top, #990000 10%, #660000 90%);
		background: linear-gradient(to bottom, #990000 10%, #660000 90%);
	}
	.header_main h2 a { font-size: 1.875rem; /* 30pt / 16  */}
	.nav_main, .nav_mobile {
		width: 120%; margin: 0 0 0 -20px;
		background: #353535;
		background: -moz-linear-gradient(top,  rgba(53,53,53,1) 0%, rgba(26,26,26,1) 43%, rgba(2,2,2,1) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(53,53,53,1)), color-stop(43%,rgba(26,26,26,1)), color-stop(100%,rgba(2,2,2,1)));
		background: -webkit-linear-gradient(top,  rgba(53,53,53,1) 0%,rgba(26,26,26,1) 43%,rgba(2,2,2,1) 100%);
		background: -o-linear-gradient(top,  rgba(53,53,53,1) 0%,rgba(26,26,26,1) 43%,rgba(2,2,2,1) 100%); 
		background: -ms-linear-gradient(top,  rgba(53,53,53,1) 0%,rgba(26,26,26,1) 43%,rgba(2,2,2,1) 100%);
		background: linear-gradient(to bottom,  rgba(53,53,53,1) 0%,rgba(26,26,26,1) 43%,rgba(2,2,2,1) 100%);
	}
	.nav_mobile { display: block; color: #fff; padding: 12px 20px; font: 14px National, Helvetica, Arial, sans-serif; border-top: 1px solid #666; }
	.nav_button { display: block; width: 30px; height: 30px; cursor: pointer; float: left; background: url('images/nav_button.png') no-repeat; }
	.nav_main>ul { border-top: none; display: none; }
	.nav_main ul li { float: none; border-top: 1px solid #666; }
	.nav_main ul li:first-child { border-left: none; }
	.nav_main ul li:last-child { border-right: none; }
	.nav_main ul li a { width: 100%; height: auto; padding: 12px 20px; }
	.nav_main ul li a:hover { background-color: #404040; }
	.nav_main>ul>li:hover ul.sub-menu { display: none; }
}

@media only screen and (max-width: 760px) {
	.content_sidebar { margin-top: 30px; min-height: auto;}
	.page_wrapper .content_sidebar {
		width: 98%;
	}
	.page_wrapper .grid_9 { width: 98%; }
}

@media only screen and (max-width: 480px) {
	.header_main h1 .logo { background: url('images/usc_mobile_logo.svg') 0 0 no-repeat; background-size: 176px, 38px; height: 38px; width: 120px; }
}