body {
margin: 0;
padding: 0;
}
html {
margin: 0;
padding: 0;
font-family: open sans,arial,sans-serif;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}
// : Use a unique and descriptive class name
// : Use a value from 300 to 800
#main {width:100%; min-height:100%; position:relative; }
}
div.wrapper_prdBrief {
max-width:100%;
display:none;
padding-bottom:0px;
box-shadow: 0px 3px 3px #DDDDDD;
}
/* slideshow navigation */
h1.HeaderSlider {
position:relative;
width:90%;
margin-left:0%;
margin-top:0px;
font-weight:lighter;
color: white;
font-size: 22pt
}
h2.HeaderSlider {
position:relative;
width:90%;
margin-left:0%;
margin-top:40px;
font-weight:lighter;
color: white;
font-size: 16pt}
p.HeaderSlider {
position:relative;
margin-left:0%;
font-weight:lighter;
color:#FFFFFF;
width:90%;
padding-top:0px;
text-align: justify;
font-size: 13pt;
}
div.widthControl{width:80%;
margin:auto;
display:inline-block
}
div.prodDesp{
height:auto;
width: 100%;
margin-top:30px;
padding-top:10px;
margin-bottom:10px;
overflow:hidden
}
div.prodDesp h2.prodDesp-header { font-weight:lighter;
color:#1A1A1A;
float: left;
text-align: left;
display: block;
font-size:20pt
}
div.prodDesp h4 {
font-weight:lighter;
color:gray;
margin-top:40px;
width:100%;
font-size:20px;
display:block;
overflow:hidden;
text-align: center
}
.inner_prdBrief {width:60%;
float:left;
padding-left:0px}
div.box-list{
margin-bottom:20px;
margin-left:5px;
width:95%;
height:auto;
float:left;
border:thin #CCCCCC solid;
}
div.adsl a#learn-more:hover{
background-color:#0066CC
}
ul.sub-sitemap {width:20%;
float:left}
.sub-sitemap li {
list-style-image:url('images/breadcrumb_separator.png');
list-style-position:outside;
float:left;
padding-right:15px;
height:20px;
margin-right:5px;
text-align:center
}
.sub-sitemap li a { font-size:small;
}
div.prodDesp h2 {
font-weight:lighter;
width:100%;
height:auto;
margin-top:15px;
margin-bottom:0px;
margin-left:0px;
float:left;
padding-left:0px;
text-align:center;
padding-bottom:5px;
padding-left:10px
}
div.innerWrapperColour {
background-color:#E6E6E6;
width:100%;
height:auto;
padding-bottom:30px;
overflow:hidden
}
img.img_prdBrief { margin-right:15px;
height:80px;
width:auto;
float:left;
padding-top:10px;
padding-left:30px
}
.model_title h2{ display:inline-block;
*border-bottom:thin #CCCCCC solid;
padding-bottom:0px;
margin-bottom:0px
}
h3.model_title {
font-weight:lighter;
margin-top:5px;
padding-left:20px;
margin-top:10px
}
h2.modelDesp {
font-weight:lighter;
font-size:x-large;
padding-left:15px;
width:40%;
color:gray
}
div.LogoSet {
width:100%;
display:block;
float:left;
}
div.overviewDesp ul.featureLogo {
width: 100%;
display:flex;
text-align:center;
float: left
}
div.overviewDesp{
width:100%;
display:block;
*border:1px #CCCCCC solid
}
div.OverviewText{
width:90%;
margin-bottom:0px;
margin-top:0px;
padding-top:0px;
padding-bottom:0px;
float:right
}
.sectionImg { width:45%;
float:left;
margin-top:0px ;
padding-top:0px; }
.sectionImg img{
width:95%}
p.overview {
width:95%;
position:relative;
float:left;
padding-left:20px;
font-size:medium;
text-align:justify
}
div.OverviewText ul { width:15%;
display:inline-block;
padding-left:0px;
list-style:none;
float:none;
margin-left:1%;
text-align:center
}
li.overviewLogo{
*-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
width:70px;
height:70px;
margin-left:8%;
font-size:10px;
display:block;
* border-radius:35px 35px 35px 35px;
* box-shadow:0px 0px 8px 8px #E6E6E6;
text-align:center ;
padding-top:30px;
vertical-align:middle
}
li.overviewBrief{ width:80%;
text-align:center;
margin-top:20px;
padding-left: 10%;
font-size:15pt;
font-weight: lighter;
color: gray;
display: block;
list-style: none;
text-align: justify
}
img.PrdFeatures {width:35%;
height:auto;
float:left
}
.SampleEV {background-color:black;
width:100%;
display:block;
height:auto;
margin-top:10px;
margin-bottom:10px;
padding-top:5px;
padding-bottom:0px;
margin-left:10px;
}
.SampleEV ul.note {
width:95%;
margin-left:0%;
padding-top:0px;
position:relative;
float:left;
text-align:left
}
.SampleEV ul.note li { margin-left:0%;
color:gray;
font-size:0.90em}
p.SpecDetials {
width:100%;
padding-left:10%;
font-size:small
}
.prdRes_content{ margin-top:70px}
div.RS_Block { width:33%;
float:left;
margin-right:3px;
margin-bottom:3px }
div.RS_Block ul li a img { width:80px;
height:auto;
-webkit-filter: grayscale(100%);
-webkit-transition: .5s ease-in-out;
-moz-filter: grayscale(100%);
-moz-transition: .3s ease-in-out;
-o-filter: grayscale(100%);
-o-transition: .3s ease-in-out;}
div.RS_Block ul li a img:hover { -webkit-filter: grayscale(0%);
-webkit-transition: .3s ease-in-out;
-moz-filter: grayscale(0%);
-moz-transition: .3s ease-in-out;
-o-filter: grayscale(0%);
-o-transition: .3s ease-in-out;
}
div#products-list {
width:100%;
margin-left:0.5%;
display:inline-block;
border-radius:0px 0px 0px 0px;
padding-top:20px;
height:auto;
margin-bottom:10px;
background:#F2F2F2
}
div#products-list:hover{border-color:#4399e6}
img#products-list-left {
width:35%;
height:auto;
padding-left:0%;
margin-bottom:5px;
float:left
}
img#products-list-right {
width:35%;
height:auto;
padding-left:0%;
margin-bottom:5px;
float:right
}
ul#products-list {
margin-top:7px;
padding-left:4%;
list-style:none;
}
h1#products-list {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
margin-bottom:10px;
padding-left:4%;
position: relative;
width:100%
}
h1#products-list a {
color: #666666;
text-decoration:none;
display:inline-block;
width:100%
}
div.products-list-dscp-left{
display:inline-block;
width:45%;
float:left;
padding-left:8%;
padding-top:50px
}
div.products-list-dscp-right{
display:inline-block;
width:45%;
float:left;
margin-left:18%;
padding-top:50px
}
p#products-dscp {font-size:14pt;
font-weight:lighter;
width:70%;
padding-left:3%}
a.products-list {
width:50%;
height: 100%;
font-size:small;
text-decoration:none;
display:inline-block;
*background: url("../../Products imgs/Fiber/fiberLogo.jpg ");
background-size: cover;
font-size:medium
}
a.products-list:hover { color:blue;
}
.products-header {
float: left;
width:100%;
margin-top:15px;
border-bottom:thin #f0f0f0 solid;
padding-bottom:5px;
display:none
}
.products-header div#products-header {
font-family:Arial, Helvetica, sans-serif;
display:block;
padding-top:10px;
font-size:X-large;
width:70%
}
.products-header div#q-call {
font-family:Arial, Helvetica, sans-serif;
display:block;
padding-top:10px;
font-size:medium;
float:right
}
/* Other
* =============================== */
/* Floating BackToTop */
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color:#0066FF;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
}
#myBtn:hover {
background-color:gray;
}