/* This is ace, DendaNew-free */ #c-content {font-family:Verdana,Arial,sans-serif;} #c-content h3, #c-content h2, #c-content h1 {font-family:Arial,sans-serif;} h2 {text-align:center;} #c-content { font-family:Arial,sans-serif; } #c-content h3, #c-content h2, #c-content h1, #c-content strong { font-family:Arial,sans-serif; } /* Basics/Defaults */ p {padding:0;font-size:1.8em;} body.t-nobranding #mainform {width:100%;margin:0px;} .c-g13 {width:100%;} .c-content-section {margin-bottom:0px; } .c-content-section .c-full-section {margin:0px;} #c-content {background-color:#fff; } /* This repurpose dividers to "Paint it black" */ #c-content .c-rule {background-color:#000;} #c-content .c-rule h2, #c-content .c-rule .c-content-section h3, #c-content .c-rule .c-detail-listing-img h3 {color: #ffffff;} .c-rule p, .c-rule ul, .c-rule li {color: #ffffff;} .c-rule {background: none;padding-top: 0px;} /* Simple header */ #header {width:100%;background:#ffffff;position:absolute;z-index: 1000;margin-bottom:3em;height:50px;border-bottom:1px solid #c2c2c2;font:0/0 a;z-index:1000001;} .c-rule #header {background:#000000;border-bottom:1px solid #000000;} #header .wrapper {width:90%;max-width:960px;margin:0 auto;} #header .wrapper .logo {display:block;background:transparent url('ag-canon-logo.png') no-repeat;height:30px;width:143px;margin-top:10px;} .c-rule #header .wrapper .logo {display:block;background:transparent url('ag-canon-logo-white.png') no-repeat;height:30px;width:143px;margin-top:10px;} #header .close {float:right;display:block;width:30px;height:30px;margin-top:10px;margin-right:15px;background:transparent url('1200D-close-cross.png') no-repeat;} /* Spec table */ #c-content table {border-collapse: collapse;border-spacing:0;background-color:#ffffff;text-align:left;} table {border-color:grey;margin-bottom:5em;} tr {border-bottom: 1px solid #cccccc;} tr.c-last {border-bottom: none;} #c-content td {padding:10px 10px 10px 0;font-size:1.6em;} #c-content .c-table td {width:auto; border-top: none;border-right: 0px;} /* Managed links */ #c-content .c-detail-listing-img li {font-size:1.8em;} #c-content .c-arrow-list a {color:#cc0000;} #c-content .c-rule .c-arrow-list a {color:#ffffff;} .c-arrow-list a span {background: url(ag-link-arrow-red-right.png) no-repeat 100% 50%;padding:4px 30px 4px 0;} .c-rule .c-arrow-list a span {background: url(ag-link-arrow-white-right.png) no-repeat 100% 50%;padding:4px 30px 4px 0;} #c-content .c-arrow-list a:hover {text-decoration:underline;} #c-content .c-rule .c-arrow-list a:hover {color:#ffffff;} @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( -min-moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { #header .wrapper .logo {background:transparent url('ag-canon-logo@2x.png') no-repeat;background-size:143px 30px;} .c-rule #header .wrapper .logo {background:transparent url('ag-canon-logo-white@2x.png') no-repeat;background-size:143px 30px;} #header .close {background:transparent url('1200D-close-cross@2x.png') no-repeat;background-size:30px 30px;} .c-arrow-list a span {background: url(ag-link-arrow-red-right@2x.png) no-repeat 100% 50%;background-size:19px 19px;} .c-rule .c-arrow-list a span {background: url(ag-link-arrow-white-right@2x.png) no-repeat 100% 50%;background-size:19px 19px;} } /* Basic big images rules */ .c-sample {display:block;width:100%;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;padding-top: 60% !important;background-position: 50% 50%;background-repeat: no-repeat;} .c-rule .c-sample {background-color:#000000;} /* Modules */ /* This turn general-fluid's into something nicer to read - not everything's covered mind */ /* Everything's centered by default but using a title image will left-align stuff */ .c-detail-listing-img {width: 90%;max-width:960px;margin: 0px auto;padding:4% 0;} .c-detail-listing-img .c-detail-listing-img {width:auto;padding-top:0;padding-bottom:0;text-align:center;} .c-detail-listing-img .c-detail-listing-img p {margin-bottom:1em;} .c-detail-listing-img .c-detail-titleimage {float:left;width:260px;} .c-detail-listing-img .c-detail-titleimage + .c-detail-listing-img {padding-left:300px;text-align:left;zoom:1;} .c-detail-listing-img .c-detail-titleimage + .c-detail-listing-img h2 {text-align:left;} #c-content .c-content-section h2 {font-size: 3.2em;color: #cc0000;margin-bottom: 1em;} #c-content .c-content-section h3, #c-content .c-detail-listing-img h3 {font-size: 2.2em;color: #000000;margin-bottom: 1em;} #c-content .c-content-section .c-circle-list {list-style:disc;margin:0;margin-bottom:5em;padding:0;list-style-position: inside;} #c-content .c-rule .c-content-section .c-circle-list {color:#ffffff;} #c-content .c-content-section .c-circle-list li {background:none;margin:0 0 10px;padding:0;} #c-content .c-circle-list li{font-size:1.8em;} } /* The boxed version of general-fluids are turned into the same as above except... It loses its bottom padding and main text elements are losing their bottom margin. Limits what you can do but enables successions of 100 and 50-50 */ #c-content .c-box {margin:0px;} .c-box .c-box-middle {background: none;padding-left: 0px;} .c-box3 .c-box-padding{background-color:#000;} .c-box .c-box-padding {background: none;background-color: none;padding: 0px;} .c-box .c-detail-listing-img .c-text {margin-left:0px;} #c-content .c-box .c-text p, #c-content .c-box .c-text h2, #c-content .c-box .c-text h3 {margin-bottom:0px;} .c-box .c-detail-listing-img {padding:4% 0 0 0;} .c-box .c-detail-listing-img .c-detail-listing-img {padding:0;} .c-box .c-box-top {display:none;background: none;padding-left:0px;} .c-box .c-box-bottom {display:none;background: none;padding-left:0px;} /* Video */ /* That one make Brightcove size - That padding bottom value must be equal to the aspect ratio of the video */ #video {width:100%;} .video-container {position: relative;padding-bottom: 56.25%;} .BrightcoveExperience {position: absolute;top: 0;left: 0;width: 100%;height: 100%;} @media only screen and (max-width: 720px) { .c-detail-listing-img .c-detail-titleimage {float:none;width:100%;} .c-detail-listing-img .c-detail-titleimage + .c-detail-listing-img {padding-left:0;text-align:center;} .c-detail-listing-img .c-detail-titleimage + .c-detail-listing-img h2 {text-align:center;} p {font-size:1.6em;} #c-content .c-detail-listing-img li {font-size:1.6em;} #c-content td {padding:5px 5px 5px 0; font-size:1.6em;} #c-content .c-content-section h2, #c-content .c-generic-full .c-detail-maintext h2 {font-size: 2.2em;margin-top:0.6em;} #c-content .c-content-section h3, #c-content .c-generic-full .c-detail-maintext h3, #c-content .c-detail-listing-img h3 {font-size: 1.8em;margin-top:0.6em;} } #c-copyright {width:90%;max-width:960px;margin:0 auto;font-size:1em;padding:1em 0em;} /* Two columns */ .c-col {padding:0;} .c-cols2 .c-col {width:50%;} .c-cols2 .c-col .c-detail-listing-img {width: 90%;max-width:480px;} .c-cols2 .c-col .c-detail-listing-img {max-width:480px;margin:0;padding:4% 4% 4% 0;float:right;} .c-cols2 .c-col2 .c-detail-listing-img {max-width:480px;margin:0;padding:4% 0 4% 4%;float:left;} .c-cols2 .c-col .c-detail-listing-img .c-detail-listing-img {margin:0;padding:0; width:96%} .c-cols2 .c-col2 .c-detail-listing-img .c-detail-listing-img {margin:0;padding:0;width:96%} .c-cols2 .c-col .c-detail-listing-img .c-detail-titleimage {float:none;width:100%;} .c-cols2 .c-col .c-detail-listing-img .c-detail-titleimage + .c-detail-listing-img {padding-left:0;text-align:center;} @media only screen and (max-width: 920px) { .c-cols2 .c-col {float:none;} .c-cols2 .c-col {width:100%;} .c-cols2 .c-col .c-detail-listing-img {float:none; max-width:none;padding:2% 4% 2% 4%; width:92%;} .c-cols2 .c-col2 .c-detail-listing-img {float:none; max-width:none;padding:2% 4% 2% 4%; width:92%;} .c-cols2 .c-col .c-detail-listing-img .c-detail-listing-img {margin:0;padding:0;width:100%;} .c-cols2 .c-col2 .c-detail-listing-img .c-detail-listing-img {margin:0;padding:0;width:100%;} } .c-cols2 .c-col .c-detail-listing-img .c-detail-mainimage img {width:100% !important; height:auto !important; max-width:600px !important;} /* Big red button */ .c-btn-list-right {float: none;} .c-btn-list {list-style-type: none;margin: 0;padding: 0;} .c-btn-list li {float: none;margin-left: 0;} .c-btn, .c-btn span {display: block;white-space: normal;} .c-btn {background: none;color: #fff;font-size: 1.1em;padding-right: 8px;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;} .c-btn span {background: none;padding: 0;} #c-content .c-btn-list a {font-family: Verdana, sans-serif;font-weight:bold;font-size: 1.6em;color: #ffffff;display: inline-block;padding: 0.6em 1.2em;background: #f40000;-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;text-decoration: none;background: -webkit-linear-gradient(top, #E00000 0%, #CC0000 100%);background: -moz-linear-gradient(top, #E00000 0%, #CC0000 100%);background: -o-linear-gradient(top, #E00000 0%, #CC0000 100%);background: linear-gradient(top, #E00000 0%, #CC0000 100%);} #c-content .c-btn-list a:hover {color: #ffffff;text-decoration: none;background: -webkit-linear-gradient(top, #C00000 0%, #A00000 100%);background: -moz-linear-gradient(top, #C00000 0%, #A00000 100%);background: -o-linear-gradient(top, #C00000 0%, #A00000 100%);background: linear-gradient(top, #C00000 0%, #A00000 100%);} #c-content .c-btn-list a:visited {color: #ffffff;} .c-btn-list a span {background: none;padding-right: 0px;} @media only screen and (max-width: 720px) { #c-content .c-btn-list a {font-size: 1.4em;} }