/* commented lines have been moved to 3sc_common.css */

body { min-width:305px }
/* these are to hide things that won't be visible at the smaller sizes */
.matrix_adsense_row, .matrix_header .pseudo_row .billboard, .adsense_wrapper, .matrix_header .intro, .rating_graph, .product_information .billboard { display:none; }
#ad_as_m_1, #ad_as_m_2 { display:inline-block; }
#ad_as_m_1 { margin-bottom:20px; }
#ad_as_m_2 { margin-top:20px; }

.matrix_archive_disclaimer { margin-top:20px; color: #676767; font-size: 14px; line-height: 20px; width:85%; text-align:justify; font-weight:400; }

.no_overflow { overflow:hidden; }
#sticky_matrix .rank_num { text-align:center; width:100%; height:26px; background-color:#0087CC; color:#FFFFFF; font-size:12px; line-height:26px; font-family:"roboto","open sans", arial; font-weight: 300; display:inline-block; font-size:14px;}

.fixedNavBar { width:72px; height:60px; position:fixed; top:46%; font-size:18px; font-family:'ttr_3sc_icons'; line-height:60px; color:#FFFFFF; background-color:rgba(144,144,144,0.4); transition:all 0.3s ease; padding:10px; cursor:pointer; z-index:100;}
.fixedNavBar:visited { color:#FFFFFF; }
.fixedNavBar:hover { color:#FFFFFF; background-color:rgba(144,144,144,0.6); }
.fixedNavLeft { border-radius:0 50% 50% 0; -moz-border-radius:0 50% 50% 0; left:-50px; text-align: right; padding-left:0;}
.fixedNavLeft:hover { left:-45px; }
.fixedNavRight { border-radius:50% 0 0 50%; -moz-border-radius:50% 0 0 50%; right:-50px; text-align: left; padding-right:0;}
.fixedNavRight:hover { right:-45px; }

/******** MAIN MATRIX ********/
.mtxHeader { font-size:30px; margin:30px 0 10px;}
.mainMtx .mtxRow { clear:both; float:left; border-bottom:1px solid #CECECE; font-size:12px; font-family:"roboto condensed", "roboto"; font-weight: 400;}

.mainMtx .rowLabel div {margin-bottom: 0;}
.mainMtx .rowLabel div:last-child {margin-bottom: 5px;}
.mainMtx .featTxt { text-align:right; width:101px; padding-right:5px; font-size:16px; font-family:"roboto", arial; font-weight: 300;}
.mainMtx .unit {font-size: 11px; margin-top: 0;}
.mtxRow .fh_container {display: inline-block; width: 22px;}
.mtxRow .feature_help { color: #bababa; cursor:pointer; font-size:14px; text-align: center;}
.mtxRow .fh_col {vertical-align: middle;}
.mainMtx .mtxDatCol { background-color:#FFFFFF; }
.mainMtx .mtxDatCol:nth-of-type(2n-1) { background-color:#F3F3F3; }
.mainMtx .mtxRow:last-of-type { border:none; }
.mtxRow .mtxDatCol .font_icon { font-size:20px; color:#BABABA; }
.mtxRow .mtxDatCol .first_prod { color:#0087CC; }

.insert_center {display: none;}
.bb_center {display: inline-block;}
.insert_center, .bb_center { width:0px; overflow:visible; }
.insert_holder, .bb_holder { float:left; text-align:left; }
.insert_offset, .bb_offset { margin-left:-50%; }
.video_tab { position:absolute; margin-top:-425px; margin-left:-155px; z-index: 1; }

/******** MATRIX HEADER ********/
.matrix_header { width:304px; overflow:hidden; display:inline-block; }
.matrix_header .pseudo_table {display: table; margin-bottom:30px;}
.matrix_header .pseudo_row {display: table-row;}
.matrix_header .pseudo_row > div {display: inline-block; vertical-align: top; }

.matrix_header .breadcrumb {margin-bottom: 20px;}
.matrix_header .flag_body {background-color: #0087cc; color: #fff; width: 48px; height: 38px; overflow: hidden; text-align: center;}
.matrix_header .flag_tail {width:0; height:0; border-left:24px solid transparent; border-right:24px solid transparent; border-top:8px solid #0087cc;}
.matrix_header .year {font-size: 14px; font-weight: 300; letter-spacing: 1px; padding-top: 5px; line-height:1; }
.matrix_header .best {font-size: 16px; font-weight: 500; line-height:1; }
.matrix_header .pseudo_row .content { width: 240px; padding-left:10px; }
.matrix_header .main_title { font-size: 18px; line-height:20px; font-weight: 100; margin:0; }
.matrix_header .subtitle {color: #737373; font-size: 11px; line-height:18px; text-transform:uppercase; letter-spacing:2px; }
.matrix_header .intro { font-size:18px; line-height:27px; }

/******** STICKY MATRIX ********/
#sticky_matrix { background-color: #fff; border-bottom: 0px solid rgb(216, 216, 216); min-width: 304px; max-height: 0px; overflow: hidden; position: fixed; top: 50px; transition: all 0.4s linear, border-bottom 0.3s linear; -webkit-transition: all 0.3s linear, border-bottom 0.4s linear; vertical-align: top; z-index: 700; }
#sticky_matrix .content_column {padding: 0;}
#sticky_matrix .innercontent {margin-bottom: 0;}

#sticky_matrix .title { display:inline-block; opacity:0; position:absolute; left:0; top:0; font-size: 14px; overflow: hidden; width:inherit; transition: opacity 0.4s ease; -webkit-transition: opacity 0.4s ease;}
#sticky_matrix .title a {color: #000; font-weight: 400;}
#sticky_matrix .title a:hover {color: #0087cc;}
#sticky_matrix .title span { max-height:34px; display:inline-block; overflow:hidden; }
#sticky_matrix .imgPos { display:inline-block; position:relative; width:inherit; }
#sticky_matrix .imgRow, #sticky_matrix .imgRow .vcenter {height: 72px; width:inherit; }
#sticky_matrix .imgRow a {display: inline-block;}
#sticky_matrix .imgRow img { max-height: 72px; }
#sticky_matrix .imgRow:hover .title { opacity:1; }
#sticky_matrix .imgRow .imgLink { transition: opacity 0s ease 0.2s; -webkit-transition: opacity 0s ease 0.2s; }
#sticky_matrix .imgRow:hover .imgLink { opacity:0; transition:none; -webkit-transition:none; }
#sticky_matrix .leftSpacer {display:inline-block; width: 134px;}
#sticky_matrix .arrow { display:none; }
#sticky_matrix .mtxRow {float:none; vertical-align: middle;}
#sticky_matrix .slideWindow {width:166px;}
#sticky_matrix .outerCol {vertical-align: top;}
#sticky_matrix .prodItemRow {width:72px;}
#sticky_matrix .first_prod .rank_num {background-color: #f7cd26; color: #000; height:30px; line-height:30px;}
#sticky_matrix .other_prod .rank_num {background-color: #ccc; color: #000; margin-top:4px;}
#sticky_matrix .primaryAction .vcenter {width: 72px;}
#sticky_matrix .actionButton {background-color:#ABABAB; display:inline-block; padding: 3px 0; margin-top:5px; font-family: 'Roboto Condensed','Open Sans',Helvetica,Arial,sans-serif; font-weight: 300; height: 16px; line-height: 16px; font-size:12px;}
#sticky_matrix .actionButton:hover { background-color:#999999; }
#sticky_matrix .first_prod .actionButton {background-color: #0087cc;}
#sticky_matrix .first_prod .actionButton:hover {background-color: #009ceb;}

/***** mini matrix gallery *****/
.mini_gallery { display: none; margin-top:50px; }
.photo_gallery_wrapper, .glance_info {display: inline-block; overflow: hidden;}
.photo_gallery_wrapper { text-align: center;}
.photo_gallery_wrapper .thumbs {display: none; position: relative; width: 530px;}
.photo_gallery_wrapper .thumbs a { display: block; height: 16px; margin-top: -8px; position: absolute; top: 50%; }
.photo_gallery_wrapper .thumbs a.slider_prev {left: 1px;}
.photo_gallery_wrapper .thumbs a.slider_next {right: 1px;}
.photo_gallery_wrapper .thumbs li {border: 1px #c7c7c7 solid; height: 50px; margin: 0 2px; padding: 2px; vertical-align: middle; width: 50px;}
.photo_gallery_wrapper .thumbs li.current {border-color: #737373;}

.thumbs_slider_wrapper, #mtx_thumbs_slider{height:70px;}
.photo_gallery_wrapper .buttons {margin-bottom: 15px;}
.photo_gallery_wrapper .action_button {font-family: Roboto,'Open Sans',Helvetica,Arial,sans-serif; font-size: 16px; font-weight: 400; line-height: 20px; padding: 10px 14px; }
.photo_gallery_wrapper .action_button .arrow_link:after {line-height: 1;}
.photo_gallery_wrapper div:not(.action_button) a {color: #ccc; opacity: 0; transition: all 0.4s ease; -webkit-transition: all 0.4s ease;}
.photo_gallery_wrapper div:not(.action_button) a:hover {color: #999;}
.photo_gallery_wrapper div.action_button a,
.photo_gallery_wrapper div.action_button a:visited,
.photo_gallery_wrapper div.action_button a:hover { color: #fff; opacity: 1;}
.photo_gallery_wrapper > div:hover a {opacity: 1;}
.photo_gallery {font-size: 16px; text-align:center;}
.photo_gallery a {padding: 0 5px;}
.photo_gallery a, .photo_gallery img {vertical-align: middle; font-size: 16px; color: #666;}
.photo_gallery .full_wrapper {display: inline-block; position: relative; width: 260px;}
.photo_gallery .full_wrapper a {padding: 0 5px;}
.photo_gallery .full {display: inline-block; height: 320px; vertical-align: middle; width: 260px;}
.photo_gallery .full .full_img_position {left: 0px; opacity: 0; display:inline-block; position: absolute; transition: opacity 0.4s ease; -webkit-transition: opacity 0.4s ease; vertical-align:middle; text-align:center;}
.photo_gallery .full .full_img_wrap { display:table-cell; vertical-align:middle; width:260px; height:260px;  }
.photo_gallery .full img { max-width: 260px; max-height:260px; }
.thumbs_slider_wrapper {display: inline-block; overflow: hidden; white-space: nowrap; width: 480px;}
.thumbs_slider_wrapper li {display: inline-block;}
.thumbs_slider_wrapper li img {width: 50px; height:50px; }
#mtx_thumbs_slider {transition: all 0.4s ease;}
#mtx_thumbs_slider ul {font-size: 0; margin: 10px 0 20px; padding: 0;}
.gallery_wrapper {display: inline-block; text-align: center;}
.product_information {display: inline-block; width: 280px; vertical-align: top; color: #666;}
.product_information ul {padding: 0;}
.product_information li {list-style: none; display:none; padding: 0;}
.product_information .product_title {font-size: 26px; margin-bottom: 5px;}
.product_information .product_content {font-size: 16px; line-height: 26px;}
.product_information a {font-size: 16px;}

.bullets {margin-top: 10px; text-align: center;}
.bullet {background-color: #f3f3f3; border: 1px #0087cc solid; border-radius: 50%; cursor: pointer; display: inline-block; height: 12px; margin: 0 2px; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; width:12px;}
.bullet.selected{ background-color: #0087cc;}

/******** MATRIX ARTICLE ********/
.skyscraper_partial_wrapper { display: inline-block;}
.matrix_article {clear: left;}

#popper{position:absolute; z-index:10; background-color:#FFFFFF; display:none; color:#000000; width:260px; border:1px solid #737373; font-size:14px; padding:10px; cursor:pointer;}
.defPop p { padding:0; margin:0; margin:3px; }
.defPopClose { background-color: #0087CC; border-radius: 50%; font-size:13px; height: 17px; margin-left: 262px;margin-top: -18px; cursor:pointer; color:#fff; width: 17px; text-align:center;}

@media only screen and (min-width: 1px) {
	.mini_gallery {display: block;}
}

@media only screen and (min-width: 480px) {

	#sticky_matrix .slideWindow {width:245px;}
	#sticky_matrix .leftSpacer {width:173px;}

	.mainMtx .featTxt { width:138px; }

	.matrix_header { width:424px; }
	.matrix_header .pseudo_row .content {padding-left:10px; text-align:left; font-size:24px; width:330px; }

	.photo_gallery .full_wrapper {width: 380px;}
	.photo_gallery .full {height: 380px; width: 380px;}
	.photo_gallery .full img {max-width: 380px; max-height:380px;}
	.photo_gallery .full .full_img_wrap {width:380px; height:380px;}

	.product_information {width: 400px;}
}

@media only screen and (min-width: 600px) {
	#ad_as_m_1, #ad_as_m_2 { display:none; }
	.matrix_header .pseudo_row .billboard { display:block; width:100%; text-align:center; }
	/*.matrix_header .billboard_wrapper { width:100%; text-align:center; }*/
	.matrix_header .pseudo_row .content {padding: 0 15px; text-align:left; font-size:24px; width:400px; }

	.matrix_header .main_title { font-size: 24px; line-height:28px; }
	.matrix_header .subtitle { font-size:14px; line-height:18px; text-align:left; margin: 0 0 20px 0;}
	.matrix_header .flag_body {width: 72px; height:54px; }
	.matrix_header .flag_tail {border-left-width:36px; border-right-width:36px; border-top-width: 18px;}
	.matrix_header .year { font-size:18px; padding-top: 10px; line-height:1; }
	.matrix_header .best { font-size:22px; font-weight:500; line-height:1; }
	.matrix_header .intro { display:block; }
	.matrix_header { width: 510px; }

	.product_information .billboard {display: block; text-align: center;}
}

@media only screen and (min-width: 640px) {

	#sticky_matrix .slideWindow {width:410px;}
	.matrix_header { width: 590px }

	.matrix_header .pseudo_row .content { width:480px; }

	.photo_gallery .full_wrapper {width: 220px;}
	.photo_gallery .full {height: 220px; width: 220px;}
	.photo_gallery .full img {max-width: 220px; max-height:220px;}
	.photo_gallery .full .full_img_wrap {width:220px; height:220px;}

	.product_information {padding-left: 20px; width: 300px;}
	.product_information .billboard {text-align: left;}
}

@media only screen and (min-width: 768px) {

	#sticky_matrix {top: 50px;}
	#sticky_matrix .slideWindow {width:496px;}
	.mainMtx .featTxt { width:148px; }

	.matrix_header { width: 673px; }
	.matrix_header .pseudo_row > div {display: table-cell; vertical-align: top; width:auto; }
	.matrix_header .pseudo_row .content {padding: 0 50px 0 20px; text-align:left; font-size:24px; width:auto; }

	.photo_gallery .full_wrapper {width: 340px;}
	.photo_gallery .full {height: 340px; width: 340px;}
	.photo_gallery .full img {max-width: 340px; max-height:340px;}
	.photo_gallery .full .full_img_wrap {width:340px; height:340px;}
}

@media only screen and (min-width: 1024px) {
	.matrix_header { width: 1005px; }
	.matrix_header .pseudo_row .content { text-align:left; font-size:24px; width:auto; }
	.matrix_header .main_title { font-size: 36px; line-height:42px; margin: -10px 0 0; }
	.matrix_header .subtitle { font-size:20px; line-height:28px; text-align:left; }
	.matrix_header .flag_body {width: 96px; height:76px; }
	.matrix_header .flag_tail {border-left-width:48px; border-right-width:48px; border-top-width: 20px;}
	.matrix_header .year { font-size:24px; padding-top: 12px; }
	.matrix_header .best { font-size:30px; }

	/* actually for 1024 */
	.insert_center { display:inline-block; }
	.matrix_header .billboard #ad_5 { margin:10px 0 0 10px; }
	.matrix_adsense_row { display:block; }
	.matrix_adsense_row, .adsense_wrapper, .matrix_header .intro, .rating_graph { display:block; }

	.matrix_archive_disclaimer {font-size: 30px; line-height: 40px; margin-top: 40px;}

	#sticky_matrix .slideWindow {width:830px;}
	.mainMtx .featTxt { width:137px; }

	.matrix_archive_disclaimer {font-size: 30px; line-height: 40px; margin-top: 40px;}

	.photo_gallery .full_wrapper {width: 400px; margin: 0 20px;}
	.photo_gallery .full {height: 400px; width: 400px;}
	.photo_gallery .full img { max-width: 400px; max-height:400px; }
	.photo_gallery .full .full_img_wrap { width:400px; height:400px; }
	.photo_gallery a {padding: 0;}
	.photo_gallery a, .photo_gallery img {font-size: 42px;}
	.photo_gallery_wrapper .thumbs {display: block;}
	.bullets {display: none;}

	.product_information {width: 430px; padding-left: 40px;}
	.product_information li {padding-right:30px;}
	.product_information .product_title {font-size: 40px;}
	.product_information .product_content {font-size: 20px; line-height: 34px;}
	.product_information a {font-size: 26px;}
}

@media only screen and (min-width: 1115px) {
	#sticky_matrix .arrow{display:inline-block;}
	.fixedNavBar { display:none; }
}

@media only screen and (min-width: 1280px) {

	#sticky_matrix {padding-left: 35px; /*to offset right arrow top: 85px;*/}
	#sticky_matrix .slideWindow {width:930px;}
	#sticky_matrix .leftSpacer {display:inline-block; width:122px;}
	#sticky_matrix .imgRow, #sticky_matrix .imgRow .vcenter {height: 82px;}
	#sticky_matrix .imgRow img {max-height: 82px; max-width: 82px;}
	#sticky_matrix .primaryAction .vcenter {width: 82px;}
	#sticky_matrix .prodItemRow {width:82px;}

	.mainMtx .featTxt { width:154px; }

	.matrix_header { width: 1121px; }
}

@media only screen and (min-width: 1600px) {

	#sticky_matrix .slideWindow {width:1150px;}
	#sticky_matrix .leftSpacer {display:inline-block; width:142px;}
	#sticky_matrix .imgRow, #sticky_matrix .imgRow .vcenter {height: 104px; width: 100%;}
	#sticky_matrix .imgRow img {max-height: 104px; max-width: 104px;}
	#sticky_matrix .primaryAction .vcenter {width: 104px;}
	#sticky_matrix .prodItemRow {width:104px;}
	.mainMtx .featTxt { width:175px; }
	.mainMtx .slideWindow { width:1362px; }

	.matrix_header { width: 1361px; }
}


/* putting these at the bottom so it doesn't get overridden by the width ones
   this is for things that need to be adjusted for very short height (phone landscape)
*/
@media only screen and (max-height: 480px) {
    #sticky_matrix .imgRow .imgLink, #sticky_matrix .rank_num { display:none; }
    #sticky_matrix .title {margin: 0; padding: 0; opacity:1; position:static; }
    #sticky_matrix .imgRow, #sticky_matrix .imgRow .vcenter { height:40px; }
}

@media only screen and (max-height: 400px) {
    #sticky_matrix .primaryAction, #sticky_matrix .actionButton {display: none;}
}