/* 
Title:		Responsive redesign of CMU home page
Author: 	yanquanc@andrew.cmu.edu
*/

@charset "UTF-8";
@import 'reset.css';

html { padding: 0; margin: 0; }    

body {
	font-family: 'Istok Web', sans-serif;
	font-size: 1em;
	padding: 0; margin: 0;
}

.bodywrap {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* ----------HEADER---------*/
header {
	max-width: 988px;
	position: relative;
	z-index: 6;
	margin: 0 auto;
	padding: 0;
	height: 257px;
	background: #AF1E2D;
}

.menu {
	height: 35px;
	width: 100%;
	background-color: #C41E3A;
	position:relative;
	z-index:1;
}

nav {
    width: 100%;
	margin: 0 auto;
}
nav ul {
    list-style-type: none; 
    text-align: left;
    padding: 11px 0 1px 0;
	margin-left: 2%;
}
nav li{
	text-align: center;
    width: auto;
	padding: 0 3.2% 0 3.2%;
    display:inline-block;
}
.menu_tablet_visibility { /* the menu icon */
	display: none;
}

.cornerfunction{
	display: inline-block;
	position: absolute;
	top: 5px;
	right: 5px;
	
}
.cornerfunction p {
	display: inline-block;
	font-size: 0.88em;
	margin-right:20px;
	margin-top: 1px;
	padding-top: 6px;
	z-index: 3;
	color: #999999;
}

#searchbox {
	width:150px; /*follow your image's size*/
	height:20px;/*follow your image's size*/
	/*background-image:images/searchBar.png;*/
	background: #E5E5E5;
	background-repeat:no-repeat; /*important*/
	padding-left:4px;
	margin-bottom:10px;
	margin-top: -20px;
	margin-right: 10px;
	position:relative; /*important*/
	float: right;
	-moz-border-radius: 8px;
	border-radius: 8px;

}
.search_tablet_visibility { /* hide the mobile/tablet search icon */
	display:none;
}

#searchbox form { display:inline ; }
 
.searchfield {
	border:0px; /*important*/
	background-color:transparent; /*important*/
	position:absolute; /*important*/
	left:20px;
	width:125px;
	height:20px;
	font-size: 0.77em;
}
 
.searchbox_submit {
	border:0px; /*important*/
	background-color:transparent; /*important*/
	position: absolute;
	bottom:-10px;
	left:2px;
	width:50px;
	height:300px;
}


figure {
	z-index:0;
	position: relative;
}
.backup {
	max-width: 100%;
	min-height: 231.662px;
	margin: 0 auto;
	position: absolute;
	left: 0px;
	top: 0px;
	margin-top: -11px;
	z-index: -1;
}
.logo {
	z-index: 0;
	margin-top: 7px;
	margin-left: 4px;
	float: left;

}
.logopadding {
	z-index: -1;
	width: 252px;
	height: 170px;
	border-style:none;
	background-color: rgba(178,178,178,0.5);  /* opacity:0.5; */
	position: absolute;
	top: 0px;
	left: 0px;
}
.logopic {
	z-index: 0;
	float: right;
	margin-top: 5px;
	margin-right: 10px;
}


.nav2 {
    width: 100%;
	padding: 1%;
	margin: 0;
	z-index:1;
	position: absolute;
	bottom: 0px;
}
.nav2 ul {
    list-style-type: none;
    text-align: center;
    padding: 0;
	margin: 0;
}
.nav2 li{
	text-align: center;
    width: auto;
	padding: 0 3.5%;
    display:inline-block;
}
.people_tablet_visibility { /* people dropdown box */
	display: none;
}

/* ----------COMMON TEXT HEADINGS---------*/
a {
	font-family: 'Istok Web', sans-serif;
	font-size: 0.75em;
	font-weight: 100;
	color: #990000;
	text-decoration: none;
}

h1 {
	font-family: 'Istok Web', sans-serif;
	font-size: 0.88em;
	font-weight: 700;
	color: #B2B2B2;
}
h1 a {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	text-decoration: inherit;
	text-transform: inherit;
}

h2 {
	font-family: 'Istok Web', sans-serif;
	font-size: 0.88em;
	font-weight: 100;
	color: #E5E5E5;
}
h2 a {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	text-decoration: inherit;
	text-transform: inherit;
}

