/* style for interactive flowchart */
.prereq {
    display:inline-block;
    background-color:#cd0000;
    text-align: center;
    font-size:10px;
    margin: 10px 10px 15px 10px;
    width: 100px;
    padding: 10px;
    border-radius: 5px 5px 5px 5px;
    border: 1px solid black;
}
.coreq {
    display:inline-block;
    background-color: #e6e600;
    text-align: center;
    font-size:10px;
    margin: 10px 10px 15px 10px;
    width: 100px;
    padding: 10px;
    border-radius: 5px 5px 5px 5px;
    border: 1px solid black;
}
.postreq {
    display:inline-block;
    background-color:#BFEFFF;
    text-align: center;
    font-size:10px;
    margin: 10px 10px 15px 10px;
    width: 100px;
    padding: 10px;
    border-radius: 5px 5px 5px 5px;
    border: 1px solid black;
}

/*So here's where we start to build the actual flow chart*/
.flowsheet {
    background-color: #f5f5f5;
    position: relative;
    width: 740px;
    height: 625px;
    border-radius: 25px;
    box-shadow: 10px 10px 5px;
    text-align:center;
}
.flowsheet-title {
    text-align: center;
    width: 700px;
    height: 20px;
    margin: 0px auto 30px auto;
    background-color:#f5f5f5;
    font-size:20px;
    border-radius: 5px;
}
/*individual cells - these are the boxes that say "ENGL 1013", etc.*/
 .flowsheet-content {
    border:none;
    background-color:#f5f5f5;
    width:735px;
    border-radius: 10px;
}
 .flowsheet-content > div {
    display:inline-block;
    background-color: #ffffff;
    text-align: center;
    font-size:10px;
    margin: 10px;
    width: 100px;
    padding: 10px;
    border-radius: 5px 5px 5px 5px;
    border: 1px solid black;
}
.flowsheet-content > div:hover {
    background-color: #b5b5b5;
}
/*blank cells - these are the gray sections that don't actually have anthing in them, but still need some kind of place holder*/
 .flowsheet-content .flowsheet-blank {
    display:inline-block;
    background-color: #f5f5f5;
    color: #000000;
    text-align: center;
    font-size:10px;
    /*float: center;*/
    margin: 10px 10px 15px 10px;
    width: 100px;
    padding: 10px;
    border-radius: 5px 5px 5px 5px;
    border: none;
}
.flowsheet-content > .flowsheet-blank:hover {
    background-color: #f5f5f5;
}
/*description box*/
 .flowsheet-content > div :nth-child(2) {
    display: none;
}
.flowsheet-content > div:hover :nth-child(2) {
    background:#ffffff;
    position:absolute;
    top:60px;
    left:790px;
    display:inline-block;
    border:1px solid #000;
    border-radius: 5px;
    font-size:12px;
    width: 185px;
    padding:5px;
}
/*colors*/
div.flowsheet-content .pre {
    background-color:#cd0000;
}
div.flowsheet-content .post {
    background-color:#BFEFFF;
}
div.flowsheet-content .co {
    background-color: #E6E600;
}

/* style for info card */

.card {
    position: relative;
    border-radius: 8px;
    margin-bottom: 30px;
	background: #f0f0f0;
}

.card-image {
    position: relative;
}

.card-image img {
    border-radius: 8px 8px 0px 0px;
    position: relative;
    margin: 0;
    width: 100%;
}

.card-content {
    padding: 20px;
}


.card-content p {
    margin: 0;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: .92em !important;
    border-bottom: 4px dotted white;
}

.card-content li {
    font-size: .92em !important;
}

.card-content h3 {
    font-size: 22px !important;
    margin-bottom: 10px;
}

/* style for pie menu */

.pie-outer {
    padding: 0;
    margin: 0;
    position: relative;
    border-radius: 50%;
    padding-top: 40%;
	margin: auto;
	padding-bottom: 45%;
}

.pie {
    position: absolute;
    left: 50%;
		padding-top: 6%;
    border-radius: 50%;
    width: 80%;
    /* angle = (360 / num of segments), rotate = (90 - (angle / 2)) */
    -webkit-transform: translate(-50%, -50%) rotate(30deg);
    -ms-transform: translate(-50%, -50%) rotate(30deg);
    transform: translate(-50%, -50%) rotate(30deg);
}

.pie ul {
    list-style-type: none;
}

.pie ul:after {
	content: " ";
    display: block;
    padding-top: 100%;
}

.pie li {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 7px solid #fff;
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

/* angle = (360 / num of segments), rotate = ((nth-child - 1) x angle), skew = (90 - angle) */
.pie li:nth-child(1) {
    -webkit-transform: rotate(0deg) skew(-30deg);
    -ms-transform: rotate(0deg) skew(-30deg);
    transform: rotate(0deg) skew(-30deg);
}

.pie li:nth-child(2) {
    -webkit-transform: rotate(120deg) skew(-30deg);
    -ms-transform: rotate(120deg) skew(-30deg);
    transform: rotate(120deg) skew(-30deg);
}

.pie li:nth-child(3) {
    -webkit-transform: rotate(240deg) skew(-30deg);
    -ms-transform: rotate(240deg) skew(-30deg);
    transform: rotate(240deg) skew(-30deg);
}

.pie a {
	line-height: 6;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    text-decoration: none;
    text-align: center;
    color: #fff;
    /* angle = (360 / num of segments), skew = (angle - 90), rotate = (angle / 2 - 90) */
    -webkit-transform: skew(30deg) rotate(-30deg);
    -ms-transform: skew(30deg) rotate(-30deg);
    transform: skew(30deg) rotate(-30deg);
}

.pie li:hover {
    background: rgba(255, 255, 255, 0.25);
	background-size: cover;
}