*{
margin:0;
padding:0;
box-sizing: border-box;
}
ul, li {
list-style: none;
font-size: 14px;
}
.clear{
clear: both;
}
a{
text-decoration: none;
color: #3366cc;
}
a:hover{
color:#7da0e5;
}
.container{
width: 1000px;
margin: auto;
padding: 20px;
}
/*Header*/
.vector-page-toolbar{
display: flex;
box-shadow: 0 1px #c8ccd1;
margin-bottom: 1px;
padding-bottom: 10px;
}
.vector-page-toolbar .left-navigation{
display: flex;
flex-grow: 1;
}
.vector-page-toolbar .left-navigation ul li.active a{
border-bottom: 1px solid black;
padding: 10px;
font-weight: 600;
}
.vector-page-toolbar .left-navigation ul li a:hover{
border-bottom: 1px solid black;
padding: 10px;
}
.vector-page-toolbar .left-navigation ul li a{
padding: 10px;
}
.vector-page-toolbar ul{
display: flex;
}
.vector-page-toolbar ul li{
padding:0px 20px 0px 0px;
width: auto;
}
.main-header{
display:flex;
flex-wrap: wrap;
border:1px solid #e0e0e0;
margin-top: 15px;
padding:15px;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/e3/Wikipedia_logo_letters_banner.svg);
background-position: right;
background-repeat: no-repeat;
background-color: #f8f9fa;
border: 1px solid #c8ccd1;
border-radius: 5px 5px 0 0;
}
.main-header-left{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-basis: 50%;
}
.main-header-left_title{
text-transform: inherit;
font-size: 28px;
margin: 0px!important;
font-family: inherit;
}
.main-header_slogan{
padding:10px 0px;
}
.main-header-right{
flex-basis: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main-header_rightInfo a{
color:#3366cc;
}
.main-header-rightMenu ul{
display: flex;
align-items: center;
}
.main-header-rightMenu ul li{
padding:10px;
font-weight: 600;
}
.main-header-bottom{
display:flex;
flex-wrap: wrap;
border:1px solid #e0e0e0;
border-top:0px;
color:#000;
font-weight: 600;
border-radius: 0 0 5px 5px;
}
.main-header-bottom a{
color:#3366cc;
padding:0px 5px;
}
.main-header-bottom-left{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-basis: 50%;
padding:10px;
}
.main-header-bottom-left ul,.main-header-bottom-right ul{
display: flex;
}
.main-header-bottom-right{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-basis: 50%;
}
.main-header-bottom li{
font-weight: 500;
padding-left: 5px;
}
/*Header*/
/*Main-Body*/
.main-body {
display: flex;
margin-top: 20px;
}
.main-body-left {
flex-basis: 50%;
margin-right: 10px;
}
.main-body-right {
flex-basis: 50%;
margin-left: 10px;
}
.main-body .myCard{
border:1px solid #e0e0e0;
margin-bottom:10px;
border-radius: 5px;
}
.main-body .myCard .colorHead{
padding:10px;
}
.main-body .myCard .colorHead .myCardContent p{
text-align: start;
}
.main-body .myCard .colorHead .iconGolden {
display: flex;
align-items: center;
}
.main-body .myCard .colorHead .iconGolden i{
width: 36px;
height: 36px;
background: #F2C94C;
color:#fff;
display: flex;
justify-content: center;
align-items: center;
}
.main-body .myCard .colorHead .iconGreen {
display: flex;
align-items: center;
}
.main-body .myCard .colorHead .iconGreen i{
width: 36px;
height: 36px;
background: #27ae60;
color:#fff;
display: flex;
justify-content: center;
align-items: center;
}
.main-body .myCard .colorHead .iconPurple {
display: flex;
align-items: center;
}
.main-body .myCard .colorHead .iconPurple i{
width: 36px;
height: 36px;
background: #bb6bd9;
color:#fff;
display: flex;
justify-content: center;
align-items: center;
}
.main-body .myCard .colorHead .iconBlue {
display: flex;
align-items: center;
}
.main-body .myCard .colorHead .iconBlue i{
width: 36px;
height: 36px;
background: #2d9cdb;
color:#fff;
display: flex;
justify-content: center;
align-items: center;
}
.main-body .myCard .colorHead .iconOrange {
display: flex;
align-items: center;
}
.main-body .myCard .colorHead .iconOrange i{
width: 36px;
height: 36px;
background: #f2994a;
color:#fff;
display: flex;
justify-content: center;
align-items: center;
}
.main-body .myCard .colorHead .iconGray {
display: flex;
align-items: center;
}
.main-body .myCard .colorHead .iconGray i{
width: 36px;
height: 36px;
background: #828ea1;
color:#fff;
display: flex;
justify-content: center;
align-items: center;
}
.main-body .myCard .colorHead span{
padding-left: 10px;
font-weight: 600;
}
.myCardBottom{
border:0px;
border-top:1px solid #e0e0e0;
font-weight: 600;
}
.myCardBottom ul{
display: flex;
}
.myCardBottom ul li{
padding:10px;
}
.fieldBox{
display: flex;
justify-content: start;
align-items: center;
}
.fieldBox i{
color:#3366cc;
font-size: 34px;
}
.rightField{
display: flex;
flex-direction: column;
}
.rightFieldHead{
font-weight: 600;
padding: 0px 10px;
text-align: start;
}
.rightFieldHead a{
color:#000000;
}
.rightFieldList{padding:7px;}
.rightFieldList ul{
display: flex;
flex-wrap: wrap;
padding-bottom: 10px;
border-bottom: 1px dotted #e0e0e0;
}
.rightFieldList ul li{
margin: 2px;
font-size: 14px;
}
.rightFieldList ul li a{
color:#3366cc;
}
/*Main-Body*/
.main-body-bottom{
margin-top: 20px;
}
.main-body-bottom .myCard{
border:1px solid #e0e0e0;
margin-bottom:10px;
}
.main-body-bottom .myCard .colorHead{
padding:5px;
}
.main-body-bottom .myCard .colorHead .iconPink {
display: flex;
align-items: center;
}
.main-body-bottom .myCard .colorHead .iconVono {
background: #fff4dd;
display: flex;
align-items: center;
}
.main-body-bottom .myCard .colorHead .iconPink i{
width: 36px;
height: 36px;
background: #e066b4;
color:#fff;
display: flex;
justify-content: center;
align-items: center;
}
.main-body-bottom .myCard .colorHead .iconVono i{
width: 36px;
height: 36px;
background: #e066b4;
color:#fff;
display: flex;
justify-content: center;
align-items: center;
}
.main-body-bottom .myCard .colorHead .iconSoft {
background: #ededed;
display: flex;
align-items: center;
}
.main-body-bottom .myCard .colorHead .iconSoft i{
width: 36px;
height: 36px;
background: #bdbdbd;
color:#fff;
display: flex;
justify-content: center;
align-items: center;
}
.main-body-bottom .myCard .colorHead .iconPink a,.main-body-bottom .myCard .colorHead .iconSoft a{
font-weight: 600;
}
.main-body-bottom .myCard .colorHead .iconVono a,.main-body-bottom .myCard .colorHead .iconSoft a{
font-weight: 600;
}
.body-bottom-img1{
display: flex;
justify-content: center;
align-items: center;
}
.body-img-text{
display: flex;
justify-content: center;
align-items: center;
padding:10px;
width: 100%;
}
.body-img-text p{
width: 50%;
}
.content-improvement{
display: flex;
margin-top: 20px;
}
.content-improvement-left {
flex-basis: 60%;
margin-right: 10px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.content-improvement-item {
width: 49%;
margin-top: 10px;
}
.content-improvement-item a{
display: flex;
width: 100%;
font-size: 26px;
font-weight: 600;
padding-bottom: 5px;
}
.content-improvement-item p{
padding-bottom: 10px;
}
.content-improvement-right{
flex-basis: 40%;
margin-left: 10px;
}
.content-improvement-item:hover a{
color:#fff;
}
.red-improvement{
border-bottom: 5px solid #dd3333;
display: flex;
justify-content: space-between;
align-items: center;
padding:10px
}
.red-improvement .icon i img,.blue-improvement .icon i img,.green-improvement .icon i img{
padding-right: 20px;
opacity: .1;
}
.blue-improvement{
border-bottom: 5px solid #3366cc;
display: flex;
justify-content: space-between;
align-items: center;
padding:10px
}
.green-improvement{
border-bottom: 5px solid #00af89;
display: flex;
justify-content: space-between;
align-items: center;
padding:10px
}
.red-improvement:hover{
border-bottom: 5px solid #dd3333;
background: #dd3333;
color:#fff;
cursor: pointer;
transition: .2s;
}
.blue-improvement:hover{
border-bottom: 5px solid #3366cc;
background: #3366cc;
color:#fff;
transition: .2s;
cursor: pointer;
}
.green-improvement:hover{
transition: .2s;
border-bottom: 5px solid #00af89;
background: #00af89;
color:#fff;
cursor: pointer;
}
.improvement-right-head{
font-weight: 600;
padding: 20px 0px;
}
.btnHref{
margin-top: 20px;
display: flex;
justify-content: center;
}
.btnColors{
background: #3366cc;
color:#fff;
border-radius: 2px;
padding: 5px 20px;
}
ul.specialList li{
list-style: disc !important;
padding:10px;
}
ul.specialList li a{
text-align: start;
}
/*Responsive*/
/* Ekran boyutları 1200 piksel ve üzeri için */
@media only screen and (min-width: 1200px) {
.container {
width: 1140px;
margin: auto;
padding: 20px;
}
}
/* Ekran boyutları 992-1199 piksel arası için */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.container {
width: 960px;
margin: auto;
padding: 20px;
}
}
/* Ekran boyutları 768-991 piksel arası için */
@media only screen and (min-width: 768px) and (max-width: 991px) {
.container {
width: 720px;
margin: auto;
padding: 20px;
}
}
/* Ekran boyutları 576-767 piksel arası için */
@media only screen and (min-width: 576px) and (max-width: 767px) {
.container {
width: 540px;
margin: auto;
padding: 20px;
}
}
/* Ekran boyutları 575 piksel ve altı için */
@media only screen and (max-width: 575px) {
.container {
width: 100%;
margin: auto;
padding: 20px;
}
.main-wikimedia-list {
display: none;
}
.main-wikimedia-bottomImg {
display: flex;
justify-content: center;
height: auto;
padding: 10px;
}
.rightFieldList {
padding:0;
}
.rightFieldList ul {
padding: 0px 10px;
}
.fieldBox {
align-items: start!important;
}
.rightFieldHead p {
margin: 0!important;
}
}
@media only screen and (min-width: 575px) {
.main-wikimedia-bottomImg{
display:none;
}
.rightFieldHead p {
margin: 0!important;
}
}
@media screen and (min-width: 300px) and (max-width: 1050px) {
.myCardBottom{
display: none;
}
.vector-page-toolbar .left-navigation ul li a{
font-size: 13px;
}
.main-header_rightInfo{
font-size: 12px;
}
.main-header-rightMenu{
font-size: 12px;
}
.main-body{
text-align: start;
flex-direction: column;
}
.main-header-bottom{
display: none;
}
.vector-page-toolbar .right-navigation{
display: none;
}
.main-header{
flex-direction: column;
padding: 5px;
}
.main-header-left h1{
font-size: 18px;
}
.main-header-left span{
font-size: 13px;
}
.main-body-left{
margin: 0px;
}.main-body-right{
margin: 0px;
}
.content-improvement{
flex-direction: column;
}
.content-improvement-left{
flex-direction: column;
}
.content-improvement-item{
flex-direction: column;
width: 100%;
text-align: center;
}
.content-improvement-item a{
justify-content: center;
}
.red-improvement .icon i,.blue-improvement .icon i,.green-improvement .icon i{
font-size: 52px;
padding-right: 0px;
color:#e4e4e4;
}
.main-wikimedia-list li{
display: flex;
flex-basis: 50% !important;
}
.body-bottom-img1 img{
width: 100%;
}
.body-img-text{
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
width: 100%;
border:1px solid #e0e0e0;
}
.body-img-text p{
width: 100%;
}
.fastlik {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.item-button {
background: #ffffff;
padding: 5px 10px;
border-radius: 5px;
border: solid 1px #cfcfcf;
}
span.item-button-text {
color: #000000;
}
.item-button-text:hover{
color: gray;
}
.noresize {
height: auto!important;
}
}