h3 {
	font-family: 'Istok Web', sans-serif;
	font-size: 1.2em;
	font-weight: 100;
	color: #EAAF0F;
}
h3 a {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	text-decoration: inherit;
	text-transform: inherit;
}
h3 + p {
	color: #E5E5E5;
}
h4 {
	font-family: 'Istok Web', sans-serif;
	font-size: 1.4em;
	font-weight: 600;
	color: #D17702;
}
h4 a {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	text-decoration: inherit;
	text-transform: inherit;
	inline-height: 1;
}
h5 {
	font-family: 'Istok Web', sans-serif;
	font-size: 0.9em;
	font-weight: 100;
	color: #ffffff;
}
h5+p {
	font-size: 0.8em;
	padding-top: 0.9em;
	color: #BFBFBF;
}

/* ----------START MAIN SECTION, BEGIN WITH HTML5 SEMANTIC TAG---------*/
section {
	max-width: 988px;
	position: relative;
	margin: 18.5px auto;
	padding: 0;
	height: 868.5px;

/*background: lightblue;*/
}

article {
	display: inline-block;
	float: left;
	height: 868.5px; /* same as section tag*/
	width: 73.5%; /* 727px / 988px */
	
/*background: lightyellow;*/
}

.showcase {
	height: 522.5px; /* 207+18+297.5*/
	width: 100%;
	
/*background: lightgrey;*/
}

/* ----------LARGE HIGHLIGHTER---------*/
.highlighter {
	height: 297.5px;
	width: 100%;
	position: relative;

background: #656565;
}

#highlighterImage{
	z-index: -1;
	min-height: 220px;
}
figcaption {
	height: 70px;
	width: 100%;
	background: #656565;
	color: #E5E5E5;
	position: absolute;
	top: 76.47%;/* 227.5px / 297.5px*/
	z-index: 1;
	overflow: hidden;
}
figcaption h3 {
	padding-left: 10px;
	padding-top: 5px;
}
figcaption p {
	font-size: 0.8em;
	padding: 3px 11px 0 10px;
	margin-right: 100px;
}
figcaption img{
	display: none;
}
.readmore {
	font-size: 0.77em;
	color: #ffffff;
	width: 100px;
	height: 22px;
	float: right;
	-moz-border-radius: 11px;
	border-radius: 11px;
}
.readmore p {
	font-size: inherit;
	width: 80%;/* width is by default assumed to be a lot larger, so it's necessary to specify here */
	line-height: 1;
	margin-top:2%;/* parent position is float:right, here also not absolute, use margin-top instead of top */
	margin-left:5%;

/*background: lightblue;*/
}
#highlightermore {
	background-color: #D17702;
	position: absolute; 
	right: 1%;/* position absolute, use right instead of margin-right */
	bottom: 15px;
}

/* ----------MORE STORY---------*/
.morestory {
	margin-top: 18px;
	height: 207px;
	width: 100%;
	overflow: hidden;
	
/*background: orange;*/
}
.storychunk {
	width: 32.187%; /* 234px / 727px */
	height: 207px;
	overflow: hidden;

/*background: #fff;*/
}
.storyheader {
	width: 100%;
	height:33px;
	background: #EAAF0F;
	color: #ffffff;
	font-size: 0.88em;
	font-weight: bold;
	position:relative;
	z-index: 1;
	overflow: hidden;
}
.storyheader p { /*adjust the title position*/
	inline-height: 1;
	margin-left: 4.2%;/* parent position is already float:left, here also not absolute, use margin-left instead of left */
	padding-top: 4%;
	width: 85%;
}
.storybody {
	width: 100%;
	height: 174px;/* parent class storychunk height 207px - storyheader height 33px */
	z-index: 0;
	position: relative;
	margin-top: -1px;
}
.storypic {
	z-index: -1;
	position: relative;
	min-height: 174px; /* catering to the parent class height */
}
.storypic + div {
	float: left;
}
.storypic:hover+div { /* why hover flashes so much while moving the cursors?????????????!!???*/
	display: block;
}
.discrp{
	z-index: 0;
	background-color: rgba(101,101,101,0.7);  /* opacity:0.7; */
	width: 76%; /* 179px / 234px */
	height:90px;
	overflow: hidden;
	position: absolute;
	bottom:-1px;
	-webkit-transition: height 0.3s ease-in; /*why not showing effect?????!!??*/
	-moz-transition: height 0.3s ease-in;
	-o-transition: height 0.3s ease-in;
	-ms-transition: height 0.3s ease-in;
	transition: height 0.3s ease-in;
	display: none;
	
}
.discrp h3{
	font-size: 1em;
	font-weight: 599;
	margin-top: 2px;
	margin-left: 2%;
}
.discrp p{
	font-size: 0.8em;
	width: 99%;
	margin-top: 6px;
	margin-left: 2%;
	
/*background: black;*/
}

