/* @@@@@@@@@@@@@@@@@@@@@@ RESET @@@@@@@@@@@@@@@@@@@@@@ about HTML5 & CSS3 reset: includes fixes for common browser bugs */ /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// links ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ base ..........................................................................*/ *{padding:0; margin:0; }html{font-size: 62.5%; /*overflow-y: scroll;*/ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; /* 3 */}body {margin:0;}ul, ol{ list-style:none;}img {border: 0; -ms-interpolation-mode: bicubic;}hr, legend{display:none; } /*+ layout ..........................................................................*/ article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display: block;}audio,canvas,video{display: inline-block;*display: inline;*zoom: 1;}audio:not([controls]) {display: none;}table {border-collapse: collapse; border-spacing: 0;}fieldset{border:0px; display:block;} /*+ type ..........................................................................*/ a{outline:none; text-decoration:none; color:inherit;cursor:pointer;}pre{white-space: pre;white-space: pre-wrap;word-wrap: break-word;}button,input,select,textarea {font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle;}button,input {line-height: normal; }button,input[type="button"], input[type="reset"], input[type="submit"] {cursor: pointer; -webkit-appearance: button;*overflow: visible;}input[type="checkbox"],input[type="radio"] {box-sizing: border-box; padding: 0; }input[type="search"]{-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;}textarea {overflow: auto; vertical-align: top; } /* @@@@@@@@@@@@@@@@@@@@@@ ALIGNMENT @@@@@@@@@@@@@@@@@@@@@@ about constants for alignment syntax */ /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// alignment ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ float ..........................................................................*/ .floatLeft, .alignleft {float:left;} .floatRight, .alignright{float:right;} /*+ center a block ..........................................................................*/ .marginAuto{margin-left:auto; margin-right:auto;} /*+ alignment ..........................................................................*/ .alignLeft{text-align:left !important;} .alignRight{text-align:right !important;} .alignCenter{text-align:center !important;} .alignJustify{text-align:justify !important;} /*+ vertical alignment ..........................................................................*/ .alignTop{vertical-align:top;} .alignMiddle{vertical-align:middle;} .alignBottom{vertical-align:bottom;} /*+ conWrap ..........................................................................*/ .conWrap{display:inline-block; position:relative;} .conWrap.block{display:block; } /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// push ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ noPush ..........................................................................*/ .noPush{margin:0px; } /*+ pushToRight ..........................................................................*/ .pushToRight{margin-left:10px;} .pushToRightGrand2{margin-left:245px;} .pushToRightGrand{margin-left:50px;} .pushToRightHeavy{margin-left:40px;} .pushToRightGreater{margin-left:30px;} .pushToRighttBase{margin-left:20px;} .pushToRightLesser{margin-left:15px;} .pushToRightLight{margin-left:10px;} .pushToRightMinimal{margin-left:5px;} /*+ pushtoLeft ..........................................................................*/ .pushtoLeft{margin-right:10px;} .pushtoLeftGrand{margin-right:50px;} .pushtoLeftHeavy{margin-right:40px;} .pushtoLeftGreater{margin-right:30px;} .pushtoLeftBase{margin-right:20px;} .pushtoLeftLesser{margin-right:15px;} .pushtoLeftLight{margin-right:10px;} .pushtoLeftMinimal{margin-right:5px;} /*+ pushToBottom ..........................................................................*/ .pushToBottom{margin-top:10px;} .pushToBottomGrand{margin-top:50px;} .pushToBottomHeavy{margin-top:40px;} .pushToBottomGreater{margin-top:30px;} .pushToBottomBase{margin-top:20px;} .pushToBottomLesser{margin-top:15px;} .pushToBottomLight{margin-top:10px;} .pushToBottomMinimal{margin-top:5px;} /*+ pushToTop ..........................................................................*/ .pushToTop{margin-bottom:10px;} .pushToTopGrand{margin-bottom:50px;} .pushToTopHeavy{margin-bottom:40px;} .pushToTopGreater{margin-bottom:30px;} .pushToTopBase{margin-bottom:20px;} .pushToTopLesser{margin-bottom:15px;} .pushToTopLight{margin-bottom:10px;} .pushToTopMinimal{margin-bottom:5px;} /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// pull ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ noPull ..........................................................................*/ .noPull{top:0px;} /*+ pullToRight ..........................................................................*/ .pullToRight{position:relative; left:10px; } .pullToRightGrand{position:relative; left:50px;} .pullToRightHeavy{position:relative; left:40px;} .pullToRightGreater{position:relative; left:30px;} .pullToRightBase{position:relative; left:20px;} .pullToRightLesser{position:relative; left:15px;} .pullToRightLight{position:relative; left:10px;} .pullToRightMinimal{position:relative; left:5px;} /*+ pullToLeft ..........................................................................*/ .pullToLeft{position:relative; left:-10px; } .pullToLeftGrand{position:relative; left:-50px;} .pullToLeftHeavy{position:relative; left:-40px;} .pullToLeftGreater{position:relative; left:-30px;} .pullToLeftBase{position:relative; left:-20px;} .pullToLeftLesser{position:relative; left:-15px;} .pullToLeftLight{position:relative; left:-10px;} .pullToLeftMinimal{position:relative; left:-5px;} /*+ pullToBottom ..........................................................................*/ .pullToBottom{position:relative; top:10px; } .pullToBottomGrand{position:relative; top:50px;} .pullToBottomHeavy{position:relative; top:40px;} .pullToBottomGreater{position:relative; top:30px;} .pullToBottomBase{position:relative; top:20px;} .pullToBottomLesser{position:relative; top:15px;} .pullToBottomLight{position:relative; top:10px;} .pullToBottomMinimal{position:relative; top:5px;} /*+ pullToTop ..........................................................................*/ .pullToTop{position:relative; top:-10px; } .pullToTopGrand{position:relative; top:-50px;} .pullToTopHeavy{position:relative; top:-40px;} .pullToTopGreater{position:relative; top:-30px;} .pullToTopBase{position:relative; top:-20px;} .pullToTopLesser{position:relative; top:-15px;} .pullToTopLight{position:relative; top:-10px;} .pullToTopMinimal{position:relative; top:-5px;} /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// position ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ posBottomRight ..........................................................................*/ .posBottomRight{position:absolute !important; bottom:0px; right:0px; z-index:100; } .posBottomLeft{position:absolute !important; bottom:0px; left:0px; z-index:100; } .posTopRight{position:absolute !important; top:0px; right:0px; z-index:100; } .posTopLeft{position:absolute !important; top:0px; left:0px; z-index:100; } /* @@@@@@@@@@@@@@@@@@@@@@ OPACITY @@@@@@@@@@@@@@@@@@@@@@ about constants for making transpart content or to show/hide content syntax */ /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// opacity ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ opacity ..........................................................................*/ .opGrand{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity:0;} .opHeavy{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; filter: alpha(opacity=15); opacity:0.15;} .opGreater{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=35)"; filter: alpha(opacity=35); opacity:0.35;} .opBase{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity:0.5;} .opLesser{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; filter: alpha(opacity=65); opacity:0.65;} .opLight{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; filter: alpha(opacity=85); opacity:0.85;} .opMinimal{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity:1;} /*+ display ..........................................................................*/ .show{display:block;} .hide{display:none;} .showBlock{display:block !important;} .showInline{display:inline;} .showInlineBlock{display:inline-block;} /* @@@@@@@@@@@@@@@@@@@@@@ TEXT @@@@@@@@@@@@@@@@@@@@@@ about constants for type syntax */ /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// text ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ text ..........................................................................*/ .bold{font-weight:bold; } .italic{font-style:italic; } .underline{text-decoration:underline; } .underline a{text-decoration:underline; } .linethrough{text-decoration:line-through; } .uppercase{text-transform:uppercase; } /*lucent*/ .lucent.lower{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity:0.6;} .lucent.low{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity:0.5;} .lucent.medium{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); opacity:0.4;} .lucent.high{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); opacity:0.3;} .lucent.higher{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); opacity:0.2;} /* @@@@@@@@@@@@@@@@@@@@@@ CONSTRUCT @@@@@@@@@@@@@@@@@@@@@@ about General styles for component construction syntax */ /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// content ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ image replacement ..........................................................................*/ [class^="img"], [class^="ico"]{text-indent:-4000px; overflow:hidden; display:inline-block; background-repeat:no-repeat; background-position:top left;} [class^="ico"]{vertical-align:middle;} /* @@@@@@@@@@@@@@@@@@@@@@ PAGE @@@@@@@@@@@@@@@@@@@@@@ about main body setup of the webpage syntax */ /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// fonts ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// body & html settings ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ html ..........................................................................*/ /*background*/ html{background-color:#fcfcfc;} /*+ body ..........................................................................*/ /*background*/ body{} /*font family*/ body{font-family:Arial; } /*color*/ body{color:#565656;} /*size & line-height*/ body{font-size:15px; line-height:1.4; } /* @@@@@@@@@@@@@@@@@@@@@@ HEADING @@@@@@@@@@@@@@@@@@@@@@ about heading font-sizes and some semantic classes syntax */ /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// size ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ heading (don't add color to heading tags, use extra classes) ..........................................................................*/ h1, h2, h3, h4, h5, h6{font-weight:normal; color:#40AEE6; } h1.afterSpace, h2.afterSpace, h3.afterSpace, h4.afterSpace, h5.afterSpace, h6.afterSpace{margin-bottom:13px;} h1.afterSpaceDouble, h2.afterSpaceDouble, h3.afterSpaceDouble, h4.afterSpaceDouble, h5.afterSpaceDouble, h6.afterSpaceDouble{margin-bottom:26px;} hgroup{} h1{font-size:27px;} article {text-align:left;} article h1{color:#40AEE6; font-size:34px;} article h3{color: #40AEE6; display: inline; line-height: 80px; vertical-align: middle;} article > p, article > div > p, article > div > div > p, article > div > div > div > p, article > div > div > div > div > p {color:#686868; font-size:13px;line-height: 1.6;} article p > a{font-weight:bold;color:#565656;} article ul{color:#686868; padding-left:20px; font-size:13px;} article img{-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;} /*+ degrees of intensity ..........................................................................*/ h2 {font-size:25px;} h3 {font-size:18px;} h4 {font-size:16px;} h5 {font-size:15px;} h6 {font-size:12px;} /* @@@@@@@@@@@@@@@@@@@@@@ COLOR @@@@@@@@@@@@@@@@@@@@@@ about Semantic class names for colors syntax */ /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// colors ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ RED ..........................................................................*/ /*1: input.cAlert, select.cAlert{color:#626262;background-color:#FF776C !important; }*/ /*1: input.cCheck, select.cCheck{color:#626262;background-color:#ACFCAF !important; }*/ /*1:*/ .cTip{color:#e82813; } /*2:*/ .cAlert{color:#bf2317; } /*3:*/ .cWarning{} /*4:*/ .cCancel{} /*+ BLUE ..........................................................................*/ /*1:*/ .cInfo{color:#1a9edb; } /*2:*/ .cAction{} /*3:*/ .cAdvise{} /*4:*/ .cSnap{} /*+ GREEN ..........................................................................*/ /*1:*/ .cNote{} /*2:*/ .cApprove{} /*3:*/ .cSupport{} /*4:*/ .cCheck{color:#62a60e; } /*+ WHITE ..........................................................................*/ /*1:*/ .cCore{} /*2:*/ .cConnect{} /*3:*/ .cPoint{} /*4:*/ .cNeutral{} /*+ BLACK ..........................................................................*/ /*1:*/ .cCanvas{} /*2:*/ .cBox{} /*3:*/ .cSpot{} /*4:*/ .cStand{} /*+ ORANGE ..........................................................................*/ /*1:*/ .cMark{color:#ffad55} /*2:*/ .cCaution{} /*3:*/ .cGuide{} /*4:*/ .cFlag{} /*+ PURPLE ..........................................................................*/ /*1:*/ .cRange{color:#613a95; } /*2:*/ .cJoin{} /*3:*/ .cDirection{} /*4:*/ .cNobel{} /* @@@@@@@@@@@@@@@@@@@@@@ TAGLIST @@@@@@@@@@@@@@@@@@@@@@ about global settings for individual tags, no classes or ids here syntax */ /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// tags ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ structure ..........................................................................*/ div{} section{} aside{} nav{} article{} article a:hover{text-decoration:underline; } article a.button.info:hover{text-decoration:none; } article button > a:hover{text-decoration:none; } footer{} header /*+ text ..........................................................................*/ a{} a:hover{} a:focus{} a:active{} p{margin-bottom:17px;} address{font-style:normal; } blockquote{} cite{} q{} dfn{} abbr{} mark{} sub{} sup{} /*+ images ..........................................................................*/ img{} figure{} figcaption{} /*+ User interface ..........................................................................*/ progress{} time{} details{} summary{} /*+ formated text ..........................................................................*/ em{} strong{} b{} s{} u{} i{font-style:normal; } code{} var{} pre{} kbd{} samp{} del{} ins{} small{} /* @@@@@@@@@@@@@@@@@@@@@@ LAYOUT @@@@@@@@@@@@@@@@@@@@@@ about Structural settings for this site: width, height, margin, padding & position syntax */ /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// layout structure ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ layout ..........................................................................*/ .layout{} .layout .layoutCenter{position:relative; margin:0px auto 0px auto; width:960px; } .layout .darkFont{color:#686868; } /*+ header ..........................................................................*/ .layoutHeader{height:148px; z-index:1000; position:relative; } /*+ section ..........................................................................*/ .layoutSection{} /*+ footer ..........................................................................*/ .layoutFooter{position:relative; margin:0px auto 0px auto; width:960px; } /* @@@@@@@@@@@@@@@@@@@@@@ HEADER @@@@@@@@@@@@@@@@@@@@@@ about Design of the main header syntax */ /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// setup ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ style ..........................................................................*/ /*background*/ .layoutHeader{} /*type*/ .layoutHeader{} /*size & line-height*/ .layoutHeader{} /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// objects ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ headerTop ..........................................................................*/ .layoutHeader .headerTop{height:108px; background-color:#000000; } .layoutHeader .contactLine{position:absolute; top:10px; right:0px; color:white; font-weight:normal; font-size:22px;} .layoutHeader .contactLine i{position:relative; top:-3px; } .layoutHeader .listDivider{position:absolute; top:38px; right:-10px;} .layoutHeader .formSearch{position:absolute; top:70px; right:0px; width:570px;} /*+ name ..........................................................................*/ .layoutHeader .name{} .layoutHeader .name .imgLogo{position:absolute; top:0px; left:0px; width:330px; height:108px; background: url(/template/qweb/images/logoQweb.png) no-repeat top left; } .layoutHeader .name h2{display:none; } /*+ menuBar ..........................................................................*/ .layoutHeader .menuBar{height:40px; background:url(/template/qweb/images/headerMenuBar.png) repeat-x top left; -moz-box-shadow:0px 0px 5px rgba(0,0,0,0.3); -webkit-box-shadow:0px 0px 5px rgba(0,0,0,0.3); box-shadow:0px 0px 5px rgba(0,0,0,0.3);} .layoutHeader .menuBar ul{border-left:1px solid #fefefe; display: table; } .layoutHeader .menuBar ul:after{visibility: hidden; display: block;font-size: 0;content: " ";clear: both;height: 0;} .layoutHeader .menuBar ul > li{display: table-cell; position:relative; border-right:1px solid #fefefe; border-left:1px solid #a6a6a6; height:39px;} .layoutHeader .menuBar ul > li > div {position: relative;} /*.layoutHeader .menuBar ul > li > a{display:block; font-size:14px; color:#656565; text-align:center; width:128px; height:39px; line-height:39px;} .layoutHeader .menuBar ul > li:last-child > a {width:136px}*/ .layoutHeader .menuBar ul > li > div > a{display:block; font-size:14px; color:#656565; text-align:center; padding: 0px 14.5px; height:39px; line-height:39px; white-space:nowrap;} /*.layoutHeader .menuBar ul > li:last-child > div > a { -moz-box-shadow:0px 0px 1px #af91ce; -webkit-box-shadow:0px 0px 1px #af91ce; box-shadow:0px 0px 1px #af91ce; background: #a6a6a6; background: -moz-linear-gradient(top, #7747ad 0%, #352065 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7747ad), color-stop(100%,#352065)); background: -webkit-linear-gradient(top, #7747ad 0%,#362067 100%); background: -o-linear-gradient(top, #7747ad 0%,#352065 100%); background: -ms-linear-gradient(top, #7747ad 0%,#352065 100%); background: linear-gradient(to bottom, #7747ad 0%,#352065 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7747ad', endColorstr='#352065',GradientType=0 ); color: white !important; font-weight: bold; }*/ .layoutHeader .menuBar ul > li:last-child > div > a {border-right: 1px solid #a6a6a6;} .layoutHeader .menuBar ul > li:hover > a{color:#1a9edb; } .layoutHeader .menuBar ul > li.hasSubMenu:hover > a{-moz-box-shadow:inset 0px -10px 20px rgba(255,255,255,1); -webkit-box-shadow:inset 0px -10px 20px rgba(255,255,255,1); box-shadow:inset 0px -10px 20px rgba(255,255,255,1);} .layoutHeader .menuBar ul > li.hasSubMenu:hover .subMenu{display:block; } .layoutHeader .menuBar ul > li.form{width:139px; padding:0px 7px;} .layoutHeader .menuBar ul > li.form .formSearch{top:6px; } /*subMenu*/ .layoutHeader .menuBar ol{width:518px; display:none; position:absolute; overflow:hidden; top:39px; left:-1px; border:1px solid #a6a6a6; padding:15px 15px; -moz-box-shadow:3px 3px 3px rgba(0,0,0,0.1); -webkit-box-shadow:3px 3px 3px rgba(0,0,0,0.1); box-shadow:3px 3px 3px rgba(0,0,0,0.1); background: #ffffff;background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f3f3f3));background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 100%);background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 100%);background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 100%);background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f3f3f3',GradientType=0 );} .layoutHeader .menuBar ol li{list-style:disc;margin-left:30px; margin-top:10px;float:left; width:220px; } .layoutHeader .menuBar ol h1 img{vertical-align:middle;} .layoutHeader .menuBar ol li a{color:#666666; font-size:12px; font-weight:bold;} .layoutHeader .menuBar ol li a:hover{color:#1a9edb; text-decoration:underline; } /* @@@@@@@@@@@@@@@@@@@@@@ FOOTER @@@@@@@@@@@@@@@@@@@@@@ about Design of the mail footer syntax */ /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// setup ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ style ..........................................................................*/ /*background*/ .layoutFooter{} /*type*/ .layoutFooter{font-size:13px;} /*size & line-height*/ .layoutFooter{} /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// objects ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ listDivider ..........................................................................*/ .layoutFooter .listDivider{} .layoutFooter .listDivider li a{text-transform:none; font-size:13px;} .layoutFooter .listDivider li a:hover{color:black; } .layoutFooter .listDivider li:after{font-size:13px; padding:0px 10px;} /*+ footerBottom ..........................................................................*/ .layoutFooter .footerBottom{padding:0px 0px 0px 0px; } .layoutFooter .footerBottom p{margin:5px 0px; } /* @@@@@@@@@@@@@@@@@@@@@@ BOX @@@@@@@@@@@@@@@@@@@@@@ about boxes of all kinds */ /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// setup ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ [class^="box"]{position:relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;} [class^="box"]:after{visibility: hidden; display: block;font-size: 0;content: " ";clear: both;height: 0;} /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// box ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ box ..........................................................................*/ .box{border:1px solid #c9c9c9; position:relative; } .box.hasTab{margin-top:-12px !important;} .box.fill{padding:20px 20px;} .box.fill.less{padding:10px 10px;} .box.fill .hr2{dmargin-left:-20px; dmargin-right:-20px; margin:0px -20px 20px -20px; } .box .box{margin:-1px;} .isTab{height:28px; } .box.height180{height:180px;} .box.height190{height:190px;} .box.hideDoubleBorder{margin-left:-1px;} .box .box.hideDoubleBorder{margin-left:0px;} .box .contentSwitch{position:absolute; top:15px; right:10px; z-index:100; } /*+ header ..........................................................................*/ .box .about{background-color:#f5f5f5; border:1px solid #c9c9c9; position:relative; padding:10px 15px; margin:-1px; } .box .about .bulletPaging{float:right; position:relative; top:2px; } .box .about h3, .box .about p{margin:0px 0px 0px 0px; } .box .about.gradient{} /*+ background images ..........................................................................*/ .box.background{ background-repeat:repeat-x; background-position:bottom left; background-size:contain;} .box.background.upgrades{background-image:url(img/boxBackgroundUpgrades.png); } .box.background.build{background-image:url(img/boxBackgroundBuild.png); } /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// contentBox ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .contentBox{padding:15px 15px;} .contentBox .hr{margin-left:-15px; margin-right:-15px;} /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// pageTab ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ pageTab ..........................................................................*/ .pageTab{} .pageTab:after{visibility: hidden; display: block;font-size: 0;content: " ";clear: both;height: 0;} /*+ pageTabList ..........................................................................*/ .pageTabList{width:280px; float:left; position:relative; z-index:100; margin-top: 21px;} .pageTabList li a{display:block; font-size:20px; color:#b0b0b0; padding:0px 0px 0px 20px; border-bottom:1px solid #b3b3b3; height:90px; line-height:90px; } .pageTabList li.active a{border:1px solid #b3b3b3; background-color:#ffffff; border-right:1px solid #fff; -moz-border-radius-topleft:6px; -webkit-border-top-left-radius:6px; border-top-left-radius:6px; -moz-border-radius-bottomleft:6px; -webkit-border-bottom-left-radius:6px; border-bottom-left-radius:6px; -moz-box-shadow:-1px 1px 1px rgba(0,0,0,0.2); -webkit-box-shadow:-1px 1px 1px rgba(0,0,0,0.2); box-shadow:-1px 1px 1px rgba(0,0,0,0.2);} .pageTabList li img{ vertical-align:middle; margin-right:15px;} /*+ pageTabPane ..........................................................................*/ .pageTabPane{display:block; border:1px solid #b3b3b3; padding:35px 35px; background-color:#ffffff; min-height:800px; float:left; width:679px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin-left:-1px; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius-topleft:0px; -webkit-border-top-left-radius:0px; border-top-left-radius:0px; -moz-box-shadow:-1px 1px 1px rgba(0,0,0,0.2); -webkit-box-shadow:-1px 1px 1px rgba(0,0,0,0.2); box-shadow:0px 1px 1px rgba(0,0,0,0.2);} .pageTabPane.active{display:block; } /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// members ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ boxDomain ..........................................................................*/ .boxDomain{width:960px; height:53px; color:#8c8c8c; margin:0px auto 30px auto; padding:0px 10px 0px 10px; position:relative; line-height:48px; background: url(/template/qweb/images/boxDomain.png) no-repeat top left; } .boxDomain.active{height:143px; background: url(/template/qweb/images/boxDomainActive.png) no-repeat top left; } .boxDomain.active strong{line-height:143px; } .boxDomain .layoutCenter{width:940px; } .boxDomain .icoEarth{background: url(/template/qweb/images/icoEarthPurple.png) no-repeat top left; } .boxDomain .form{position:absolute; top:0px; right:10px;} .boxDomain .form > div{ padding-left:15px; position:relative; top:1px; } .boxDomain.active .form > div{padding-bottom:9px;} .boxDomain .form span{font-size:18px; font-weight:bold; display:inline-block; display:none; vertical-align:middle; } .boxDomain .form input{width:350px; font-size:16px; margin:0px 10px 0px 0px; vertical-align:middle; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -moz-box-shadow:inset 3px 3px 3px rgba(0,0,0,0.1); -webkit-box-shadow:inset 3px 3px 3px rgba(0,0,0,0.1); box-shadow:inset 3px 3px 3px rgba(0,0,0,0.1);} .boxDomain .form textarea{width:350px; height:120px; font-family:arial; border:1px solid #b3b3b3; font-size:16px; margin:10px 10px 0px 0px; vertical-align:middle; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -moz-box-shadow:inset 3px 3px 3px rgba(0,0,0,0.1); -webkit-box-shadow:inset 3px 3px 3px rgba(0,0,0,0.1); box-shadow:inset 3px 3px 3px rgba(0,0,0,0.1);} .boxDomain.fullWidth{margin:-40px auto 30px auto; width:auto; background:url(/template/qweb/images/boxDomainFullwidth.png) repeat-x top left;} .boxDomain .tab{position:absolute; top:-32px; left:410px; line-height:normal;} .boxDomain .tab li{float:left; border:1px solid #d8d8d8; border-bottom:1px solid #adadad; margin-right:-1px; -moz-border-radius-topleft:3px; -webkit-border-top-left-radius:3px; border-top-left-radius:3px; -moz-border-radius-topright:3px; -webkit-border-top-right-radius:3px; border-top-right-radius:3px; } .boxDomain .tab li a{border:1px solid #fff; line-height:30px; background-color:#fefefe; padding:0px 10px 0px 10px; border-bottom:0px; display:block; -moz-border-radius-topleft:3px; -webkit-border-top-left-radius:3px; border-top-left-radius:3px; -moz-border-radius-topright:3px; -webkit-border-top-right-radius:3px; border-top-right-radius:3px; } .boxDomain .tab li.active{border:1px solid #adadad; border-bottom:1px solid #f2f2f2; z-index:100; position:relative; } .boxDomain .tab li.active a{background-color:#f2f2f2; line-height:30px;} .boxDomain .tabContent{display:none; } .boxDomain .tabContent.active{display:block; } .boxDomain{width:960px; height:53px; color:#8c8c8c; margin:0px auto 30px auto; padding:0px 10px 0px 10px; position:relative; line-height:48px; background: url(/template/qweb/images/boxDomain.png) no-repeat top left; } .boxDomain .layoutCenter{width:940px; } .boxDomain .icoEarth{background: url(/template/qweb/images/icoEarthPurple.png) no-repeat top left; } .boxDomain .form{position:absolute; top:0px; right:10px;} .boxDomain .form span{font-size:18px; font-weight:bold; display:inline-block; display:none; vertical-align:middle; } .boxDomain .form input{width:360px; font-size:14px; margin:0px 10px 0px 0px; vertical-align:middle; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; } .boxDomain.fullWidth{margin:-40px auto 30px auto; width:auto; background:url(/template/qweb/images/boxDomainFullwidth.png) repeat-x top left;} .boxDomain.fullWidth .icoEarth{background-repeat: no-repeat;background-image: url('/template/qweb/images/spriteMain.png'); background-position:-337px 0px;width:27px;height:27px;} .boxDomain.fullWidth span {display:inline-block;} .boxDomain.fullWidth{height:48px;color:white; position:relative; border-top:1px solid #af91ce; -moz-box-shadow:0px 0px 1px #af91ce; -webkit-box-shadow:0px 0px 1px #af91ce; box-shadow:0px 0px 1px #af91ce; line-height:48px; background: #7747ad;background: -moz-linear-gradient(top, #7747ad 0%, #352065 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7747ad), color-stop(100%,#352065));background: -webkit-linear-gradient(top, #7747ad 0%,#362067 100%);background: -o-linear-gradient(top, #7747ad 0%,#352065 100%);background: -ms-linear-gradient(top, #7747ad 0%,#352065 100%);background: linear-gradient(to bottom, #7747ad 0%,#352065 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7747ad', endColorstr='#352065',GradientType=0 );} /*+ boxPageBackground ..........................................................................*/ .boxPageBackground{/*background: rgb(235,235,235);*/background: -moz-linear-gradient(left, rgba(235,235,235,1) 0%, rgba(255,255,255,1) 13%, rgba(255,255,255,1) 86%, rgba(235,235,235,1) 100%);background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(235,235,235,1)), color-stop(13%,rgba(255,255,255,1)), color-stop(86%,rgba(255,255,255,1)), color-stop(100%,rgba(235,235,235,1)));background: -webkit-linear-gradient(left, rgba(235,235,235,1) 0%,rgba(255,255,255,1) 13%,rgba(255,255,255,1) 86%,rgba(235,235,235,1) 100%);background: -o-linear-gradient(left, rgba(235,235,235,1) 0%,rgba(255,255,255,1) 13%,rgba(255,255,255,1) 86%,rgba(235,235,235,1) 100%);background: -ms-linear-gradient(left, rgba(235,235,235,1) 0%,rgba(255,255,255,1) 13%,rgba(255,255,255,1) 86%,rgba(235,235,235,1) 100%);background: linear-gradient(to right, rgba(235,235,235,1) 0%,rgba(255,255,255,1) 13%,rgba(255,255,255,1) 86%,rgba(235,235,235,1) 100%);} .boxPageBackground > div{padding: 40px 0px; background: url(/template/qweb/images/boxPageBackground.png) no-repeat top right; margin-bottom:-20px; } /*+ boxInfo ..........................................................................*/ .boxInfo{overflow:hidden; text-align:right; padding:15px 15px; position:relative; border:1px solid #b3b3b3; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; background:#ffffff url(/template/qweb/images/boxInfo.png) repeat-x bottom left;} .boxInfo > i{position:absolute; top:0px; left:0px;} .boxInfo strong{font-size:22px; display:block; line-height:1.1; margin:0px 0px 10px 0px; } .boxInfoPopup{color:#66666;overflow:hidden; text-align:center; padding:15px 15px; position:relative; border:1px solid #b3b3b3; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;} .boxInfoPopup.blue{ color:white; -moz-box-shadow:0px 0px 1px #419C83; -webkit-box-shadow:0px 0px 1px #419C83; box-shadow:0px 0px 1px #419C83; background: #419C83; background: -moz-linear-gradient(top, #419C83 0%, #84DBD4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#419C83), color-stop(100%,#84DBD4)); background: -webkit-linear-gradient(top, #419C83 0%,#84DBD4 100%); background: -o-linear-gradient(top, #419C83 0%,#84DBD4 100%); background: -ms-linear-gradient(top, #419C83 0%,#84DBD4 100%); background: linear-gradient(to bottom, #419C83 0%,#84DBD4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#419C83', endColorstr='#84DBD4',GradientType=0 ); } .boxInfoPopup.green{ color:white; -moz-box-shadow:0px 0px 1px #60BB49; -webkit-box-shadow:0px 0px 1px #60BB49; box-shadow:0px 0px 1px #60BB49; background: #60BB49; background: -moz-linear-gradient(top, #60BB49 0%, #B9F8B9 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#60BB49), color-stop(100%,#B9F8B9)); background: -webkit-linear-gradient(top, #60BB49 0%,#B9F8B9 100%); background: -o-linear-gradient(top, #60BB49 0%,#B9F8B9 100%); background: -ms-linear-gradient(top, #60BB49 0%,#B9F8B9 100%); background: linear-gradient(to bottom, #60BB49 0%,#B9F8B9 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#60BB49', endColorstr='#B9F8B9',GradientType=0 ); } .boxInfoPopup.purple{ color:white; -moz-box-shadow:0px 0px 1px #C063C9; -webkit-box-shadow:0px 0px 1px #C063C9; box-shadow:0px 0px 1px #C063C9; background: #C063C9; background: -moz-linear-gradient(top, #C063C9 0%, #E8C7F0 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C063C9), color-stop(100%,#E8C7F0)); background: -webkit-linear-gradient(top, #C063C9 0%,#E8C7F0 100%); background: -o-linear-gradient(top, #C063C9 0%,#E8C7F0 100%); background: -ms-linear-gradient(top, #C063C9 0%,#E8C7F0 100%); background: linear-gradient(to bottom, #C063C9 0%,#E8C7F0 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C063C9', endColorstr='#E8C7F0',GradientType=0 ); } .boxInfoPopup > i{position:absolute; top:0px; left:0px;} .boxInfoPopup strong{font-size:13px; display:block; line-height:1.5; margin:0px 0px 10px 0px; } .boxInfoPopup .button.info{font-size:14px;} .boxInfo .icoTwitterBig{top:20px; left:15px; } .boxInfo .icoSupportBig{top:0px; left:0px; } .boxInfo .icoPhoneBig{top:10px; left:0px; } .boxInfo .icoComputerBig{top:20px; left:0px; } .boxInfo .icoUptimeBig{top:15px; left:0px; } /*+ boxAbout ..........................................................................*/ .boxAbout{background:#000 url(/template/qweb/images/boxAbout.png) no-repeat top left; margin:20px 0px; color:white; padding:20px 0px;} .boxAbout p{color:#565656; } .boxAbout h3{color:white; } /*+ boxProduct ..........................................................................*/ .boxProduct{} .boxProduct .container{position:relative;} .boxProduct .container .shadow{width:181px; position:absolute; z-index:1000; top:0px; right:0px; bottom:0px; -moz-box-shadow:0px 0px 10px rgba(0,0,0,0.3); -webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.3); box-shadow:0px 0px 10px rgba(0,0,0,0.3);} .boxProduct .orderTable{width:100%; margin:15px 0px 0px 0px; } .boxProduct .orderTable .order{width:180px; text-align:center; } /*+ boxFooter ..........................................................................*/ .boxArrowLink{min-height:120px;display:block; padding:15px 80px 15px 15px; background-color:#1a1a1a; margin:0px 0px 20px 0px; border:1px solid #999999; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .boxArrowLink:hover{text-decoration:none; } .boxArrowLink p{color:white;margin:0px 0px 0px 0px; } .boxArrowLink .visual{width:22px; height:34px; margin:-17px 0px 0px 0px; display:block; position:absolute; top:50%; right:20px; background: url(/template/qweb/images/boxArrowLink.png) no-repeat top left; } /*+ boxService ..........................................................................*/ .boxService{color:white; width:300px; border:1px solid rgba(0,0,0,0.3); background: url(/template/qweb/images/pattern1.png) repeat top left; padding:15px 15px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.5); -webkit-box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.5); box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.5);} .boxService h2{color:white; font-size:22px; display:inline-block; line-height:1; position:absolute; top:45px; left:120px;} .boxService h2.doubleLine{top:35px;} .boxService h2 i{width:100px; height:85px; vertical-align:middle;} .boxService p{margin-top:15px; font-size:14px; line-height:1.3;} .boxService a{display:block; padding:10px 0px; text-align:center; font-weight:bold; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow:0px 0px 3px rgba(0,0,0,0.3); -webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.3); box-shadow:0px 0px 3px rgba(0,0,0,0.3);background: rgb(255,255,255);background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(237,237,237,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(237,237,237,1)));background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );} .boxService.pink{background-color:#eb2e95; } .boxService.pink a{color:#e12a90; } .boxService a:hover{text-decoration:underline;} .boxService.blue{background-color:#9ca3cf; } .boxService.blue a{color:#9aa0ce;} .boxService.yellow{background-color:#dbb52c; } .boxService.yellow a{color:#e9c237;} .boxService.orange{background-color:#e46224; } .boxService.orange a{color:#ee6b2b;} .boxService.green{background-color:#91c245; } .boxService.green a{color:#93c447;} .boxService.turquoise{background-color:#5DC4F1; } .boxService.turquoise a{color:#5DC4F1;} .listBoxService{overflow:hidden; margin:0px -30px -20px 0px; } .listBoxService li{float:left; margin:0px 30px 30px 0px; } /*+ boxService ..........................................................................*/ .boxBordered{border:1px solid #a6a6a6; background-color:#fff; padding:25px 30px; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.1); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.1); box-shadow:1px 1px 2px rgba(0,0,0,0.1);} .boxBordered .listSubMenu{margin:0px 0px 0px -10px; } aside.boxBordered{padding:15px 20px;} /*+ boxPaddingBorder ..........................................................................*/ .boxPaddingBorder{padding:0px 20px 0px 0px; margin:0px 20px 0px 0px; background: url(/template/qweb/images/boxPaddingBorder.png) no-repeat bottom right; } /*+ boxVideo ..........................................................................*/ .boxVideo{border:5px solid #f1f1f1; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .boxVideo img{padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; border:0px; display:block; } .boxVideo.floatLeft{margin:0px 20px 0px 0px; } /*+ boxCoupon ..........................................................................*/ .boxCoupon{width:182px; height:113px; position:relative; display:block; background: url(/template/qweb/images/boxCoupon.png) no-repeat top left; } .boxCoupon i{position:absolute; bottom:0px; color:#b0b0b0; right:0px; width:160px; height:80px; line-height:80px; text-align:center; font-size:24px; text-transform:uppercase; } .boxCoupon.double i{display:block; position:relative; top:48px; width:100%; margin:0px 0px 0px 15px; line-height:1; font-size:22px;} .boxCoupon .button{position:absolute; z-index:100; top:105%; left:20px; right:0;} .boxCoupon.small{} .boxCoupon.small i{height:auto; line-height:1; bottom:23px; font-size:25px;} .boxCoupon.small i strong{font-size:12px; font-weight:bold; text-transform:none; display:block; color:black; } .boxCoupon.small .button.order.orange{left:35px; right:10px; top:90%; font-size:12px; transform:rotate(-4deg); -ms-transform:rotate(-4deg); -webkit-transform:rotate(-4deg);} /* @@@@@@@@@@@@@@@@@@@@@@ boxColor @@@@@@@@@@@@@@@@@@@@@@ Inherits from .box about colored boxes with some padding and rounded corners */ /*+ boxColor ..........................................................................*/ [class^="boxColor"]{padding:10px 15px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } /*colors*/ [class^="boxColorGrey"]{background-color:#e4e4e4; } [class^="boxColorYellow"]{background-color:#fffacd; } [class^="boxColorBlue"]{background-color:#cdfcff; } [class^="boxColorRed"]{background-color:#ffe9e9; } [class^="boxColorPurple"]{background-color:#ffe9ff; } [class^="boxColorGreen"]{background-color:#f4ffe9; } [class^="boxColorBlack"]{background-color:#000; } [class^="boxColorWhite"]{background-color:#f8f8f8; } .boxColor{display:none; } /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// gradients ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ gradientGrey ..........................................................................*/ .gradientGrey{background: -moz-linear-gradient(top, rgba(255,255,255,0) 44%, rgba(250,250,250,0) 45%, rgba(0,0,0,0.04) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(44%,rgba(255,255,255,0)), color-stop(45%,rgba(250,250,250,0)), color-stop(100%,rgba(0,0,0,0.04)));background: -webkit-linear-gradient(top, rgba(255,255,255,0) 44%,rgba(250,250,250,0) 45%,rgba(0,0,0,0.04) 100%);background: -o-linear-gradient(top, rgba(255,255,255,0) 44%,rgba(250,250,250,0) 45%,rgba(0,0,0,0.04) 100%);background: -ms-linear-gradient(top, rgba(255,255,255,0) 44%,rgba(250,250,250,0) 45%,rgba(0,0,0,0.04) 100%);background: linear-gradient(top, rgba(255,255,255,0) 44%,rgba(250,250,250,0) 45%,rgba(0,0,0,0.04) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#0a000000',GradientType=0 );} .gradientGrey2{background: rgb(245,245,245);background: -moz-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(230,230,230,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,245,245,1)), color-stop(100%,rgba(230,230,230,1)));background: -webkit-linear-gradient(top, rgba(245,245,245,1) 0%,rgba(230,230,230,1) 100%);background: -o-linear-gradient(top, rgba(245,245,245,1) 0%,rgba(230,230,230,1) 100%);background: -ms-linear-gradient(top, rgba(245,245,245,1) 0%,rgba(230,230,230,1) 100%);background: linear-gradient(to bottom, rgba(245,245,245,1) 0%,rgba(230,230,230,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e6e6e6',GradientType=0 );} /* @@@@@@@@@@@@@@@@@@@@@@ ICON @@@@@@@@@@@@@@@@@@@@@@ about icon sets syntax */ /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// sets ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ icon sets ..........................................................................*/ /*miniset*/ .ico{display:inline-block; text-indent:-4000px; overflow:hidden; vertical-align:middle; background-image: url(/template/qweb/images/sprite.png); background-repeat:no-repeat; background-position:top left; } .ico.miniset.cart{width:13px; height:15px; background-position:-848px 0px;} .ico.miniset.search{width:13px; height:13px; background-position:-96px 0px;} .ico.miniset.lock{width:10px; height:14px; background-position:-240px 0px;} .ico.miniset.arrow{width:7px; height:10px; background-position:-96px -48px;} .ico.miniset.arrowMedium{width:8px; height:12px; background-position:-624px -32px;} .ico.miniset.remove{width:10px; height:10px; background-position:-128px 0px;} .ico.miniset.removeRed{width:10px; height:10px; background-position:-112px 0px;} .ico.miniset.removeRed.pos1{position:absolute; top:10px; right:7px;} .ico.miniset.edit{width:10px; height:10px; background-position:-704px 0px;} .ico.miniset.popupArrow{width:10px; height:6px; background-position:-464px -48px;} .ico.miniset.arrowLeft{width:16px; height:16px; background-position:-480px -48px;} .ico.miniset.arrowRight{width:16px; height:16px; background-position:-496px -48px;} .ico.miniset.homeBig{width:25px; height:21px; background-position:-784px -32px;} .ico.miniset.roundArrow{width:28px; height:27px; background-position:-752px -32px;} .ico.miniset.building{width:28px; height:40px; background-position:-720px -32px;} /*+ mainSprite ..........................................................................*/ .icoArrowRightGreenSmall,.icoArrowRightRedSmall,.icoArrowRightWhiteSmall,.icoArrowRightGrey,.icoArrowRightBlue,.icoArrowRightWhite,.icoArrowRightBlack,.icoArrowRightGreen,.icoArrowRightRed,.icoArrowRightYellow,.icoArrowRightGreyBig,.icoRemove,.icoSearch,.icoTrash,.icoDate,.icoComment,.icoInfo,.icoPhone,.icoStarOff,.icoStarOn,.icoCheckRed,.icoCheck,.icoDelete,.icoMinus,.icoPlus,.icoEarth,.icoPrivateServer,.icoDomain,.icoMagento,.icoHosting,.icoPhoneBig,.icoProductLogoLinux,.icoProductLogoWindows,.icoProductLogoMagento,.icoComputerBig,.icoTwitterBig,.icoUptimeBig,.icoLinkedin,.icoTwitter,.icoFacebook{display: inline-block;background-repeat: no-repeat;background-image: url('/template/qweb/images/spriteMain.png');} .icoArrowRightGreenSmall{background-position:0px 0px;width:5px;height:8px;} .icoArrowRightRedSmall{background-position:-5px 0px;width:5px;height:8px;} .icoArrowRightWhiteSmall{background-position:-10px 0px;width:5px;height:8px;} .icoArrowRightGrey{background-position:-15px 0px;width:5px;height:7px;} .icoArrowRightBlue{background-position:-20px 0px;width:7px;height:12px;} .icoArrowRightWhite{background-position:-27px 0px;width:7px;height:10px;} .icoArrowRightBlack{background-position:-34px 0px;width:8px;height:12px;} .icoArrowRightGreen{background-position:-42px 0px;width:8px;height:12px;} .icoArrowRightRed{background-position:-50px -13px;width:8px;height:12px;} .icoArrowRightYellow{background-position:-58px 0px;width:8px;height:12px;} .icoArrowRightGreyBig{background-position:-66px 0px;width:8px;height:12px;} .icoRemove{background-position:-74px 0px;width:10px;height:10px;} .icoSearch{background-position:-84px 0px;width:12px;height:11px;} .icoTrash{background-position:-96px 0px;width:13px;height:15px;} .icoDate{background-position:-109px 0px;width:13px;height:13px;} .icoComment{background-position:-122px 0px;width:14px;height:12px;} .icoInfo{background-position:-136px 0px;width:15px;height:16px;} .icoPhone{background-position:-151px 0px;width:20px;height:20px;} .icoStarOff{background-position:-171px 0px;width:21px;height:17px;} .icoStarOn{background-position:-192px 0px;width:21px;height:17px;} .icoCheckRed{background-position:-213px 0px;width:24px;height:19px;} .icoCheck{background-position:-237px 0px;width:25px;height:25px;} .icoCheckSmall{width:12px; height:12px; background: url(/template/qweb/images/icoCheckSmall.png) no-repeat top left; } .icoDelete{background-position:-262px 0px;width:25px;height:25px;} .icoMinus{background-position:-287px 0px;width:25px;height:25px;} .icoPlus{background-position:-312px 0px;width:25px;height:25px;} .icoEarth{background-position:-337px 0px;width:27px;height:27px;} .icoPrivateServer{background-position:-364px 0px;width:28px;height:28px;} .icoDomain{background-position:-392px 0px;width:32px;height:32px;} .icoMagento{background-position:-424px 0px;width:36px;height:28px;} .icoHosting{background-position:-460px 0px;width:40px;height:29px;} .icoPhoneBig{background-position:0px -32px;width:47px;height:92px;} .icoProductLogoLinux{background-position:-47px -32px;width:74px;height:74px;} .icoProductLogoWindows{background-position:-121px -32px;width:74px;height:74px;} .icoProductLogoMagento{background-position:-195px -32px;width:74px;height:74px;} .icoComputerBig{background-position:-269px -32px;width:82px;height:70px;} .icoTwitterBig{background-position:-351px -32px;width:87px;height:72px;} .icoUptimeBig{background-position:0px -124px;width:94px;height:82px;} .icoLinkedin{background-position:-94px -124px;width:37px;height:37px;} .icoTwitter{background-position:-131px -124px;width:36px;height:37px;} .icoFacebook{background-position:-167px -124px;width:37px;height:37px;} .icoHome{width:16px; height:15px; position:relative; top:-2px; margin:0px 0px 0px 0px; text-indent:-4000px; overflow:hidden; background: url(/template/qweb/images/icoHome.png) no-repeat top left; } .icoProactief{width:46px; height:30px; text-indent:-4000px; overflow:hidden; background: url(/template/qweb/images/icoProactief.png) no-repeat top left; } .icoBackup{width:37px; height:41px; text-indent:-4000px; overflow:hidden; background: url(/template/qweb/images/icoBackup.png) no-repeat top left; } .icoInfoPopup{width:10px; height:10px; text-indent:-4000px; overflow:hidden; background: url(/template/qweb/images/icoInfoPopup.png) no-repeat top left; } .icoButtonCheckBig{width:25px; height:21px; text-indent:-4000px; overflow:hidden; background: url(/template/qweb/images/icoButtonCheckBig.png) no-repeat top left; } .icoWindowsLogo{width:24px; height:24px; text-indent:-4000px; overflow:hidden; background: url(/template/qweb/images/menu/windows-24x24.png) no-repeat top left; } .icoMagentoLogo{width:22px; height:26px; text-indent:-4000px; overflow:hidden; background: url(/template/qweb/images/icoMagentoLogo22.png) no-repeat top left; } .icoLinuxLogo{width:22px; height:27px; text-indent:-4000px; overflow:hidden; background: url(/template/qweb/images/menu/linux-24x24.png) no-repeat top left; } .icoMagentoPakketten{width:22px; height:27px; text-indent:-4000px; overflow:hidden; background: url(/template/qweb/images/icoMagentoPakketten.png) no-repeat top left; } .icoMagentoServices{width:22px; height:27px; text-indent:-4000px; overflow:hidden; background: url(/template/qweb/images/icoMagentoServices.png) no-repeat top left; } /*contentSwitch*/ .ico.contentSwitch{width:18px; height:11px; } .ico.contentSwitch.off{background-position:-720px 0px;} /*variations*/ .icoUptimeBig{text-indent:0px; line-height:82px; text-indent:-10px; font-size:18px; color:white; text-align:center; text-shadow:1px 1px 0 rgba(0,0,0,0.3);} /*checkset*/ .ico.checkset{width:24px; height:20px; background-position:-784px 0px;} .ico.checkset.off{background-position:-752px 0px;} /*blackset*/ .ico.blackset{width:48px; height:48px; } .ico.blackset.mail{background-position:0px -48px;} .ico.blackset.phone{background-position:-928px 0px;} .ico.blackset.id{background-position:-48px -48px;} /*socialset*/ .ico.socialset{width:16px; height:16px; } .ico.socialset.facebook{background-position:-640px 0px;} .ico.socialset.linkedin{background-position:-288px 0px;} .ico.socialset.twitter{background-position:-32px 0px;} .ico.socialset.hyves{background-position:-352px 0px;} .ico.socialset.google{background-position:-432px 0px;} .ico.socialset:hover{} .ico.socialset.facebook:hover, .ico.socialset.facebook.active{background-position:-656px 0px;} .ico.socialset.linkedin:hover, .ico.socialset.linkedin.active{background-position:-304px 0px;} .ico.socialset.twitter:hover, .ico.socialset.twitter.active{background-position:-48px 0px;} .ico.socialset.hyves:hover, .ico.socialset.hyves.active{background-position:-368px 0px;} .ico.socialset.google:hover, .ico.socialset.google.active{background-position:-448px 0px;} /*socialsetBig*/ .ico.socialsetBig{width:24px; height:24px; } .ico.socialsetBig.facebook{background-position:-608px 0px;} .ico.socialsetBig.linkedin{background-position:-256px 0px;} .ico.socialsetBig.twitter{background-position:0px 0px;} .ico.socialsetBig.hyves{background-position:-320px 0px;} .ico.socialsetBig.google{background-position:-400px 0px;} /*commset*/ .ico.commset{background: url(/template/qweb/images/spriteSnel.png) no-repeat top left; width:30px; height:25px; background-position:center center; background-repeat:no-repeat;} .ico.commset.phone{background-position:-96px -16px;} .ico.commset.chat{background-position:-816px 0px;} .ico.commset.email{background-position:-672px 0px;} .ico.commset.skype{background-position:-64px 0px;} .ico.commset.facebook{background: url(/template/qweb/images/fb.png) no-repeat top left; width:30px; height:30px; background-position:center center; background-repeat:no-repeat;} .ico.commset.twitter{background: url(/template/qweb/images/tw.png) no-repeat top left; width:30px; height:30px; background-position:center center; background-repeat:no-repeat;} .ico.commset.openingstijden{background: url(/template/qweb/images/open.png) no-repeat top left; width:30px; height:40px; background-position:center center; background-repeat:no-repeat;} /*service*/ .icoService{width:99px; height:85px; display:inline-block; text-indent:-4000px; overflow:hidden; vertical-align:middle; } .icoService.domain{background: url(/template/qweb/images/icoServiceDomain.png) no-repeat top left; } .icoService.webhosting{background: url(/template/qweb/images/icoServiceWebhosting.png) no-repeat top left; } .icoService.virtual{background: url(/template/qweb/images/icoServiceVirtual.png) no-repeat top left; } .icoService.dedicated{background: url(/template/qweb/images/icoServiceDedicated.png) no-repeat top left; } .icoService.qfilter{background: url(/template/qweb/images/icoServiceQfilter.png) no-repeat top left; } .icoService.hosted{background: url(/template/qweb/images/icoServiceHosted.png) no-repeat top left; } .icoService.magento{background: url(/template/qweb/images/icoServiceMagento.png) no-repeat top left;margin-left: 15px; } /*service*/ .icoFeatures{width:85px; height:85px; display:inline-block; text-indent:-4000px; overflow:hidden; vertical-align:middle; } .icoFeatures.knowledge{background: url(/template/qweb/images/icoFeaturesKnowledge.png) no-repeat top left; } .icoFeatures.netwerk{background: url(/template/qweb/images/icoFeaturesNetwerk.png) no-repeat top left; } .icoFeatures.helpdesk{background: url(/template/qweb/images/icoFeaturesHelpdesk.png) no-repeat top left; } .icoFeatures.visie{background: url(/template/qweb/images/icoFeaturesVisie.png) no-repeat top left; } .icoFeatures.mvo{background: url(/template/qweb/images/icoFeaturesMVO.png) no-repeat top left; } .icoFeatures.referenties{background: url(/template/qweb/images/icoFeaturesReferenties.png) no-repeat top left; } .icoFeatures.datacenters{background: url(/template/qweb/images/icoFeaturesDatacenters.png) no-repeat top left; } .icoFeatures.klantenpaneel{background: url(/template/qweb/images/icoFeaturesKlantenpaneel.png) no-repeat top left; } .icoFeatures.contact{background: url(/template/qweb/images/icoFeaturesContact.png) no-repeat top left; } /* @@@@@@@@@@@@@@@@@@@@@@ icoStarRating @@@@@@@@@@@@@@@@@@@@@@ example: */ /*+ body ..........................................................................*/ .ico.star{display:inline-block; vertical-align:middle; width:105px; height:17px; background: url(/template/qweb/images/icoStarOff.png) repeat top left; text-indent:0px; } .ico.star span{display:block; height:17px; background: url(/template/qweb/images/icoStarOn.png) repeat top left;} /*scores*/ .ico.star.score1 span{width:21px; } .ico.star.score2 span{width:42px; } .ico.star.score3 span{width:63px; } .ico.star.score4 span{width:84px; } .ico.star.score5 span{width:105px; } /* @@@@@@@@@@@@@@@@@@@@@@ LIST @@@@@@@@@@@@@@@@@@@@@@ about Lists of all sorts syntax */ /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// members ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ listLinks ..........................................................................*/ .listLinks{color:#939090} .listLinks a{text-decoration:underline; } .listLinks a:hover{color:black; } /*+ listSubMenu ..........................................................................*/ .listSubMenu{margin:30px 0px 0px 0px; } .listSubMenu {margin:0px 0px 0px 0px; } .listSubMenu li{border-bottom:1px solid #b3b3b3; padding:5px 5px; font-size:12px; color:#565656; } .listSubMenu li:last-child{border-bottom:0px solid #b3b3b3;} .listSubMenu li a i{margin-right:5px; margin-top:-2px;} .listSubMenu li a:hover{color:#1a9edb; text-decoration:underline; } .listSubMenu li strong{font-size:20px; color:#626262; } .listSubMenu li.active strong{color:#1a9edb; font-weight:bold; } .listSubMenu .active{color:#1a9edb; font-weight:bold; } .listSubMenu li ul{margin:5px -10px 0px 5px;border-bottom:1px solid #b3b3b3} .listSubMenu li ul.subMenu_2{margin:5px -10px 0px 10px;border-bottom:1px solid #b3b3b3} .listSubMenu li ul.subMenu_1{border-bottom:0; margin-left:0px;} .listSubMenu li ul li.active{color:#1a9edb; font-weight:bold; font-size:12px; border-top:1px solid #b3b3b3; margin-top:-1px;} .listSubMenu li ul li:last-child{border-bottom:0px; /*border-top:1px solid #b3b3b3;*/ } /*+ listCheck ..........................................................................*/ .listCheck{} .listCheck li{padding:5px 0px;} .listCheck li i{margin:0px 5px 0px 0px; } /*+ listTabs ..........................................................................*/ .listTabs{z-index:100; position:relative; top:1px; } .listTabs:after{visibility: hidden; display: block;font-size: 0;content: " ";clear: both;height: 0;} .listTabs li{float:left; margin:0px -1px 0px 0px; } .listTabs li a{background-color:#e2f6ff; color:#4f4f4f; height:35px; line-height:35px; padding:0px 10px; display:block; border:1px solid #c9c9c9; } .listTabs li.active a{background-color:#f5f5f5; position:relative; border-bottom:1px solid #e2f6ff;} .tabContent{display:none; } .tabContent.active{display:block; } .listTabs.alt{border-bottom:1px solid #b3b3b3; /*margin:0px -20px 25px -20px;*/ padding:0px 0px 0px 20px; } .listTabs.alt li{margin:0px 2px -1px 0px; } .listTabs.alt li a{background: url(/template/qweb/images/pattern1.png) repeat; cursor:pointer; color:#8c8c8c; height:35px; line-height:35px; padding:0px 10px; display:block; border:1px solid #c9c9c9; } .listTabs.alt li.active a{background:#ffffff; position:relative; border-bottom:1px solid #ffffff;box-shadow: 0px 0px 5px} .listTabs.alt li i{margin:0px 5px; } /*+ listFeatures ..........................................................................*/ .listFeatures{overflow:hidden; margin:30px -30px 0px 0px; } .listFeatures li{float:left; width:330px; overflow:hidden;} .listFeatures li p{font-size:13px;} .listFeatures li i{float:left; margin:0px 10px 30px 0px; } /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// listPayProviders ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ setup ..........................................................................*/ .listPayProviders{overflow:hidden; margin:0px -30px 0px 0px; } .listPayProviders li{float:left; margin:0px 20px 0px 0px; /*height:130px;*/ } .listPayProviders .provider{width:162px; height:80px; cursor:pointer; background-position:center center; background-repeat:no-repeat; border:1px solid #c9c9c9; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; } .listPayProviders .input{margin:5px 0px 0px 0px; } /* @@@@@@@@@@@@@@@@@@@@@@ listBreadcrumb @@@@@@@@@@@@@@@@@@@@@@ Example: page > page > current */ /*+ body ..........................................................................*/ .listBreadcrumb{overflow:hidden; margin:0px 0px 5px 0px; } .listBreadcrumb.indent{margin:-30px 0px 10px 0px; } /*+ trail ..........................................................................*/ /*page*/ .listBreadcrumb li{float:left; font-size:13px;white-space: nowrap;} .listBreadcrumb li a{color:#c9c9c9; text-decoration:underline; } .listBreadcrumb li a:hover{color:#1a9edb; } /*divider*/ .listBreadcrumb li:after{content:">"; padding:0px 4px; color:#b9b9c8; font-size:11px;} .listBreadcrumb li:last-child:after{content:"";} /*current*/ .listBreadcrumb li.current a{text-decoration:none; } /* @@@@@@@@@@@@@@@@@@@@@@ listIconInline @@@@@@@@@@@@@@@@@@@@@@ Object to list icons "left to right" (inline) or "top to bottom" (block) */ /*+ listIconInline ..........................................................................*/ .listIconInline{} .listIconInline li{display:inline-block; margin:0px 5px 0px 5px; } /*+ listIconBlock ..........................................................................*/ .listIconBlock{} .listIconBlock li{padding:2px 0px;} /*corrections*/ .listIconBlock .icoPDF{position:relative; top:-2px; } /* @@@@@@@@@@@@@@@@@@@@@@ listDivider @@@@@@@@@@@@@@@@@@@@@@ Example: menu | menu | menu | menu */ /*+ body ..........................................................................*/ .listDivider{overflow:hidden;} /*+ trail ..........................................................................*/ /*link*/ .listDivider li{float:left; } .listDivider li a{color:#a7a7a7; text-transform:uppercase; font-size:10px; text-decoration:underline; } /*divider*/ .listDivider li:after{content:"|"; padding:0px 5px; font-size:10px;} .listDivider li:last-child:after{content:"";} /*active*/ .listDivider li.active a{} /*hover*/ .listDivider li a:hover{color:#e0dd61; } /* @@@@@@@@@@@@@@@@@@@@@@ GRID @@@@@@@@@@@@@@@@@@@@@@ a fluid 12 column grid, used primarily for responsive webdesign version 1.0 dateCreated 02/02/2012 dateChanged 09/02/2012 */ /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// setup ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ setup ..........................................................................*/ .grid{margin-left:auto; margin-right:auto;} .grid .gridSpan1,.grid .gridSpan2,.grid .gridSpan3,.grid .gridSpan4,.grid .gridSpan5,.grid .gridSpan6,.gridSpan7,.grid .gridSpan8,.grid .gridSpan9,.grid .gridSpan10,.grid .gridSpan11,.grid .gridSpan12{} .grid{position:relative;} .grid:after{visibility: hidden; display: block;font-size: 0;content: " ";clear: both;height: 0;} * html .grid{ zoom: 1; } *:first-child+html .grid{ zoom: 1; } /*+ debug ..........................................................................*/ .grid.debug{outline:1px dotted red;} .grid.debug > div, .grid.debug > section, .grid.debug > aside, .grid.debug > header, .grid.debug > footer{outline:1px dotted red;} /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// variations ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ mainGrid ..........................................................................*/ .grid.gridFooter{} .grid.gridFooter .c1{float:left; width:150px; margin:5px; } /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// 12 column grid ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*setup*/ .grid > .gridSpan1,.grid > .gridSpan2,.grid > .gridSpan3,.grid > .gridSpan4,.grid > .gridSpan5,.grid > .gridSpan6, .grid > .gridSpan7,.grid > .gridSpan8,.grid > .gridSpan9,.grid > .gridSpan10,.grid > .gridSpan11,.grid > .gridSpan12{position:relative; float:left; margin-left:2%; margin-right:0%; } .grid .gridSpan1:first-child, .grid .gridSpan2:first-child, .grid .gridSpan3:first-child, .grid .gridSpan4:first-child, .grid .gridSpan5:first-child, .grid .gridSpan6:first-child, .grid .gridSpan7:first-child, .grid .gridSpan8:first-child, .grid .gridSpan9:first-child, .grid .gridSpan10:first-child, .grid .gridSpan11:first-child, .grid .gridSpan12:first-child{margin-left:0%;} .grid .gridSpan1.first, .grid .gridSpan2.first, .grid .gridSpan3.first, .grid .gridSpan4.first, .grid .gridSpan5.first, .grid .gridSpan6.first, .grid .gridSpan7.first, .grid .gridSpan8.first, .grid .gridSpan9.first, .grid .gridSpan10.first, .grid .gridSpan11.first, .grid .gridSpan12.first{margin-left:0%;} /*column width*/ .grid .gridSpan1{width:6.5%;} .grid .gridSpan2{width:15%;} .grid .gridSpan3{width:23.5%;} .grid .gridSpan4{width:32%;} .grid .gridSpan5{width:40.5%;} .grid .gridSpan6{width:49.0%;} .grid .gridSpan7{width:57.5%;} .grid .gridSpan8{width:66%;} .grid .gridSpan9{width:74.5%;} .grid .gridSpan10{width:83%;} .grid .gridSpan11{width:91%;} .grid .gridSpan12{width:100%;} /*move x columns*/ .gridMove1{margin-left:9.5%;} .gridMove1:first-child{margin-left:8.5%;} .gridMove2{margin-left:18%;} .gridMove2:first-child{margin-left:17%;} .gridMove3{margin-left:26.5%;} .gridMove3:first-child{margin-left:25.5%;} .gridMove4{margin-left:35%;} .gridMove4:first-child{margin-left:34%;} .gridMove5{margin-left:43.5%;} .gridMove5:first-child{margin-left:42.5%;} .gridMove6{margin-left:52%;} .gridMove6:first-child{margin-left:51%;} .gridMove7{margin-left:60.5%;} .gridMove7:first-child{margin-left:59.5%;} .gridMove8{margin-left:69%;} .gridMove8:first-child{margin-left:68%;} .gridMove9{margin-left:77.5%;} .gridMove9:first-child{margin-left:76.5%;} .gridMove10{margin-left:86%;} .gridMove10:first-child{margin-left:85%;} .gridMove11{margin-left:94.5%;} .gridMove11:first-child{margin-left:93.5%;} /*margin*/ .grid.noMargin > div{margin-bottom:0px;} /*borders*/ .grid .borderRight{border-right:1px solid #c9c9c9; margin-right:-1px !important; } .grid .about.ex{margin:-1px -1px -1px 0px; } .grid .about.ex.alt{margin:0px -1px -1px 0px; } .grid.indentBorder{margin-top:1px;} /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// 12 column grid (no gutter) ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*setup*/ .grid.noGutter > .gridSpan1,.grid.noGutter > .gridSpan2,.grid.noGutter > .gridSpan3,.grid.noGutter > .gridSpan4,.grid.noGutter > .gridSpan5,.grid.noGutter > .gridSpan6,.gridSpan7,.grid.noGutter > .gridSpan8,.grid.noGutter > .gridSpan9,.grid.noGutter > .gridSpan10,.grid.noGutter > .gridSpan11,.grid.noGutter > .gridSpan12{position:relative; float:left; margin-left:0%; margin-right:0%;} .grid.noGutter > .gridSpan1:first-child, .grid.noGutter > .gridSpan2:first-child, .grid.noGutter > .gridSpan3:first-child, .grid.noGutter > .gridSpan4:first-child, .grid.noGutter > .gridSpan5:first-child, .grid.noGutter > .gridSpan6:first-child, .grid.noGutter > .gridSpan7:first-child, .grid.noGutter > .gridSpan8:first-child, .grid.noGutter > .gridSpan9:first-child, .grid.noGutter > .gridSpan10:first-child, .grid.noGutter > .gridSpan11:first-child, .grid.noGutter > .gridSpan12:first-child{margin-left:0px;} /*column width*/ .grid.noGutter > .gridSpan1{width:8.333%;} .grid.noGutter > .gridSpan2{width:16.666%;} .grid.noGutter > .gridSpan3{width:24.999%;} .grid.noGutter > .gridSpan4{width:33.332%;} .grid.noGutter > .gridSpan5{width:41.665%;} .grid.noGutter > .gridSpan6{width:49.998%;} .grid.noGutter > .gridSpan7{width:58.331%;} .grid.noGutter > .gridSpan8{width:66.664%;} .grid.noGutter > .gridSpan9{width:74.997%;} .grid.noGutter > .gridSpan10{width:83.33%;} .grid.noGutter > .gridSpan11{width:91.663%;} .grid.noGutter > .gridSpan12{width:100%;} /*move x columns*/ .grid.noGutter .gridMove1{margin-left:8.333%;} .grid.noGutter .gridMove1:first-child{margin-left:8.333%;} .grid.noGutter .gridMove2{margin-left:16.666%;} .grid.noGutter .gridMove2:first-child{margin-left:16.666%;} .grid.noGutter .gridMove3{margin-left:24.999%;} .grid.noGutter .gridMove3:first-child{margin-left:24.999%;} .grid.noGutter .gridMove4{margin-left:33.332%;} .grid.noGutter .gridMove4:first-child{margin-left:33.332%;} .grid.noGutter .gridMove5{margin-left:41.665%;} .grid.noGutter .gridMove5:first-child{margin-left:41.665%;} .grid.noGutter .gridMove6{margin-left:49.998%;} .grid.noGutter .gridMove6:first-child{margin-left:49.998%;} .grid.noGutter .gridMove7{margin-left:58.331%;} .grid.noGutter .gridMove7:first-child{margin-left:58.331%;} .grid.noGutter .gridMove8{margin-left:66.664%;} .grid.noGutter .gridMove8:first-child{margin-left:66.664%;} .grid.noGutter .gridMove9{margin-left:74.997%;} .grid.noGutter .gridMove9:first-child{margin-left:74.997%;} .grid.noGutter .gridMove10{margin-left:83.33%;} .grid.noGutter .gridMove10:first-child{margin-left:83.33%;} .grid.noGutter .gridMove11{margin-left:91.663%;} .grid.noGutter .gridMove11:first-child{margin-left:91.663%;} /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// stepPaging ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ setup ..........................................................................*/ .stepPaging{width:176px; height:26px; float:right; position:relative; right:-7px; top:-3px; } .stepPaging.step1{background:url(/template/qweb/images/stepPaging1.png) no-repeat top left; } .stepPaging.step2{background:url(/template/qweb/images/stepPaging2.png) no-repeat top left; } .stepPaging.step3{background:url(/template/qweb/images/stepPaging3.png) no-repeat top left; } .stepPaging.step4{background:url(/template/qweb/images/stepPaging4.png) no-repeat top left; } .stepPaging.step5{background:url(/template/qweb/images/stepPaging5.png) no-repeat top left; } /* @@@@@@@@@@@@@@@@@@@@@@ SHAPES @@@@@@@@@@@@@@@@@@@@@@ about Content position in all different shapes syntax */ /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// shapeVisualIndent ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .shapeVisualIndent{position:relative; padding-left:30px;} .shapeVisualIndent .visual{position:absolute; top:0px; left:0px;} /*+ extensions ..........................................................................*/ .shapeVisualIndent.grand {padding-left:240px;} .shapeVisualIndent.heavy {padding-left:120px;} .shapeVisualIndent.greater {padding-left:80px;} .shapeVisualIndent.base {padding-left:40px;} .shapeVisualIndent.lesser {padding-left:30px;} .shapeVisualIndent.light {padding-left:20px;} .shapeVisualIndent.minimal {padding-left:10px;} /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// shapeVisualPin ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .shapePin{position:relative; z-index:100;} .shapePin:after{visibility: hidden; display: block;font-size: 0;content: " ";clear: both;height: 0;} .shapePin .floatLeft, .shapePin .floatRight{position:relative; } .shapePin img{display:block; } /*+ pin drop location ..........................................................................*/ .shapePin [class^="pin"]{position:absolute; z-index:200; } .shapePin [class^="pinTop"]{top:15px;} .shapePin [class^="pinMiddle"]{top:50%;} .shapePin [class^="pinBottom"]{bottom:15px;} .shapePin [class^="pin"][class*="Left"]{left:15px;} .shapePin [class^="pin"][class*="Right"]{right:15px;} /* @@@@@@@@@@@@@@@@@@@@@@ cyclePlugin @@@@@@@@@@@@@@@@@@@@@@ about jQuery cycle plugin component */ /*+ body ..........................................................................*/ .cyclePlugin{height:300px; position:relative; border-bottom:1px solid #146691; -moz-box-shadow:0px 2px 5px rgba(0,0,0,0.3); -webkit-box-shadow:0px 2px 5px rgba(0,0,0,0.3); box-shadow:0px 2px 5px rgba(0,0,0,0.3); background: #6dcff6;background: -moz-linear-gradient(top, #6dcff6 0%, #40aee6 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6dcff6), color-stop(100%,#40aee6));background: -webkit-linear-gradient(top, #6dcff6 0%,#40aee6 100%);background: -o-linear-gradient(top, #6dcff6 0%,#40aee6 100%);background: -ms-linear-gradient(top, #6dcff6 0%,#40aee6 100%);background: linear-gradient(to bottom, #6dcff6 0%,#40aee6 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6dcff6', endColorstr='#40aee6',GradientType=0 );} .layoutSection.home .cyclePlugin {background: #000000;height:455px;} .layoutSection.home .cyclePlugin .slides {height:455px;} .cyclePlugin .layoutCenter{width:100%;} /*magento*/ .cyclePlugin.magento{background: rgb(246,45,156);background: -moz-linear-gradient(top, rgba(246,45,156,1) 0%, rgba(195,26,110,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,45,156,1)), color-stop(100%,rgba(195,26,110,1)));background: -webkit-linear-gradient(top, rgba(246,45,156,1) 0%,rgba(195,26,110,1) 100%);background: -o-linear-gradient(top, rgba(246,45,156,1) 0%,rgba(195,26,110,1) 100%);background: -ms-linear-gradient(top, rgba(246,45,156,1) 0%,rgba(195,26,110,1) 100%);background: linear-gradient(to bottom, rgba(246,45,156,1) 0%,rgba(195,26,110,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f62d9c', endColorstr='#c31a6e',GradientType=0 );} /*blog*/ .cyclePlugin.blog{height:150px; } .cyclePlugin.blog .slides{height:150px;} .cyclePlugin.blog #nav{position:absolute; top:120px; right:0px; z-index:100; } /*+ slides ..........................................................................*/ .cyclePlugin .slides{height:300px;} .cyclePlugin .slides li{width:100% !important; text-align:center; } .cyclePlugin .slides li h1{position:absolute; top:70px; left:390px; color:white; text-shadow:1px 1px 0 rgba(0,0,0,0.2); font-size:70px;} .cyclePlugin .slides .lineup{position:absolute; top:170px; left:390px; font-size:20px; color:black; font-weight:bold; } .cyclePlugin .slides .lineup span{display:block; } .cyclePlugin .slides .lineup i{margin:0px 7px 0px 0px; } .cyclePlugin .slides .insideButton{display:inline-block; position:relative; } /*.cyclePlugin .slides a{position:absolute; top:210px; right:25px;}*/ .cyclePlugin.coupon, .cyclePlugin.coupon .slides{height:207px; background: rgb(155,204,73);background: -moz-linear-gradient(top, rgba(155,204,73,1) 0%, rgba(111,167,40,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(155,204,73,1)), color-stop(100%,rgba(111,167,40,1)));background: -webkit-linear-gradient(top, rgba(155,204,73,1) 0%,rgba(111,167,40,1) 100%);background: -o-linear-gradient(top, rgba(155,204,73,1) 0%,rgba(111,167,40,1) 100%);background: -ms-linear-gradient(top, rgba(155,204,73,1) 0%,rgba(111,167,40,1) 100%);background: linear-gradient(to bottom, rgba(155,204,73,1) 0%,rgba(111,167,40,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9bcc49', endColorstr='#6fa728',GradientType=0 ); border:0;} .cyclePlugin .boxCoupon{position:absolute; bottom:80px; right:0px;} .cyclePlugin .boxCoupon a{right:0; top:105%;} .cyclePlugin .couponContainer{margin:0px auto 0px auto; width:960px; position:relative; } /*+ nav ..........................................................................*/ .cyclePlugin #nav{position:absolute; bottom:15px; margin-left:-480px; text-align:right; left:50%; z-index:100; width:960px; } .cyclePlugin #nav a{border:1px solid #ffffff; background-color:#65c9f3; text-indent:4000px; overflow:hidden; margin:0px 3px; display:inline-block; width:12px; height:12px; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; } .layoutSection.home .cyclePlugin #nav a {background-color:#a7a7a7;} .cyclePlugin #nav a.activeSlide, .layoutSection.home .cyclePlugin #nav a.activeSlide{background-color:#ffffff;}{background-color:#ffffff;} /* @@@@@@@@@@@@@@@@@@@@@@ FORM @@@@@@@@@@@@@@@@@@@@@@ about Form elements syntax */ /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// sets ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ elements ..........................................................................*/ input[type="text"], input[type="email"], input[type="password"], textarea, select{font-size:12px; border:1px solid #d5d5d5; margin:0px 0px 15px 0px; padding:5px 7px; width:100%; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: #ffffff;background: -moz-linear-gradient(top, #ffffff 0%, #f8f8f8 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f8f8f8));background: -webkit-linear-gradient(top, #ffffff 0%,#f8f8f8 100%);background: -o-linear-gradient(top, #ffffff 0%,#f8f8f8 100%);background: -ms-linear-gradient(top, #ffffff 0%,#f8f8f8 100%);background: linear-gradient(to bottom, #ffffff 0%,#f8f8f8 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f8f8f8',GradientType=0 );} input[type="text"].cAlert, input[type="email"].cAlert, input[type="password"].cAlert, textarea.cAlert, select.cAlert{ border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: #FFA199; background: -moz-linear-gradient(top, #FFA199 0%, #FABAB4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFA199), color-stop(100%,#FABAB4 )); background: -webkit-linear-gradient(top, #FFA199 0%,#FABAB4 100%); background: -o-linear-gradient(top, #FFA199 0%,#FABAB4 100%); background: -ms-linear-gradient(top, #FFA199 0%,#FABAB4 100%); background: linear-gradient(to bottom, #FFA199 0%,#FABAB4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFA199', endColorstr='#FABAB4',GradientType=0 ); } input[type="text"].cCheck, input[type="email"].cCheck, input[type="password"].cCheck, textarea.cCheck, select.cCheck{ border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: #ACFCAF ; background: -moz-linear-gradient(top, #ACFCAF 0%, #E4FDE5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ACFCAF ), color-stop(100%,#E4FDE5 )); background: -webkit-linear-gradient(top, #ACFCAF 0%,#E4FDE5 100%); background: -o-linear-gradient(top, #ACFCAF 0%,#E4FDE5 100%); background: -ms-linear-gradient(top, #ACFCAF 0%,#E4FDE5 100%); background: linear-gradient(to bottom, #ACFCAF 0%,#E4FDE5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ACFCAF ', endColorstr='#E4FDE5 ',GradientType=0 ); } input[type="text"].error, input[type="email"].error, input[type="password"].error, textarea.error, select.error{border:1px solid #ff0000; } td > input {margin:0 !important;} .formSearch{position:relative; } .formSearch input{background:#ffffff; padding-right:30px; width:100%; border:1px solid rgba(0,0,0,0.3); -moz-box-shadow:inset 3px 3px 3px rgba(0,0,0,0.1); -webkit-box-shadow:inset 3px 3px 3px rgba(0,0,0,0.1); box-shadow:inset 3px 3px 3px rgba(0,0,0,0.1);} .formSearch a{position:absolute; top:7px; right:10px; } /* @@@@@@@@@@@@@@@@@@@@@@ BUTTON @@@@@@@@@@@@@@@@@@@@@@ about button objects and related objects syntax */ /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// switch ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .switch{width:20px; position:relative; display:inline-block; vertical-align:middle; } .switch.sideBySide{width:auto; } .switch a{background-color:#ffffff; border:1px solid #c2c2c2; padding:0px 0px 0px 0px; font-weight:bold; line-height:14px; text-align:center; width:14px; height:14px; border-bottom:2px solid #c2c2c2; color:#a0a0a0;} /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// button2 ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .button2{display:inline-block; line-height:2.4; padding:0px 10px; text-transform:uppercase; font-size:12px; font-weight:bold; position:relative; } .button2.heavy{text-align:center; padding:0px 25px; font-size:18px;} .button2.heavy.block{display:block; } .button2.minimal{line-height:2.3;} /*+ primary ..........................................................................*/ .button2.primary{background-color:#ffffff; border:1px solid #c2c2c2; border-bottom:2px solid #c2c2c2; color:#a0a0a0;} .button2.primary:hover{-moz-box-shadow:inset 0px 5px 5px rgba(89,89,89,0.1); -webkit-box-shadow:inset 0px 5px 5px rgba(89,89,89,0.1); box-shadow:inset 0px 5px 5px rgba(89,89,89,0.1);} .button2.primary:active, .button2.primary:focus{-moz-box-shadow:inset 0px 5px 5px rgba(89,89,89,0.3); -webkit-box-shadow:inset 0px 5px 5px rgba(89,89,89,0.3); box-shadow:inset 0px 5px 5px rgba(89,89,89,0.3);} /*+ secondary ..........................................................................*/ .button2.secondary{background-color:#292929; border:1px solid #181818; color:#fff; -moz-box-shadow:inset 0px 5px 5px rgba(255,255,255,0.1); -webkit-box-shadow:inset 0px 5px 5px rgba(255,255,255,0.1); box-shadow:inset 0px 5px 5px rgba(255,255,255,0.1);} .button2.secondary:hover{-moz-box-shadow:inset 0px -5px 5px rgba(255,255,255,0.3); -webkit-box-shadow:inset 0px -5px 5px rgba(255,255,255,0.3); box-shadow:inset 0px -5px 5px rgba(255,255,255,0.3);} .button2.secondary:active, .button2.secondary:focus{-moz-box-shadow:inset 0px -5px 5px rgba(255,255,255,0.5); -webkit-box-shadow:inset 0px -5px 5px rgba(255,255,255,0.5); box-shadow:inset 0px -5px 5px rgba(255,255,255,0.5);} /*option*/ .button2.secondary .option{position:absolute; top:30px; left:-1px; right:-1px; height:14px; line-height:14px; font-size:8px; text-align:center; -moz-box-shadow:inset 0px 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow:inset 0px 3px 3px rgba(0,0,0,0.2); box-shadow:inset 0px 3px 3px rgba(0,0,0,0.2);} .button2.secondary .option.cApprove{background-color:#dcf5c5; border:1px solid #5fa922; color:#3f8406; border-top:0px; } .button2.secondary .option.cCaution{background-color:#fff3a7; border:1px solid #9f851b; color:#88570b; border-top:0px; } .button2.secondary .option.cAlert{background-color:#ffcecb; border:1px solid #a23f29; color:#942c10; border-top:0px; } .button2.secondary.green{border:1px solid #195600; background: rgb(46,154,0);background: -moz-linear-gradient(top, rgba(46,154,0,1) 0%, rgba(26,89,0,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(46,154,0,1)), color-stop(100%,rgba(26,89,0,1)));background: -webkit-linear-gradient(top, rgba(46,154,0,1) 0%,rgba(26,89,0,1) 100%);background: -o-linear-gradient(top, rgba(46,154,0,1) 0%,rgba(26,89,0,1) 100%);background: -ms-linear-gradient(top, rgba(46,154,0,1) 0%,rgba(26,89,0,1) 100%);background: linear-gradient(top, rgba(46,154,0,1) 0%,rgba(26,89,0,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e9a00', endColorstr='#1a5900',GradientType=0 ); } .button2.secondary.blue{border:1px solid #246c8d; background: rgb(47,182,225);background: -moz-linear-gradient(top, rgba(47,182,225,1) 0%, rgba(30,139,207,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(47,182,225,1)), color-stop(100%,rgba(30,139,207,1)));background: -webkit-linear-gradient(top, rgba(47,182,225,1) 0%,rgba(30,139,207,1) 100%);background: -o-linear-gradient(top, rgba(47,182,225,1) 0%,rgba(30,139,207,1) 100%);background: -ms-linear-gradient(top, rgba(47,182,225,1) 0%,rgba(30,139,207,1) 100%);background: linear-gradient(to bottom, rgba(47,182,225,1) 0%,rgba(30,139,207,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2fb6e1', endColorstr='#1e8bcf',GradientType=0 );} /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// button ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .button{display:inline-block; padding:0px 10px; position:relative; color:white; font-size:15px; border:0px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } /*+ primary ..........................................................................*/ .button.primary{background-color:#000000; padding:5px 10px; font-size:11px; text-transform:uppercase; border:1px solid #000; -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.5); -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.5); box-shadow:inset 0px 1px 0px rgba(255,255,255,0.5); border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; } .button.primary i{margin:-2px 0px 0px 5px; } .button.primary:hover{background-color:#535353; -moz-box-shadow:inset 0px 5px 10px rgba(0,0,0,0.8); -webkit-box-shadow:inset 0px 5px 10px rgba(0,0,0,0.8); box-shadow:inset 0px 5px 10px rgba(0,0,0,0.8);} .button.primary:active, .button.primary:focus{background-color:#727272; } /*+ secondary ..........................................................................*/ .button.secondary{border:1px solid #4b1a94; font-size:11px; text-transform:uppercase; padding:7px 10px 5px 10px; height:auto; line-height:normal; -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.5); -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.5); box-shadow:inset 0px 1px 0px rgba(255,255,255,0.5); border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; background: #b6a1d1;background: -moz-linear-gradient(top, #b6a1d1 0%, #7b54ad 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b6a1d1), color-stop(100%,#7b54ad));background: -webkit-linear-gradient(top, #b6a1d1 0%,#7b54ad 100%);background: -o-linear-gradient(top, #b6a1d1 0%,#7b54ad 100%);background: -ms-linear-gradient(top, #b6a1d1 0%,#7b54ad 100%);background: linear-gradient(to bottom, #b6a1d1 0%,#7b54ad 100%);} .button.secondary i{margin:-2px 0px 0px 3px; } .button.secondary:hover, .button.secondary.blue:hover{background: #9a7cc0;background: -moz-linear-gradient(top, #9a7cc0 0%, #bba7d4 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9a7cc0), color-stop(100%,#bba7d4));background: -webkit-linear-gradient(top, #9a7cc0 0%,#bba7d4 100%);background: -o-linear-gradient(top, #9a7cc0 0%,#bba7d4 100%);background: -ms-linear-gradient(top, #9a7cc0 0%,#bba7d4 100%);background: linear-gradient(to bottom, #9a7cc0 0%,#bba7d4 100%);} /*+ secondary blue ..........................................................................*/ .button.secondary.blue{background: #20b4e3;background: -moz-linear-gradient(top, #20b4e3 0%, #158ad4 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#20b4e3), color-stop(100%,#158ad4));background: -webkit-linear-gradient(top, #20b4e3 0%,#158ad4 100%);background: -o-linear-gradient(top, #20b4e3 0%,#158ad4 100%);background: -ms-linear-gradient(top, #20b4e3 0%,#158ad4 100%);background: linear-gradient(to bottom, #20b4e3 0%,#158ad4 100%); } /*+ action ..........................................................................*/ .button.action{border:1px solid #6d6d6d; background-color:#ffffff; padding:1px 7px; color:#6c6c6c ; font-size:10px; text-transform:uppercase; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; } .button.action i{margin:-2px 0px 0px 0px; } .button.action:hover{color:white; border:1px solid #b5b5b5; text-decoration:none; background-color:rgba(131, 128, 128, 0.68) !important; } .button.action:hover i{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity:1; } .button.action.blue{color:white; border:1px solid #6d6d6d; text-decoration:none; background: #20b4e3;background: -moz-linear-gradient(top, #20b4e3 0%, #158ad4 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#20b4e3), color-stop(100%,#158ad4));background: -webkit-linear-gradient(top, #20b4e3 0%,#158ad4 100%);background: -o-linear-gradient(top, #20b4e3 0%,#158ad4 100%);background: -ms-linear-gradient(top, #20b4e3 0%,#158ad4 100%);background: linear-gradient(to bottom, #20b4e3 0%,#158ad4 100%);} .button.action.blue i{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity:1;} .button.action.invert{background-color:#404040; border:1px solid #777777; color:#b8b8b8; } .button.action.invert:hover{border:1px solid #ffffff; color:#ffffff; } .button.action.approve{background-color:#e9ffd3; border:1px solid #3e8500; color:#3e8500; } .button.action.approve:hover{border:1px solid #53b300; color:#53b300; } .button.action.check{background-color:#e9ffd3; border:1px solid #3e8500; color:#3e8500; } .button.action.check:hover{border:1px solid #53b300; /*color:#53B300;*/color:white;background-color:rgba(57, 196, 14, 0.54) !important; } .button.action.alert{background-color:#ffecec; border:1px solid #9c3916; color:#9c3916; } .button.action.alert:hover{border:1px solid #cb3500; /*color:#cb3500;*/ color:white; background-color:rgba(243, 2, 2, 0.28) !important;} /*+ bigButton ..........................................................................*/ .button.bigButton{ border:1px solid #a9a9a9; margin-bottom:8px; padding:10px 15px; display:block; color:#a8a8a8; font-size:18px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-box-shadow:0px 2px 2px rgba(0,0,0,0.1); -webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.1); box-shadow:0px 2px 2px rgba(0,0,0,0.1); background: white; /*background: -moz-linear-gradient(top, #fdfdfd 0%, #fdfdfd 57%, #e5e5e5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(57%,#fdfdfd), color-stop(100%,#e5e5e5)); background: -webkit-linear-gradient(top, #fdfdfd 0%,#fdfdfd 57%,#e5e5e5 100%); background: -o-linear-gradient(top, #fdfdfd 0%,#fdfdfd 57%,#e5e5e5 100%); background: -ms-linear-gradient(top, #fdfdfd 0%,#fdfdfd 57%,#e5e5e5 100%); background: linear-gradient(to bottom, #fdfdfd 0%,#fdfdfd 57%,#e5e5e5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#e5e5e5',GradientType=0 );*/ } .button.bigButton i{float:right; margin-top:8px;} .button.bigButton.yellow{color:#f0b241; } .button.bigButton.yellow:hover{border:1px solid #f0b241; } .button.bigButton.yellow:hover i{background-position:-370px 0px;} .button.bigButton.blue{color:#1a9edb; } .button.bigButton.blue:hover{border:1px solid #1a9edb; } .button.bigButton.blue:hover i{background-position:-386px 0px;} .button.bigButton.red{color:#f96c2b; } .button.bigButton.red:hover{border:1px solid #f96c2b; } .button.bigButton.red:hover i{background-position:-362px 0px;} .button.bigButton.pink-2{color:#f76aae; } .button.bigButton.pink-2:hover{border:1px solid #f76aae; } .button.bigButton.pink-2:hover i{background-position:-354px 0px;} .button.bigButton.paars{color:#442875; } .button.bigButton.paars:hover{border:1px solid #442875; } .button.bigButton.paars:hover i{background-position:-354px 0px;} .button.bigButton.pink{color:#c848a2; } .button.bigButton.pink:hover{border:1px solid #c848a2; } .button.bigButton.pink:hover i{background-position:-354px 0px;} /*+ info ..........................................................................*/ .button.info{border:1px solid #0f6288; color:white; padding:3px 10px; text-transform:uppercase; font-size:10px; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; background: #20b4e3;background: -moz-linear-gradient(top, #20b4e3 0%, #158ad4 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#20b4e3), color-stop(100%,#158ad4));background: -webkit-linear-gradient(top, #20b4e3 0%,#158ad4 100%);background: -o-linear-gradient(top, #20b4e3 0%,#158ad4 100%);background: -ms-linear-gradient(top, #20b4e3 0%,#158ad4 100%);background: linear-gradient(to bottom, #20b4e3 0%,#158ad4 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20b4e3', endColorstr='#158ad4',GradientType=0 );} /*+ order ..........................................................................*/ .button.order{border:1px solid #a59f65; color:#3c051d; font-size:20px; padding:5px 15px; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -moz-box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.6) ,0px 2px 3px rgba(0,0,0,0.2); -webkit-box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.6) ,0px 2px 3px rgba(0,0,0,0.2); box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.6) ,0px 2px 3px rgba(0,0,0,0.2); background: rgb(246,237,0);background: -moz-linear-gradient(top, rgba(246,237,0,1) 0%, rgba(225,198,0,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,237,0,1)), color-stop(100%,rgba(225,198,0,1)));background: -webkit-linear-gradient(top, rgba(246,237,0,1) 0%,rgba(225,198,0,1) 100%);background: -o-linear-gradient(top, rgba(246,237,0,1) 0%,rgba(225,198,0,1) 100%);background: -ms-linear-gradient(top, rgba(246,237,0,1) 0%,rgba(225,198,0,1) 100%);background: linear-gradient(to bottom, rgba(246,237,0,1) 0%,rgba(225,198,0,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6ed00', endColorstr='#e1c600',GradientType=0 );} .button.order i{position:relative; top:-2px; } .button.order.big{font-size:30px; font-weight:bold;margin-left: 210px;margin-top:-40px;position: absolute;} .button.order.orange{z-index:0;color:white; font-size:15px; font-weight: bold; text-align:center; text-shadow:1px 1px 0 rgba(0,0,0,0.5); background: rgb(246,155,24);background: -moz-linear-gradient(top, rgba(246,155,24,1) 0%, rgba(243,126,17,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,155,24,1)), color-stop(100%,rgba(243,126,17,1)));background: -webkit-linear-gradient(top, rgba(246,155,24,1) 0%,rgba(243,126,17,1) 100%);background: -o-linear-gradient(top, rgba(246,155,24,1) 0%,rgba(243,126,17,1) 100%);background: -ms-linear-gradient(top, rgba(246,155,24,1) 0%,rgba(243,126,17,1) 100%);background: linear-gradient(to bottom, rgba(246,155,24,1) 0%,rgba(243,126,17,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f69b18', endColorstr='#f37e11',GradientType=0 );} /*+ cart ..........................................................................*/ .button.cart{display:block; text-align:center; border:1px solid #0f6288; color:white; padding:8px 5px; text-transform:uppercase; font-size:11px; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; background: #20b4e3;background: -moz-linear-gradient(top, #20b4e3 0%, #158ad4 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#20b4e3), color-stop(100%,#158ad4));background: -webkit-linear-gradient(top, #20b4e3 0%,#158ad4 100%);background: -o-linear-gradient(top, #20b4e3 0%,#158ad4 100%);background: -ms-linear-gradient(top, #20b4e3 0%,#158ad4 100%);background: linear-gradient(to bottom, #20b4e3 0%,#158ad4 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20b4e3', endColorstr='#158ad4',GradientType=0 );} /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// smallTab ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .smallTab{margin:0px 0px -11px 0px; } .smallTab:after{visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;} .smallTab li{float:left; margin:0px -1px 0px 0px; } .smallTab li a{text-decoration:underline; color:#979797; border:1px solid #c9c9c9; padding:4px 10px; display:inline-block; } .smallTab li.active{} .smallTab li.active a{background-color:#f5f5f5; text-decoration:none; color:#4f4f4f; } /* @@@@@@@@@@@@@@@@@@@@@@ CONTENTMODEL @@@@@@@@@@@@@@@@@@@@@@ about used to model content like articles, events, ... syntax */ /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// contentModel ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ setup ..........................................................................*/ .contentModel{} .contentModel:after{visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;} /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// members ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ general ..........................................................................*/ .contentModel .description{} .contentModel .image{} .contentModel .name{} .contentModel .url{} /*+ article ..........................................................................*/ /*header*/ .contentModel .headline{} .contentModel .title{} /*author*/ .contentModel .author{} .contentModel .creator{} .contentModel .editor{} .contentModel .publisher{} .contentModel .copyright{} /*aside*/ .contentModel .date{} .contentModel .version{} .contentModel .genre{} .contentModel .location{} .contentModel .keywords{} .contentModel .edition{} /*body*/ .contentModel .about{} .contentModel .text{} .contentModel .video{} .contentModel .comment{} .contentModel .commentText{} .contentModel .page{} .contentModel .print{} /*+ event ..........................................................................*/ .contentModel .duration{} .contentModel .endDate{} .contentModel .performer{} .contentModel .startDate{} .contentModel .endDate{} .contentModel .map{} /*+ organisation ..........................................................................*/ .contentModel .address{} .contentModel .email{} .contentModel .event{} .contentModel .member{} .contentModel .brand{} .contentModel .review{} .contentModel .model{} .contentModel .offer{} /* @@@@@@@@@@@@@@@@@@@@@@ TABLE @@@@@@@@@@@@@@@@@@@@@@ about table objects syntax */ /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// bigTable ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .bigTable{width:100%; font-size:12px; position:relative; margin:0px 0px 0px -1px; border:1px solid #c9c9c9; border-right:0px; border-left:0px; } .bigTable th{text-align:left; padding:3px; font-weight:normal; background-color:#f5f5f5; border-left:1px solid #c9c9c9; border-bottom:1px solid #c9c9c9; } .bigTable td{ vertical-align:middle; padding:3px; border-left:1px solid #c9c9c9; border-bottom:1px solid #c9c9c9;} .bigTable td img{ vertical-align:middle; width:100%;} .bigTable .switchContent{text-align:center; } .bigTable .cApprove{background-color:#dcf5c5; color:#3f8406; -moz-box-shadow:inset 0px 0px 1px rgba(255,255,255,1); -webkit-box-shadow:inset 0px 0px 1px rgba(255,255,255,1); box-shadow:inset 0px 0px 1px rgba(255,255,255,1); } .bigTable .cCaution{background-color:#fff3a7; color:#88570b; -moz-box-shadow:inset 0px 0px 1px rgba(255,255,255,1); -webkit-box-shadow:inset 0px 0px 1px rgba(255,255,255,1); box-shadow:inset 0px 0px 1px rgba(255,255,255,1);} .bigTable .cAlert{background-color:#ffcecb; color:#942c10; -moz-box-shadow:inset 0px 0px 1px rgba(255,255,255,1); -webkit-box-shadow:inset 0px 0px 1px rgba(255,255,255,1); box-shadow:inset 0px 0px 1px rgba(255,255,255,1);} .bigTable tfoot td{background-color:#f5f5f5; font-size:12px;} .bigTable.base{font-size:11px;} .bigTable.base .greater{font-size:11px;} .bigTable .lineTable{border:0px; border-top:1px solid #c9c9c9;} .bigTable .lineTable td{border-left:0px;} .bigTable.valign td{ vertical-align:top;} .bigTable{font-size:12px;} .bigTable td img{ width:auto;} .bigTable .lineTable td{border-left:0px; white-space:nowrap;} .bigTable .conWrap{min-height:110px; width:100%; height:100%} .bigTable .conWrap .switch{position:absolute; bottom:5px; left:0px; right:0px; display:block; } .bigTable .conWrap .minimal{position:absolute; bottom:0px; right:0px; } .bigTable .conWrap img.floatLeft{margin-right:15px;} .bigTable .conWrap img.floatLeft + strong{display:block; margin:10px 0px 0px 0px; } .bigTable th{padding:12px 10px;} .bigTable td{ padding:12px 10px;} .bigTable .switchContent{text-align:left; } .bigTable .switchContent strong{position:relative; top:10px; } .bigTable .switchContent .switch{float:right; } .bigTable .button2{} .bigTable.base{font-size:12px;} .bigTable.base th{font-size:14px;} .bigTable.base .greater{font-size:14px;} .bigTable.base .greater{font-size:16px;} /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// formTable ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .formTable{width:100%; margin:0px -10px; font-size:12px;} .formTable td, .formTable .lineTable th{padding:5px 10px; } .formTable td input{width:95%;} .formTable td select{width:95%;} .formTable{font-size:inherit;} .formTable input,.formTable select, .formTable .link{margin-left:10px;} .formTable .leftBit{width:35%; float:left; padding:3px 0px 0px 0px; } .formTable .rightBit{width:65%; float:right; } .formTable .pushCell{white-space:nowrap;} .formTable .leftBit{width:40%; } .formTable .rightBit{width:60%; } /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// standard set ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ tableProduct ..........................................................................*/ .tableProduct{width:100%; margin:0px 0px 0px 0px;} .tableProduct th{text-align:left; font-weight:normal; padding:5px;} .tableProduct th.top{text-align:right;width:180px; padding:5px; border-bottom:1px solid #909090; border-top:1px solid #909090; border-left:1px solid #909090; border-right:1px solid #909090; /*border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;*/} .tableProduct th .productType{font-size:24px; display:block; margin:0px 0px 3px 0px; } .tableProduct th .price{font-weight:bold; font-size:16px; line-height:1; } .tableProduct th .contract{font-size:12px; line-height:1;} .tableProduct th .about{font-weight:bold; font-size:12px; } .tableProduct th.first{background-color:#f62d9d; color:white; } .tableProduct th.second{background-color:#f23146; color:white; } .tableProduct th.third{background-color:#d97a4c; color:white; } .tableProduct th.fourth{background-color:#a95d83; color:white; } .tableProduct th.fifth{background-color:#626296; color:white; } .tableProduct tr.mark td, .tableProduct tr.mark th{background-color:#f1f1f1; } .tableProduct td{padding:5px; background-color:#f6f7f7; color:#727272; text-align:center; font-size:12px; border-left:1px solid #909090; border-right:1px solid #909090;} .tableProduct tr.mark td{background-color:#ececec; } .tableProduct tr:last-child td{border-bottom:1px solid #909090; } .tableProduct tr.last td{border:0; background-color:#fcfcfc; border-top:1px solid #909090; } /*+ tableProduct ..........................................................................*/ .tableStandard{font-size:12px; width:100%; margin:0px 0px 0px 0px; } .tableStandard th{text-align:left; color:#4f4f4f; font-weight:normal; background-color:#f5f5f5; padding:5px; border:1px solid #c9c9c9; } .tableStandard th.alignCenter{text-align:center; } .tableStandard td{padding:5px; color:#4f4f4f; border:1px solid #c9c9c9; } .tableStandard tfoot td{background-color:#f5f5f5; } .tableStandard .button.action{width:80px;} .tableStandard .button.action i{float:right; position:relative; top:3px; margin:0px 0px 0px 0px; } /*small*/ .tableStandard.small{} .tableStandard.small td{font-size:14px;} .tableStandard.small tfoot td{font-size:15px; } .tableStandard.small tfoot td.noBackground{background:none; } .tableStandard.small tfoot td small{margin:3px 0px 0px 0px; } .tableStandard.small .icoRemove{position:relative; top:6px; float:left;} .tableStandard.small .icoTrash{position:relative; top:2px; } .tableStandard.small .button.cart{margin:0px -5px; } /*+ tableProductOverzicht ..........................................................................*/ .tableProductOverzicht{width:100%; border-collapse:separate; border-spacing:2px; text-align:center;} .tableProductOverzicht th {font-size:12px;} .tableProductOverzicht th.col{text-align:center; padding:10px 10px; color:white; font-weight:normal; } .tableProductOverzicht th.col { background: #75D1EE; /* Old browsers */ background: -moz-linear-gradient(top, #75D1EE 0%, #0fb4e7 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#75D1EE), color-stop(100%,#0fb4e7)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #75D1EE 0%,#0fb4e7 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #75D1EE 0%,#0fb4e7 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #75D1EE 0%,#0fb4e7 100%); /* IE10+ */ background: linear-gradient(to bottom, #75D1EE 0%,#0fb4e7 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#75D1EE', endColorstr='#0fb4e7',GradientType=0 ); /* IE6-9 */ } .tableProductOverzicht th.col + th{ background: #fb83fa; /* Old browsers */ background: -moz-linear-gradient(top, #fb83fa 0%, #e93cec 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fb83fa), color-stop(100%,#e93cec)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #fb83fa 0%,#e93cec 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #fb83fa 0%,#e93cec 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #fb83fa 0%,#e93cec 100%); /* IE10+ */ background: linear-gradient(to bottom, #fb83fa 0%,#e93cec 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb83fa', endColorstr='#e93cec',GradientType=0 ); /* IE6-9 */ } .tableProductOverzicht th.col + th + th{ background: #febbbb; /* Old browsers */ background: -moz-linear-gradient(top, #febbbb 0%, #fe9090 60%, #ff5c5c 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#febbbb), color-stop(60%,#fe9090), color-stop(100%,#ff5c5c)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #febbbb 0%,#fe9090 60%,#ff5c5c 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #febbbb 0%,#fe9090 60%,#ff5c5c 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #febbbb 0%,#fe9090 60%,#ff5c5c 100%); /* IE10+ */ background: linear-gradient(to bottom, #febbbb 0%,#fe9090 60%,#ff5c5c 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febbbb', endColorstr='#ff5c5c',GradientType=0 ); /* IE6-9 */ } .tableProductOverzicht th.col + th + th + th{ background: #ff5db1; /* Old browsers */ background: -moz-linear-gradient(top, #ff5db1 70%, #ef017c 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(70%,#ff5db1), color-stop(100%,#ef017c)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ff5db1 70%,#ef017c 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ff5db1 70%,#ef017c 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ff5db1 70%,#ef017c 100%); /* IE10+ */ background: linear-gradient(to bottom, #ff5db1 70%,#ef017c 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5db1', endColorstr='#ef017c',GradientType=0 ); /* IE6-9 */ } .tableProductOverzicht th.col + th + th + th + th{ background: #c3d9ff; /* Old browsers */ background: -moz-linear-gradient(top, #c3d9ff 0%, #b1c8ef 41%, #98b0d9 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c3d9ff), color-stop(41%,#b1c8ef), color-stop(100%,#98b0d9)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #c3d9ff 0%,#b1c8ef 41%,#98b0d9 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #c3d9ff 0%,#b1c8ef 41%,#98b0d9 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #c3d9ff 0%,#b1c8ef 41%,#98b0d9 100%); /* IE10+ */ background: linear-gradient(to bottom, #c3d9ff 0%,#b1c8ef 41%,#98b0d9 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3d9ff', endColorstr='#98b0d9',GradientType=0 ); /* IE6-9 */ } .tableProductOverzicht th strong{display:block; } .tableProductOverzicht th.row{text-align:left; padding:10px 10px; width:130px; /*border-bottom:1px solid #c3c3c3;*/ background-color: rgba(247, 243, 243, 0.86);} .tableProductOverzicht tr:last-child th.row{border-bottom:0px;} .tableProductOverzicht th.row i{margin:5px 5px 0px 0px; } .tableProductOverzicht td{font-size:12px;text-align:center; background-color:#f1f1f3; padding:5px 5px; /*border:1px solid #c3c3c3; */} .tableProductOverzicht td:nth-child(odd){background-color:rgba(248,247,247,0.8);} /*+ tableProductOverzichtMagento ..........................................................................*/ .tableProductOverzichtMagento{width:100%; } .tableProductOverzichtMagento th.col{text-align:center; padding:10px 10px; color:white; font-weight:normal; } .tableProductOverzichtMagento th.col + th{background-color:#ef2c9a; border:1px solid #ef2c9a; } .tableProductOverzichtMagento th.col + th + th{background-color:#e22323; border:1px solid #e22323; } .tableProductOverzichtMagento th.col + th + th + th{background-color:#d17643; border:1px solid #d17643; } .tableProductOverzichtMagento th.col + th + th + th + th{background-color:#a1587d; border:1px solid #a1587d; } .tableProductOverzichtMagento th.col + th + th + th + th + th{background-color:#565789; border:1px solid #565789; } .tableProductOverzichtMagento th strong{display:block; } .tableProductOverzichtMagento th.row{text-align:left; padding:10px 0px; width:130px; border-bottom:1px solid #c3c3c3;} .tableProductOverzichtMagento tr:last-child th.row{border-bottom:0px;} .tableProductOverzichtMagento th.row i{margin:5px 5px 0px 0px; } .tableProductOverzichtMagento td{text-align:center; background-color:#f1f1f3; padding:5px 0px; border:1px solid #c3c3c3; } .tableProductOverzichtMagento td:nth-child(odd){background-color:#ffffff;} .tableProductOverzichtMagento.fixed{background: rgb(255,255,255);background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(237,237,237,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(237,237,237,1)));background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );} .tableProductOverzichtMagento.fixed th.col{text-align:left; padding:10px 10px; color:white; font-weight:normal; } .tableProductOverzichtMagento.fixed th.small{border:1px solid #720c20; background: rgb(224,37,82);background: -moz-linear-gradient(top, rgba(224,37,82,1) 0%, rgba(199,21,46,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(224,37,82,1)), color-stop(100%,rgba(199,21,46,1)));background: -webkit-linear-gradient(top, rgba(224,37,82,1) 0%,rgba(199,21,46,1) 100%);background: -o-linear-gradient(top, rgba(224,37,82,1) 0%,rgba(199,21,46,1) 100%);background: -ms-linear-gradient(top, rgba(224,37,82,1) 0%,rgba(199,21,46,1) 100%);background: linear-gradient(to bottom, rgba(224,37,82,1) 0%,rgba(199,21,46,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e02552', endColorstr='#c7152e',GradientType=0 );} .tableProductOverzichtMagento.fixed th.medium{border:1px solid #1b650a; background: rgb(58,188,23);background: -moz-linear-gradient(top, rgba(58,188,23,1) 0%, rgba(28,118,11,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(58,188,23,1)), color-stop(100%,rgba(28,118,11,1)));background: -webkit-linear-gradient(top, rgba(58,188,23,1) 0%,rgba(28,118,11,1) 100%);background: -o-linear-gradient(top, rgba(58,188,23,1) 0%,rgba(28,118,11,1) 100%);background: -ms-linear-gradient(top, rgba(58,188,23,1) 0%,rgba(28,118,11,1) 100%);background: linear-gradient(to bottom, rgba(58,188,23,1) 0%,rgba(28,118,11,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3abc17', endColorstr='#1c760b',GradientType=0 );} .tableProductOverzichtMagento.fixed th.large{border:1px solid #39106a; background: rgb(128,36,195);background: -moz-linear-gradient(top, rgba(128,36,195,1) 0%, rgba(89,25,168,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(128,36,195,1)), color-stop(100%,rgba(89,25,168,1)));background: -webkit-linear-gradient(top, rgba(128,36,195,1) 0%,rgba(89,25,168,1) 100%);background: -o-linear-gradient(top, rgba(128,36,195,1) 0%,rgba(89,25,168,1) 100%);background: -ms-linear-gradient(top, rgba(128,36,195,1) 0%,rgba(89,25,168,1) 100%);background: linear-gradient(to bottom, rgba(128,36,195,1) 0%,rgba(89,25,168,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8024c3', endColorstr='#5919a8',GradientType=0 );} .tableProductOverzichtMagento.fixed th.darkorange{border:1px solid #af7c24; background: #f4c32e; /* Old browsers */ background: -moz-linear-gradient(top, #f4c32e 0%, #ed9017 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4c32e), color-stop(100%,#ed9017)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f4c32e 0%,#ed9017 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f4c32e 0%,#ed9017 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f4c32e 0%,#ed9017 100%); /* IE10+ */ background: linear-gradient(to bottom, #f4c32e 0%,#ed9017 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4c32e', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */} .tableProductOverzichtMagento.fixed th strong{font-size:30px; margin:0px 0px 5px 0px; border-bottom:1px solid rgba(255,255,255,0.5); font-weight:normal; text-align:center; } .tableProductOverzichtMagento.fixed th i{float:right; text-decoration:line-through; position:relative; top:7px; font-size:14px; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity:0.5;} .tableProductOverzichtMagento.fixed th p{font-size:20px;} .tableProductOverzichtMagento.fixed th small{font-size:10px;} .tableProductOverzichtMagento.fixed td{font-size:12px; color:#696969; padding:9px 0px; background:none; } .tableProductOverzichtMagento.fixed .button.info{font-size:15px;} .tableProductOverzichtMagento.fixed tr:last-child td{padding:15px 0px;} /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// lineTable ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .lineTable{width:100%; border-top:1px solid #c9c9c9; margin:10px 0px 20px 0px; } .lineTable td, .lineTable th{border-bottom:1px solid #c9c9c9; padding:3px 5px; } .lineTable th{background-color:#f5f5f5; border-right:1px solid #c9c9c9; text-align:left; font-weight:normal; white-space:nowrap; width:35%; } .lineTable.closed{border:1px solid #c9c9c9;} .lineTable .floatRight.lesser{position:relative; top:2px; } /* @@@@@@@@@@@@@@@@@@@@@@ TOOLS @@@@@@@@@@@@@@@@@@@@@@ about Small bits of code used in a webpage syntax */ /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// tools ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ hr ..........................................................................*/ .hr{border-top:1px solid #e4e4e4; margin:20px 0px; } .hr2{border-top:1px solid #c9c9c9; margin:10px 0px 15px 0px;} .hr2.evenSpacing{border-top:1px solid #c9c9c9; margin:20px 0px 20px 0px;} /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// UI ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ uiSlider ..........................................................................*/ .uiSlider{background-color:#f5f5f5; border:1px solid #c9c9c9; padding:1px 1px; margin:20px 0px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; } .uiSlider div{position:relative; height:8px; background-color:#313131; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;} .uiSlider div a{text-indent:-4000px; width:21px; height:21px; background-color:#f6f7fa; border:1px solid #9a9a9a; overflow:hidden; display:block; position:absolute; top:-8px; right:-5px; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; -moz-box-shadow:1px 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.6); box-shadow:1px 1px 3px rgba(0,0,0,0.6);} /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// links ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ link objects ..........................................................................*/ .link{text-decoration:underline; } /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// no X ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .noBorder{border:0px !important;} .noBorderTop{border-top:0px !important;} .noBorderRight{border-right:0px !important;} .noBorderBottom{border-bottom:0px !important;} .noBorderLeft{border-left:0px !important;} .noPadding{padding:0px !important;} .noPaddingTop{padding-top:0px !important;} .noPaddingRight{padding-right:0px !important;} .noPaddingBottom{padding-bottom:0px !important;} .noPaddingLeft{padding-left:0px !important;} .noMargin{margin:0px !important;} .noMarginTop{margin-top:0px !important;} .noMarginRight{margin-right:0px !important;} .noMarginBottom{margin-bottom:0px !important;} .noMarginLeft{margin-left:0px !important;} .noBackground{background:none !important; } .noFloat{clear:both !important;} .noShow{display:none !important; } .noWrap{white-space:nowrap !important;} .noWidth{width:auto!important;} /* @@@@@@@@@@@@@@@@@@@@@@ blog @@@@@@@@@@@@@@@@@@@@@@ */ /*+ listDivider ..........................................................................*/ article .listDivider{} article .listDivider li{color:#a7a7a7; font-size:12px; } article .listDivider li a{text-transform:none;font-size:12px;} article .listDivider li a:hover{color:black; } /*+ articleInfo ..........................................................................*/ .articleInfo{clear:both;position:relative; margin:0px 0px 20px 0px; background-color:#f0f0f0; padding:7px 10px; color:#a7a7a7; text-transform:uppercase; font-size:10px; -moz-box-shadow:0px 0px 3px rgba(0,0,0,0.2); -webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.2); box-shadow:0px 0px 3px rgba(0,0,0,0.2);} .articleInfo{background: rgb(249,249,249);background: -moz-linear-gradient(top, rgba(249,249,249,1) 0%, rgba(239,239,239,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,249,249,1)), color-stop(100%,rgba(239,239,239,1)));background: -webkit-linear-gradient(top, rgba(249,249,249,1) 0%,rgba(239,239,239,1) 100%);background: -o-linear-gradient(top, rgba(249,249,249,1) 0%,rgba(239,239,239,1) 100%);background: -ms-linear-gradient(top, rgba(249,249,249,1) 0%,rgba(239,239,239,1) 100%);background: linear-gradient(to bottom, rgba(249,249,249,1) 0%,rgba(239,239,239,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#efefef',GradientType=0 );} .articleInfo a{color:black; text-decoration:underline; } .articleInfo .listDivider li{float:right; } .articleInfo .listDivider li a{color:black; } .articleInfo .listDivider {margin-top: -20px;} .articleInfo:after{content:""; z-index:-1; height:10px; position:absolute; bottom:0px; left:5px; right:5px; -moz-box-shadow:0px 0px 5px rgba(0,0,0,0.5); -webkit-box-shadow:0px 0px 5px rgba(0,0,0,0.5); box-shadow:0px 0px 5px rgba(0,0,0,0.5); border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; } /*+ article img float ..........................................................................*/ /* article img{padding:5px; border:1px solid #d9d9d9; -moz-box-shadow:0px 0px 10px rgba(0,0,0,0.1); -webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.1); box-shadow:0px 0px 10px rgba(0,0,0,0.1);} */ article img.floatLeft{margin-right:10px; margin-bottom:5px;} article img.floatRight{margin-left:10px; margin-bottom:5px;} /*+ listLine ..........................................................................*/ .listLine{} .listLine li{font-size:13px; border-bottom:1px solid #d9d9d9; padding:5px 0px; margin-top:-1px;} /*+ headingBorder ..........................................................................*/ .headingBorder{border-bottom:1px solid #d9d9d9; padding:0px 0px 5px 0px; } /*+ variations ..........................................................................*/ .grand{font-size:28px;} .heavy{font-size:20px;} .greatest{font-size:18px;} .greater{font-size:16px;} .base{font-size:14px;} .lesser{font-size:12px;} .light{font-size:11px;} .minimal{font-size:10px;} /* dialog*/ .dialog_steps {width:100%; background-color:#EBEBEB; padding-top:4px; padding-bottom:4px; margin-bottom:10px; font-size:14px;} .dialog_steps span {padding-left:10px;padding-right:10px; } .dialog_steps span.active {font-weight:bold;} #backButton { float: left; text-decoration: underline; line-height: 2.5em; } #backButton:hover { text-decoration: none; } .epp { width: 60% !important; margin-left: 10px !important; font-size:12px !important; } .issuerID { width:79.5%; } .ctaBlogBlock,.ctaBlogBlock:hover { bottom: 0px; right: 0px; position: absolute; border-top: 1px solid #999; border-left: 1px solid #999; padding-left: 5px; padding-right: 5px; padding: 3px; -webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; border-top-left-radius: 5px; font-size:12px; text-decoration:none; } .ctaBlogBlockLeft,.ctaBlogBlockLeft:hover { bottom: 0px; left: 0px; position: absolute; border-top: 1px solid #999; border-right: 1px solid #999; padding-left: 5px; padding-right: 5px; padding: 3px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topright: 5px; border-top-right-radius: 5px; font-size:12px; text-decoration:none; } /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// commList ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ setup ..........................................................................*/ .commList{font-size:11px; margin:0px 0px -10px 0px; } .commList li{padding-bottom:10px;} /*/////////////////////////////////////////////////////////////////////////////////////////////////////////// darkBax ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*+ setup ..........................................................................*/ .darkBox{background-color:#6c6c6c; margin:0px 0px 5px 0px; padding:5px 10px; border:1px solid #5d5d5d; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow:inset 0px 5px 10px rgba(255,225,255,0.4), inset 0px 1px 0px rgba(255,225,255,0.5), 0px 1px 3px rgba(0,0,0,0.4); -webkit-box-shadow:inset 0px 5px 10px rgba(255,225,255,0.4), inset 0px 1px 0px rgba(255,225,255,0.5), 0px 1px 3px rgba(0,0,0,0.4); box-shadow:inset 0px 5px 10px rgba(255,225,255,0.4), inset 0px 1px 0px rgba(255,225,255,0.5), 0px 1px 3px rgba(0,0,0,0.4);} .darkBox .ico.star{position:relative; top:-1px; } /*star rating*/ .ico.star{display:inline-block; width:105px; height:17px; background: url(/template/qweb/images/icoStarOff.png) repeat top left; text-indent:0px; } .ico.star span{display:block; height:17px; background: url(/template/qweb/images/icoStarOn.png) repeat top left;} .ico.star.score1 span{width:21px; } .ico.star.score2 span{width:42px; } .ico.star.score3 span{width:63px; } .ico.star.score4 span{width:84px; } .ico.star.score5 span{width:105px; } /*star rating for review page added by Muhammed*/ .rating { float:left; } /* :not(:checked) is a filter, so that browsers that don’t support :checked don’t follow these rules. Every browser that supports :checked also supports :not(), so it doesn’t make the test unnecessarily selective */ .rating:not(:checked) > input { position:absolute; top:-9999px; clip:rect(0,0,0,0); text-indent:-9999px; } .rating:not(:checked) > label { text-indent:-9999px; float:right; width:0.5em; padding:0 .1em; overflow:hidden; white-space:nowrap; cursor:pointer; height:17px; width: 21px; background: url(/template/qweb/images/icoStarOff.png) repeat top left; } /* .rating:not(:checked) > label:before { background: url(/template/qweb/images/icoStarOn.png) no-repeat; }*/ .rating > input:checked ~ label { background: url(/template/qweb/images/icoStarOn.png) no-repeat; } .rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label { background: url(/template/qweb/images/icoStarOn.png) no-repeat; } .rating > input:checked + label:hover, .rating > input:checked + label:hover ~ label, .rating > input:checked ~ label:hover, .rating > input:checked ~ label:hover ~ label, .rating > label:hover ~ input:checked ~ label { background: url(/template/qweb/images/icoStarOn.png) no-repeat; } .rating > label:active { position:relative; top:2px; left:2px; } /**/ .socialBlock{padding-top:5px;text-transform:none;} .sslBadge{position: absolute; right: 40px; top: 230px; } .gs-result .gs-title, .gs-result .gs-title * { text-decoration: none !important; } .gs-result .gs-title:hover, .gs-result .gs-title *:hover { text-decoration: underline !important; } .gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType { margin-left: 10px; } .gs-webResult div.gs-visibleUrl, .gs-imageResult div.gs-visibleUrl { margin-left: 1px; } .comment_blog p{ margin-left:20px; } .comment_blog div{ margin-left:20px; } .miniBasket{ margin-top: 37px; } .menuHomeButton, .menuHomeButton a { width:40px !important; padding: 0px !important; } .yellowStrip{ font-weight: bold; padding: 4px 0px; color: #3b362d; background: #fce300; /* Old browsers */ background: -moz-linear-gradient(top, #fce300 0%, #f1da36 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fce300), color-stop(100%,#f1da36)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #fce300 0%,#f1da36 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #fce300 0%,#f1da36 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #fce300 0%,#f1da36 100%); /* IE10+ */ background: linear-gradient(to bottom, #fce300 0%,#f1da36 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fce300', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */ }