Team:SSTi-SZGD/css/Notebook

body{ min-width: 1024px; min-height: 489px; position: relative;}

.SSTi-SZGD{ background: url() no-repeat top center; padding-top: 15px; max-height: 910px;}

/*custom header*/ .header .nav .Project span,.header .nav .Project li:nth-of-type(7) a{ color: #FAEE0D;}

/*Content*/ .Content{ width: 100%; height: 600px; background: white; padding: 100px 0; padding-bottom: 100px;} .Content .title{ width: 100%; height: 185px; text-align: center; font-size: 6rem; font-weight: 600; color: #394c53; padding: 50px; letter-spacing: 2px;}

/*calendar*/ .calendar{ width: 385px; margin-left: 15%; color: #333; position: relative;} .calendar .month{ position: relative; width: 100%; height: 55px; text-align: center; font-size: 3rem; padding: 8px 0; color: white;} .calendar .week{ width: 100%; height: 30px; font-size: 1.5rem; padding: 6px 0; color: white;} .calendar .week ul li{ float: left; width: 55px; text-align: center;} .calendar .day_x{ float: left;} .calendar .day_x li{ width: 40px; text-align: center; height: 40px; padding: 13px 0; margin: 9px 7.5px; border-radius: 100%; cursor: default;} .calendar .sth{ position: relative;} .calendar .focus{ width: 8px; height: 8px; position: absolute; top: 0; right: 0px; background: #009E6D; border-radius: 100%; cursor: pointer;} .sth{ cursor: pointer !important;}

/*switch*/ .calendar .icon_left img{ position: absolute; height: 25px; width: 25px; margin: auto; top: 0; bottom: 0; left: 50px; cursor: pointer;} .calendar .icon_right img{ position: absolute; height: 25px; width: 25px; margin: auto; top: 0; bottom: 0; right: 50px; cursor: pointer;}

/*Default display*/ .March .day_x:nth-of-type(2) .sth{ background: #537BB6; color: white;} .March .day_x:nth-of-type(2) .sth .focus{ display: none;}

/*hover*/ .March .sth:hover{ background: #537BB6 !important; color: white !important;} .March .sth:hover .focus{ display: none !important;} .April .sth:hover{ background: #7F4599 !important; color: white !important;} .April .sth:hover .focus{ display: none !important;} .May .sth:hover{ background: #3C4352 !important; color: white !important;} .May .sth:hover .focus{ display: none !important;} .June .sth:hover{ background: #DB9A37 !important; color: white !important;} .June .sth:hover .focus{ display: none !important;} .July .sth:hover{ background: #B9592E !important; color: white !important;} .July .sth:hover .focus{ display: none !important;} .August .sth:hover{ background: #A34233 !important; color: white !important;} .August .sth:hover .focus{ display: none !important;} .September .sth:hover{ background: #764595 !important; color: white !important;} .September .sth:hover .focus{ display: none !important;} .October .sth:hover{ background: #5FA768 !important; color: white !important;} .October .sth:hover .focus{ display: none !important;}

/*month+focus*/ .March .month,.March .focus{ background: #5DA0CA;} .April .month,.April .focus{ background: #87589E;} .May .month,.May .focus{ background: #424D5F;} .June .month,.June .focus{ background: #E2C337;} .July .month,.July .focus{ background: #CD7F34;} .August .month,.August .focus{ background: #C65340;} .September .month,.September .focus{ background: #87589E;} .October .month,.October .focus{ background: #75B574;}

/*Sun*/ .March .day_x:nth-of-type(1) ul li{ color: #5DA0CA;} .April .day_x:nth-of-type(1) ul li{ color: #87589E;} .May .day_x:nth-of-type(1) ul li{ color: #424D5F;} .June .day_x:nth-of-type(1) ul li{ color: #E2C337;} .July .day_x:nth-of-type(1) ul li{ color: #CD7F34;} .August .day_x:nth-of-type(1) ul li{ color: #C65340;} .September .day_x:nth-of-type(1) ul li{ color: #87589E;} .October .day_x:nth-of-type(1) ul li{ color: #75B574;}

/*week*/ .March .week{ background: #537BB6;} .April .week{ background: #7F4599;} .May .week{ background: #3C4352;} .June .week{ background: #FBBD1C;} .July .week{ background: #B9592E;} .August .week{ background: #A34233;} .September .week{ background: #764595;} .October .week{ background: #5FA768;}

/*hide*/ .March,.April,.May,.June,.July,.August,.September,.October{ box-shadow: 10px 10px 5px #888888; position: absolute; background: #FCFDFE; height: 390px; display: none;} .March{ display: block;}

/*Sth*/ .Sth{ box-shadow: 10px 10px 5px #888888; width: 40%; height: 390px; background: #5DA0CA; margin-right: 15%; float: right; font-size: 2rem; padding: 15px; color: #FFFFFF; line-height: 1.5;}

/*--1600--*/ @media only screen and (max-width: 1600px) { .calendar{ margin-left: 12%;} .Sth{ margin-right: 12%;} }

/*--1366--*/ @media only screen and (max-width: 1366px) { .calendar{ margin-left: 10%;} .Sth{ margin-right: 10%;} }

/*--1190--*/ @media only screen and (max-width: 1190px) { html{ font-size: 50%;} .header .logo span{ margin: 15px 0;} .header .nav .Project{ width: 100px;} .header .nav .Application{ width: 100px;} .header .nav .Human_Practices{ width: 140px;} .header .nav .Achievement{ width: 120px;} .header .nav .Team{ width: 95px;} .header .nav .mainnav span{ padding-top: 8.5px; margin-bottom: 21px;} }