#st1 { /*adjust the 1st storychunk's position*/
	float: left;
	display: inline-block;
}
#st2 { /*adjust the 2nd storychunk's position*/
	float: left;
	margin-left: 1.65%; /* 12px / 727px */
	display: inline-block;
}
#st3 { /*adjust the 3rd storychunk's position*/
	float: left;
	margin-left: 1.65%;
	display: inline-block;
}

/* ----------NEWS AND EVENT---------*/
.newsblock {
	margin-top: 21px;
	height: 324px; /* same as social media to its right */
	width: 100%;
	
/*background: lightgreen;*/
}
/* Under each news column, there are two news chunks; id# is used for positioning */
.newscolumn {
	height: 297px;
	width: 31.413%; /* from AdobeIllustrator data: 229px / 729px */
	margin-top: 4.8px;
	float: left;

/*background: lightblue;*/
}
.newschunk {
	width: 100%;
	height: 138px;
	position: relative;
	
/*background: lightgrey; */	
}
.newscontent {
	width: 105%; /* 240px */
	height: 108px;
	position: relative;
	z-index: 2;

/*background: #ffffff;*/
}
.newsbak {
	width: 91.266%; /* from AdobeIllustrator data: 209px / 229px */
	height: 100%;
	background: #656565;
	position: absolute;
	top:0;
	right:0;
	z-index: 0;
	transition:width 2s;
	-webkit-transition:width 2s; /* Safari */
	-o-transition:width 2s;
	-moz-transition:width 2s;
	-ms-transition:width 2s;
}
.newsbak:hover{
	width: 100%;
	background: #D17702;
}
.newscontent img {
	width: 38%;
	position: absolute;
	top:12px;
	left:0;
}
hgroup {
	width: 62%;
	position: absolute;
	top: 12px;
	left: 38.75%; /* changed from absolute value in order to be more responsive: 93px / 240px */
	
/*background: brown;*/
}

/* adjust chunks and column positions */
#news1_2 {
	margin-top: 21px;
}
#news2_2 {
	margin-top: 21px;
}
#news3_2 {
	margin-top: 21px;
}
#news2{
	float: left;
 	margin-left: 2.8%; /* ALTERED - absolute value from AdobleIllustrator: 38px; parent width: newsblock 727px */
}
#news3{
	float: left;
	margin-left: 2.8%;
}




/* ----------RIGHT ASIDE---------*/
aside {
	display: inline-block;
	float: right;
	height: 868.5px; /* same as section tag*/
	width: 24.899%; /* 246px / 988px */
	
/*background: lightgreen;*/
}

/* ----------ACCORDION---------*/
.accordion{
	width: 100%;
	height: 522.5px; /* same as showcase*/
	
/*background: lightyellow;*/
}

.accordion .section{
	background: #B2B2B2;
	/*margin-bottom: 9px;*/
}

.accordion h1 {
	height: 32px;
	width: 100%;
	background: #C41E3A;
	font-weight: bold;
}
	
.accordion h1 a {
	display: block;
	padding: 0.6em 4%;
	color: #B2B2B2;
	text-decoration: none;
}

.accordion h1 a:hover {
	text-decoration: none;
	
}

.accordion h1 + div /*select the immediately adjacent sibling div*/ {
	height: 9px;
	overflow: hidden; /*by default, overflow is visible; content of the parent*/
	-webkit-transition: height 0.3s ease-in;
	-moz-transition: height 0.3s ease-in;
	-o-transition: height 0.3s ease-in;
	-ms-transition: height 0.3s ease-in;
	transition: height 0.3s ease-in;
	
}
	
/* following logic: hide when not selected, and show the close button in the selected state*/
div.section {
	position: relative;
}
	
h1 a:nth-child(2) {
	display: inline-block;
	font-size: 1.1em;
	font-weight: normal;
	color: white;
	padding: 3px 4.5%;
	position: absolute;
	top: 0.4em;
	right: 0;
	
/*background: #f90;*/
}

/*use the focus state "#" indicated from the url area to do something*/
.accordion :target h1 a {
	text-decoration: none;
}

.accordion :target h1 a:nth-child(2) /*use the focus state "#" indicated from the url area to do something*/ {
	display: none;
}
	
.accordion :target h1 + div {
	height: 316px;
	margin-bottom: 10px;
}
	
.accordion .section.large:target h1 + div {
	overflow: auto;  /*a scroller added for the large content*/
}

