/* Styles for Educational Programs page.

       developer:   dereks
       requires:    /common/framework/css/framework.en.css
       ========================================================================== */

/* ==========================================================================
   setup the environment
   ========================================================================== */

html { 
	background: #fff;
	font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; 
    margin: 0 ;
    padding: 0;
}

/* Needs to be targeted or it will affect the nav and footer */ 

#programs header h1 {
	font-size: 2.5rem;
	margin: 0;
	color: #ffce41;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
}

#programs h2 { 
	font-size: 2em;
	line-height: 1.03125;
	padding-bottom: 2rem;
}

#other-programs h3 {
	font-size: 1.625rem;
	padding-bottom: 2rem;
	text-align: center;
}

#other-programs h4 { 
	color: #000; 
	font-size: 1.5rem;
	padding-bottom: 1rem;
}

main { 
	margin: 0 auto;
	max-width: 1000px;
	padding: 3rem 3rem 0; 
}

main a { color: #ff8100; }

main a:hover, #other-programs a:hover h4 { color: #bb4908; }

main p {
	display: inline; 
	font-weight: 300;
	font-size: 1.125em;
	line-height: 1.5em;
}

/* ==========================================================================
   Header
   ========================================================================== */

#programs header #intro {
	background: #404040;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    padding: 3rem 2% 2.5rem;
    border-bottom: 0.375em solid #ff8100;
}

#programs header h1 #subtitle {
	color: #fff; 
    display: block;
    font-weight: 300;
    font-size: 0.555556em;
    line-height: 1.12em;
    margin-top: 0.28em;
}
	
/* ==========================================================================
   Schools
   ========================================================================== */  

section { 
	border-bottom: 0.01rem solid rgba(112, 112, 112, 0.5);
	display: inline-block;
	padding: 3rem 0;
}

section img {
	float: left;
	padding-right: 2rem;
}

#programs section li { display: inline-block; }

#programs section li::before {
	color: #000;
	content: "\2002•\2002 ";
}

#programs section a:first-child > li::before { content: ""; }

.tracks { display: inline-grid; }

.tracks p {
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0.066667rem;
	padding: 0.4rem 0; 
}

/* ==========================================================================
   Other Educational Programs
   ========================================================================== */  

#other-programs { 
	border: none; 
	display: block; 
}

#other-programs img { padding-right: 0; }

#wolfram-u .txt { padding-left: 5rem; }

#ambassador .txt { padding-left: 5.5rem; }

#wolfram-u ul { display: inline-grid; }

#wolfram-u li { 
	font-size: 1.1rem;
	padding-bottom: 0.4rem; 
}

#wolfram-u, #ambassador { padding-left: 5rem; }

#ambassador h4 { width: 300px; }

#other-programs #wolfram-u li:before {
	content: '\25AA \2002';
	color: #707070;
}

/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for medium screens (900px)
   ========================================================================== */

@media all and (max-width: 900px) {
	
	#programs h2 { padding-top: 1rem; }
	
	section h2, section p, .tracks { float: left; }
	
	#ambassador { padding-top: 3rem; }
	
	#ambassador h4 { width: 100%; }
}