/*	Style for Tre.it
	------------------------------------------------ */
@import url("reset.css");
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,700,700i&display=swap');

/*html, body {width: 100%; height: 100%; height: auto;}*/

body {background-color: #FFFFFF; font-family: 'Montserrat', sans-serif;} /* iOS - Android - Windows Phone */

html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

.box_BodyContent {padding-top: 24px;}
.tit_Header {font-size: 20px; line-height: 24px; font-weight: 600; color: #333333; padding: 0 16px 20px 16px;}
.txt_Paragraph {font-size: 16px; line-height: 20px; font-weight: 500; color: #333333; padding: 8px 16px 16px 16px;}
	.txt_Paragraph a:link, .txt_Paragraph a:visited {color: #FF6A00; text-decoration: none;}
.txt_Note {font-size: 14px; line-height: 18px; font-weight: 500; color: #646464; padding: 0 16px 16px 16px;}

.txt_Paragraph p {margin-bottom: 1em;}
.txt_Paragraph small {font-size: 0.9em;}
.txt_Paragraph big {font-size: 1.1em;}
.txt_Paragraph strong, .txt_Paragraph b {font-weight: 700;}
.txt_Paragraph u {text-decoration: underline;}
.txt_Paragraph i, .txt_Paragraph em {font-style: italic;}
.txt_Paragraph ol {list-style: decimal;}
.txt_Paragraph ul {list-style: disc;}
.txt_Paragraph address {font-style: italic;}
.txt_Paragraph blockquote {margin: 0.5em 2em;}
.txt_Paragraph h1, .txt_Paragraph h2, .txt_Paragraph h3, .txt_Paragraph h4, .txt_Paragraph h5, .txt_Paragraph h6, .txt_Paragraph address, .txt_Paragraph dl, .txt_Paragraph ul, .txt_Paragraph ol {margin: 0.5em 0;}
.txt_Paragraph ol, .txt_Paragraph ul {margin-left: 1.4em; margin-top: 0.5em; margin-bottom: 0.5em;}
html>/**/ body .txt_Paragraph ol, html>/**/ body .txt_Paragraph ul {margin-left: 0; padding-left: 1.1em;}

.tit_SubHeader {clear: both; font-size: 14px; font-weight: 600; color: #FF6A00; background-color: #E4E4E4; border-top: 1px solid #CCCCCC; padding: 26px 16px 12px 16px;}
.txt_Paragraph .tit_SubHeader {margin: 20px -16px 20px -16px;}


.list_Link li {border-top: 1px solid #E5E5E5; clear: both; float: left; width: 100%;}
.list_Link li a {clear: both; float: left; width: 100%; border-right: 10px; padding: 18px 40px 18px 16px; word-wrap: break-word;
font-size: 16px; line-height: 20px; background-position: right center; background-image: url(../imgs/mico_open_card.png); background-repeat: no-repeat; border-right: 14px solid #FFFFFF;}
.list_Link a:link, .list_Link a:visited {font-weight: 400; color: #333333; text-decoration: none;}

.box_Img {padding-top: 12px;}
.img_Centered {width: 100%; padding-bottom: 10px;}
.img_Centered img {margin: 0 auto;}
.img_Left {float: left; padding-left: 8px; padding-right: 10px; padding-bottom: 10px;}
.img_Right {float: right; padding-right: 8px; padding-left: 10px; padding-bottom: 10px;}

.box_Troubleshooting {clear: both; float: left; width: 100%; background-color: #E4E4E4;}
.box_Troubleshooting a  {position: relative; display: block; background-color: #FFFFFF; height: 160px; text-decoration: none; border-radius: 2px; margin: 0 8px 8px 8px; box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.4);}
.box_Troubleshooting .tit_Card {position: absolute; left: 16px; top: 8px; font-size: 10px; text-transform: uppercase; color: #646464; font-weight: 700; line-height: 24px; padding-right: 28px; background-image: url(../imgs/mico_open_card.png); background-position: right center; background-repeat: no-repeat;}
.box_Troubleshooting .txt_Action {position: absolute; right: 16px; bottom: 16px; font-size: 14px; text-transform: uppercase; color: #FFFFFF; font-weight: 500;}
.box_Troubleshooting .txt_Paragraph {position: absolute; top: 36px; left: 0; margin-right: 180px; padding: 0 0 16px 16px;}
.box_Troubleshooting .box_Img {position: absolute; top: 0; width: 172px; height: 160px; overflow: hidden; padding: 0;}
.box_Troubleshooting .img_Right {right: 0; border-radius: 0 2px 2px 0;}
.box_Troubleshooting .img_Left {left: 0; border-radius: 2px 0 0 2px;}

.box_Commands {clear: both; float: left; width: 100%;}
.txt_Paragraph .box_Commands {margin-top: 20px;}
a.btn_Button:link, a.btn_Button:visited {font-size: 14px; line-height: 36px; font-weight: 500; color: #FFFFFF; text-transform: uppercase; text-align: center; text-decoration: none; display: block; margin: 16px; padding: 0 16px; height: 36px; background-color: #FF6A00; border-radius: 2px;}

@media(min-width: 600px){
	.box_BodyContent {width: 496px; margin: 0 auto;}
}
@media(max-width: 600px){
	.img_Centered img {width: 100%;}
}
@media(max-width: 359px){
	.box_Troubleshooting .txt_Paragraph {margin-right: 160px;}
	.box_Troubleshooting .box_Img {width: 152px;}
}
@media all and (-webkit-min-device-pixel-ratio : 1.5) {
	.list_Link li a {
		background-image: url(../imgs/mico_open_card@2x.png);
		background-size: 24px 24px;
	}
	.box_Troubleshooting .tit_Card {
		background-image: url(../imgs/mico_open_card@2x.png);
		background-size: 24px 24px;
	}
}