.acdcontenthead{
	position: absolute;
	top: 11px;
	left: 4%;
}
.acdcontenthead+p{ /* reserved content spaces for future usage */
	position: absolute;
	top: 90px;
	left: 4%;
}
#calendarplaceholder { /* temporary placeholder */
	position: absolute;
	top: 11px;
	left: 4%;
}
#largeplaceholder { /* temporary placeholder */
	width: 85%;
	height: 600px;
	position: absolute;
	top: 11px;
	left: 4%;

background: lightgrey;
}
#placeholder { /* temporary placeholder */
	width: 85%;
	position: absolute;
	top: 11px;
	left: 4%;
}
.accordiontextwrap {
	position: relative;
}
.acdcontentmore {
	background-color: #C41E3A;
	position: absolute; 
	right: 4%;/* position absolute, use right instead of margin-right */
	bottom: 15px;
}
.acdcontentmore.readmore p { /*already same value of all variables listed in '.readmore p', specified before */
	margin-top:5%;
	margin-left: 25%;
	

/*background: lightblue;*/
}

/* ----------SOCIAL MEDIA---------*/
.socialmedia {
	width: 100%;
	height: 324px; /* same as newsblock to its left */
	margin-top: 21px;
	overflow: hidden;
	
/*background: red;*/
}
#sm {
	margin-bottom: 4px;
}

.somecontentwrap { 
	width:100%;
	height: 298px;
	background: #B2B2B2;
}
.someplaceholder { /* position the temporary placeholder */
	margin-top: 0.3em;
	margin-left: 4.3%;
	width: 91.4%;
}
.some_tablet_visibility { /* will change for tablet and mobile */
	display:none;
}

/* ----------FOOTER---------*/
footer {
	max-width: 988px;
	margin: 0 auto;
	height: 60px;
	background: #AF1E2D;
}

footer ul {
	inline-height: 1;
	padding: 0 0 1.2%;
	color: #999999;
}
.contact {
	text-align: center;
	font-size: 0.9em;
	padding-top: 1%;

/*background: lightyellow;*/
}

footer li {
	display: inline-block;
}
footer a {
	color: #999999;
}
.links {
	text-align: center;
}
.links li {
	text-transform: uppercase;
	padding: 0 2%;
	border-left: 1px solid #999999;


}
footer li.first {
	padding-left: 0;
	border-left: medium none;
}
.links li a {
	font-weight: 700;
}

/* ----------MEDIA QUERIES---------*/

@media screen and (max-width:899px) {
	
/******** HEADER ********/
nav li{
	text-align: left;
	padding: 0 2.2% 0 2.2%;
}
.nav2 li{
	padding: 0 2.2%;
}

}

@media screen and (max-width:768px) {
	
/******** HEADER ********/
header{
	background: none;
	height: 166px;
}
.menu{
	position:absolute;
	top: 131px;
}
.cornerfunction{
	top: -115px;
}
.backup{
	display: none;
}
.logopadding{
	display: none;
}
.logo{
	width: 177.989px;
	height: 115.834px;
}
.logopic{
	float: left;
	width: 15%;
	margin-top: 10px;
	margin-left: 1%;
}
nav ul{
	margin-left: -15px;
	text-align: center;
}
nav li{
	padding: 0 3.5% 0 3.5%;
}
.nav2 {
    width: 60%;
	margin: 0;
	z-index:1;
	position: absolute;
	right: 2px;
	bottom: 45px;
}
.nav2 ul {
    list-style-type: none;
    text-align: right;
    padding: 0;
	margin: 0;
}
.nav2 li{
    width: auto;
	padding: 0 4.5%;
    display:inline-block;
	color: #656565;
}
.nav2 li:nth-child(2)~li{
	padding: 10px 3.5% 0 3.5%;
	
/*background: red;*/
}
.showcase{
	overflow: hidden;
}

section{
	position: relative;
	z-index: 5;
	height: 1356px;
	margin-top: 0;
}

/******** MAIN CONTENT ********/
article{
	width: 100%;
	height: 828px; /* have more space for tablet viewpoint before the footer */
}

/******** the whole HIGHLIGHTER ********/
.showcase {
	height: 490px; /* 207+18+297.5*/
	width: 100%;
	
/*background: lightgrey;*/
}
.highlighter {
	height: 250px;
	width: 100%;
	position: relative;

background: #656565;
}
#highlighterImage{
	margin-top: -21.5px;
	height: 290px;
}
figcaption {
	height: 47px;
	background-color: rgba(101,101,101,0.5);  /* opacity:0.5; */
	top: 203px;
}
#highlightermore{
	display: none;
}
figcaption h3 {
	padding-left: 10px;
	padding-top: 4px;
}
figcaption p {
	margin-top: 3px;
	line-height: 140%;
	margin-right: 20px;
}
.morestory {
	margin-top: 0px;/* the dark grey area attach to the figcaption */
	padding-top: 18px;
	padding-left:  5%;
	padding-right: 5%;
	height: 164px;
	background: #656565;
	position: relative;
}
.storychunk {
	width: 28%; /* 234px / 727px */
	height: 145px;

/*background: #fff;*/
}
.storyheader {
	width: 100%;
	height:23px;
	font-size: 0.78em;
}
.storybody {
	height: 121.713px;
}
.storypic{
	min-height: 121.713px; /* catering to the parent class height */
}
#st2 {
	margin-left: 2.65%;
}
#st3 {
	margin-left: 2.65%;
}
.showcase { /* adjust the height so that following news event part is followed within reasonable space*/
	height: 440px; 
	
/*background: lightgrey;*/
}

