用户:LettuceIce/steam上的CPKrobot攻略模拟器/styles.css

a {
    text-decoration: none;
    color: inherit;
    cursor: inherit;
}


/** 根据页面改变图片大小 **/
img.x20width {
    width: 20%;
    height: auto;
    overflow: hidden;
    margin:0;
    padding:0;
}

img.x98width {
    width: 98%;
    height: auto;
    overflow: hidden;
    margin:0;
    padding:0;
}

::selection {
	background: #54a5d4;
	text-shadow: 1px 1px 2px rgba(0,0,0,.67);
	color: #fff;
}

@media screen and (max-width: 480px) {
	.page_background {
		background-color: #1B2938;
		padding:0.2rem 0.2rem 0.2rem 0.2rem; 
		font-family: Motiva Sans, Arial, Helvetica, sans-serif;
	}
}

@media screen and (min-width: 481px) and (max-width: 768px) {
	.page_background {
		background-color: #1B2938;
		padding:0.5rem 0.5rem 0.5rem 0.5rem; 
		font-family: Motiva Sans, Arial, Helvetica, sans-serif;
	}
}

@media screen and (min-width: 769px) {
	.page_background {
		background-color: #1B2938;
		padding:3rem 16rem 3rem 16rem; 
		font-family: Motiva Sans, Arial, Helvetica, sans-serif;
	}
}

.top_list {
	height: 35px;
	margin-top: 7px;
	background: linear-gradient(90deg, rgba(62, 103, 150, 0.919) 11.38%, rgba(58, 120, 177, 0.8) 25.23%, rgb(15, 33, 110) 100%);
	box-shadow: 0 0 3px rgba( 0, 0, 0, 0.4);
}

.category_list {
	color: #8f98A0;
	font-size:12px; 
	font-weight: normal; 
	padding:1rem 0 0.125rem;
}

.main_title {
	display:inline-block;
	color:white;
	font-size: 26px;
	line-height: 32px; 
	padding-bottom:5px;
}

.flex_wrap {
	display:flex; 
	flex-wrap: wrap;
}

.flex_wrap_row {
	display:flex;
	flex-direction:row-reverse;
	flex-wrap: wrap;
}

.info_box_right {
	min-width: 20rem; 
	flex-basis:32%; 
	flex-shrink:0; 
	flex-grow:1;
}

.info_box_right_thumb {
	min-width: 16rem; 
	flex-basis:50%;
	flex-shrink:0; 
	flex-grow:1;
}

.info_box_right_description_box {
	min-width: 16rem; 
	flex-basis:50%; 
	flex-shrink:0; 
	flex-grow:1; 
	margin-top:0.25rem;
}

.info_box_right_description {
	color: #c6d4df;
	line-height:1.3; 
	padding-right:1rem; 
	padding-bottom: 1rem;
}

.info_box_right_list {
	line-height:16px; 
	padding-bottom: 10px;
}

.info_box_right_list_key {
	color: #556772;
	font-size: 10px; 
	flex:3.5;
}

.info_box_right_list_value {
	flex:6.5;
}

.info_box_right_tagtitle {
	color: #556772;
	font-size:12px;
}

.info_box_right_tag {
	display:inline-block;
	padding:0 7px;
	color: #67c1f5;
	background-color: rgba( 103, 193, 245, 0.2 );
	margin:0 2px 3px 0;
	border-radius: 2px;
	font-size:11px;
}

.info_box_left {
	min-width: 20rem;
	flex-basis:62%;
	flex-shrink:0;
	flex-grow:1;
}

.info_box_left_scrollbox {
	display:flex; 
	flex-direction: column; 
	margin-right: 12px;
}

.info_box_left_scrollbox_thumb {
	display:block; 
	height:69px; 
	flex-basis:75%;
}

.info_box_left_scrollbox_scrollbar {
	display: flex; 
	margin-bottom:10px; 
	flex-basis:25%;
}

.prepurchase_options_box {
	width: 100%;
	background: rgba( 0, 0, 0, 0.2 );
	margin-bottom:16px;
	padding:16px 0 16px 0;
	font-size:15px;
}

.prepurchase_option {
	border-radius:2px;
	padding:3px 15px 3px 15px;
	display: inline-block;
	color: #67c1f5;
	background: rgba( 103, 193, 245, 0.2 );
	margin-right:2px;
}

.recommendation_box {
	min-width: 16rem; 
	flex-basis:34%; 
	flex-shrink:0; 
	flex-grow:1;
	background: linear-gradient(to right,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 100%); 
	padding-bottom:32px;
}

.recommendation_title {
	background-color: rgba(0,0,0,0.2);
	padding: 10px; 
	color: #fff;
	font-size: 18px;
}

.recommendation_yes {
	font-weight:900;
	color:green;
	font-size:14px;
}

.recommendation_line {
	height: 1px;
	margin: 10px 0;
	border: none;
	background-color: #273747;
	display: block;
}