/******** ASIDE ********/
aside {
	float: none;
	width: 100%;
	height: 524px; /* it is minimized before the footer */
	display: block;
	margin-top: 0;
}

/******** ACCORDION ********/
.accordion {
	width: 32.03125%;/* 246px/768px*/
	display: inline-block;
	float: left;
	
/*background: lightgreen;*/
}
/******** SOCIAL MEDIA ********/
.socialmedia {
	width: 61.97917%; /* 476px/768px */
	min-height: 524px; /* same as accordion */
	float: right;
	margin: 0;
}
.someplaceholder { /* position the temporary placeholder */
	margin-top: 0.3em;
	margin-left: 4.3%;
	width: 91.4%;
}
.some_tablet_visibility { /* the place holder */
	display:block;
	min-height: 478px;
}
.some_web_visibility { /* the place holder */
	display:none;
}
.somecontentwrap{
	width: 100%;
	height: 496px;
	padding-top: 0.3em;
}

}

@media screen and (max-width:718px) {
.storyheader {
	height: 33px;
}
}

@media screen and (max-width:570px) { 
.nav2 {
    width: 55%;
}
}

@media screen and (max-width:549px) {
nav li{
	padding: 0 1.9% 0 1.9%;
}
}

@media screen and (max-width:525px) { /* change the menu and header layout */
.people_web_visibility { /* the people dropdown box */
	display:none;
}
.people_tablet_visibility { /* the people dropdown box */
	display: inline-block;
	width: 145px;
	height: 27px;
	padding: auto;
	float: right;
	text-align: center;
	background-color: rgba(101,101,101,0.3);  /* opacity:0.3; */
}
.people_tablet_visibility p {
	display: inline-block;
	margin-top: 5.5px;
	font-size: 0.9em;
	color: #656565;
}
.people_tablet_visibility p + svg {
	display: inline-block;
}
.menu_web_visibility { /* the menu icon */
	display:none;
}
.menu_tablet_visibility { /* the menu icon */
	display: block;
	float: right;
	margin-top: 7px;
	margin-right: 20px;
}
}

@media screen and (max-width:503px) {
.cornerfunction {
	top: -119px;

/* background-color: rgba(196,30,58,0.3);  /* opacity:0.3; */ 
}
.search_web_visibility { /* the search form */
	display:none;
}
.search_tablet_visibility { /* the search icon */
	display: inline-block;
}
}

@media screen and (max-width:441px) {
.storyheader {
	height: 43px;
}
}

@media screen and (max-width:400px) { /* eliminate the logopic */
.logopic {
	display: none;
}
}

@media screen and (max-width:365px) {
.people_tablet_visibility { /* the people dropdown box */
	width: 109px;
}
#highlighterImage {
	width: 163%;
}
}

@media screen and (max-width:335px) {
section{
	height: 1790px;
}

figcaption {
	height: 62px;
	top: 0px;
}
figcaption p {
	margin-top: 3px;
	line-height: 126%;
	margin-right: 5px;
}
figcaption img {
	display:block;
	position: absolute;
	top: 10px;
	right: 4px;
}
.morestory {
	display: none;
}
.showcase{
	height: 270px; /* change here */
}

.newsblock {
	height: 500px;
	overflow: hidden;
}
hgroup {
	width: 50%;
	margin-left: 10px;
}
.newscolumn {
	width: 100%;
}
#news2 {
	margin-top: 20px;
}
.accordion {
	width: 100%;
}
.socialmedia {
	width: 100%;
	margin-top: 20px;
}
.some_tablet_visibility { /* the place holder */
	display:none;
}
.some_web_visibility { /* the place holder */
	display:block;
}
.somecontentwrap {
	height: 385px;
}
footer {
	height: 149px;
}
.contact {
	display: none;
}
}