/* Main Navigation Styles */ .nav, .nav a, .nav ul, .nav li, .nav div, .nav form, .nav input { margin: 0; padding: 0 2px 0 0; border: none; outline: none; font-family:"Ubuntu Condensed", Ubuntu, "PT Sans", "Open Sans Condensed";} .nav a { text-decoration: none; } .nav li { list-style: none; } /* Menu Container */ .nav { display: inline-block; position: relative; cursor: default; z-index: 100; } /* Menu List */ .nav > li { float: left; } /* Menu Links */ .nav > li > a { position: relative; display: block; height: 1px; padding: 16px 9px ; margin: 0 12px 0 12px; line-height:0px; font-weight: normal; font-size: 18px; color: #cccccc; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; letter-spacing:0px; text-transform:none;} .nav > li:hover > a { padding:16px 9px; margin: 0 10px 0 10px; color:#ccc;} .nav > li:hover > a, .nav > li.current > a { background:#ff7f00; border-radius:5px; padding:16px 9px; color:#000; margin: 0 12px 0 12px;} .nav > li:first-child > a { margin: 0 10px 0 10px;} .nav > li span{ background:url(../images/slash1.png) center bottom no-repeat; padding:15px 1px ; } /* Search Form */ .nav > li.nav-search > form { position: relative; width: inherit; height: 54px; z-index: 510; border-left: 1px solid #4b4441; } .nav > li.nav-search input[type="text"] { display: block; float: left; width: 1px; height: 24px; padding: 15px 0; line-height: 24px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; color: #999999; text-shadow: 0 0 1px rgba(0, 0, 0, .35); background: #372f2b; -webkit-transition: all .3s ease 1s; -moz-transition: all .3s ease 1s; -o-transition: all .3s ease 1s; -ms-transition: all .3s ease 1s; transition: all .3s ease 1s; } .nav > li.nav-search input[type="text"]:focus { color: #fcfcfc; } .nav > li.nav-search input[type="text"]:focus, .nav > li.nav-search:hover input[type="text"] { width: 110px; padding: 15px 10px; -webkit-transition: all .3s ease .1s; -moz-transition: all .3s ease .1s; -o-transition: all .3s ease .1s; -ms-transition: all .3s ease .1s; transition: all .3s ease .1s; } .nav > li.nav-search input[type="submit"] { display: block; float: left; width: 20px; height: 54px; padding: 0 25px; cursor: pointer; background: #372f2b url(../img/search-icon.png) no-repeat center center; border-radius: 0 3px 3px 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; } .nav > li.nav-search input[type="submit"]:hover { background-color: #4b4441; } /* Menu Dropdown */ .nav > li > div { position: absolute; display: block; width:auto; top: 34px; left:auto; opacity: 0; visibility: hidden; overflow: hidden; background: #013db2; border-radius: 0 0 5px 5px; -webkit-transition: all .5s ease 0s; -moz-transition: all .5s ease 0s; -o-transition: all .5s ease 0s; -ms-transition: all .5s ease 0s; transition: all .5s ease 0s; height: 0px; box-shadow:#fb7f00 0px 5px 0px; } .nav > li:hover > div { opacity: 1; visibility: visible; overflow: visible; height: auto; transition: all .5s ease 0s; } .nav > li:hover > div h2{ font-size:30px; color:#aaa; border-bottom:1px solid #333; padding:10px 0; margin:10px 20px 0; letter-spacing:0.5px;} .nav > li > div.buildmtrl{ width:300px; } .nav > li > div.racking{ width:250px; margin:0 0 0 11px;} .nav > li > div.srvcs{ width:250px; margin:0 0 0 11px;} .nav > li > div.company{width:480px;} /* Menu Content Styles */ .nav .nav-column { float: left; width:200px; padding:0 20px 20px; } .nav .nav-column h3 { margin: 10px 0 10px 0; line-height: 18px; font-weight: normal; font-size: 18px; color: #aaa; } .nav .nav-column li{ margin-bottom:0; padding-top:0; border-top:1px solid #ddd;} .nav .nav-column li a { display:block; font-weight: normal; font-size: 14px; color: #fff; padding:5px 10px; font-family:"PT Sans", Calibri, Arial, "Open Sans Condensed";} .nav .nav-column li a:hover { color: #fff; background-color:#ff7f00;} .nav > li > div.srvcs .nav-column{} /* Main Banner Styles Start */ /* The Nivo Slider styles */ /* The Nivo Slider styles */ .slider-wrapper{ position:relative;} .nivoSlider { position: relative; width: 1140px; height: 540px;} .nivoSlider img { position: absolute; top: 0px; left: 0px; max-width: none; } .nivo-main-image { display: block !important; position: relative !important; width: 100% !important; } /* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; z-index: 6; display: none; background: black; filter: alpha(opacity=0); opacity: 0; } /* The slices and boxes in the Slider */ .nivo-slice { display: block; position: absolute; z-index: 5; height: 100%; top: 0; } .nivo-box { display: block; position: absolute; z-index: 5; overflow: hidden; } .nivo-box img { display: block; } /* Caption styles */ .nivo-caption { position: absolute; left: 0px; bottom: 0px; background: #000; color: #fff; width: 100%; z-index: 8; padding: 5px 10px; opacity: 0.8; overflow: hidden; display: none; -moz-opacity: 0.8; filter: alpha(opacity=8); -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } .nivo-caption p { padding: 5px; margin: 0; } .nivo-caption a { display: inline !important; } .nivo-html-caption { display: none; } /* Direction nav styles (e.g. Next & Prev) */ .nivo-directionNav a { position: absolute; top: 45%; z-index: 9; cursor: pointer; } .nivo-prevNav { left: -80px; } .nivo-nextNav { right: 0px; } /* Control nav styles (e.g. 1,2,3...) */ .nivo-controlNav { text-align: center; padding: 15px 0; left:540px; bottom:66px; } .nivo-controlNav a { cursor: pointer; } .nivo-controlNav a.active { font-weight: bold; } /*====================*/ /*=== Other Styles ===*/ /*====================*/ .clear { clear:both; } /* Main Banner Styles End */ /*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */ .fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp { padding: 0; margin: 0; border: 0; outline: none; vertical-align: top; } .fancybox-wrap { position: absolute; top: 0; left: 0; z-index: 8020; } .fancybox-skin { position: relative; background: #f9f9f9; color: #444; text-shadow: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .fancybox-opened { z-index: 8030; } .fancybox-opened .fancybox-skin { -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); } .fancybox-outer, .fancybox-inner { position: relative; } .fancybox-inner { overflow: hidden; } .fancybox-type-iframe .fancybox-inner { -webkit-overflow-scrolling: touch; } .fancybox-error { color: #444; font: 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; padding: 15px; white-space: nowrap; } .fancybox-image, .fancybox-iframe { display: block; width: 100%; height: 100%; } .fancybox-image { max-width: 100%; max-height: 100%; } #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('../images/fbox/fancybox_sprite.png'); } #fancybox-loading { position: fixed; top: 50%; left: 50%; margin-top: -22px; margin-left: -22px; background-position: 0 -108px; opacity: 0.8; cursor: pointer; z-index: 8060; } #fancybox-loading div { width: 44px; height: 44px; background: url('../images/fbox/fancybox_loading.gif') center center no-repeat; } .fancybox-close { position: absolute; top: -18px; right: -18px; width: 36px; height: 36px; cursor: pointer; z-index: 8040; } .fancybox-nav { position: absolute; top: 0; width: 40%; height: 100%; cursor: pointer; text-decoration: none; background: transparent url('../images/fbox/blank.gif'); /* helps IE */ -webkit-tap-highlight-color: rgba(0,0,0,0); z-index: 8040; } .fancybox-prev { left: 0; } .fancybox-next { right: 0; } .fancybox-nav span { position: absolute; top: 50%; width: 36px; height: 34px; margin-top: -18px; cursor: pointer; z-index: 8040; visibility: hidden; } .fancybox-prev span { left: 10px; background-position: 0 -36px; } .fancybox-next span { right: 10px; background-position: 0 -72px; } .fancybox-nav:hover span { visibility: visible; } .fancybox-tmp { position: absolute; top: -99999px; left: -99999px; visibility: hidden; max-width: 99999px; max-height: 99999px; overflow: visible !important; } /* Overlay helper */ .fancybox-lock { overflow: hidden !important; width: auto; } .fancybox-lock body { overflow: hidden !important; } .fancybox-lock-test { overflow-y: hidden !important; } .fancybox-overlay { position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 8010; background: url('../images/fbox/fancybox_overlay.png'); } .fancybox-overlay-fixed { position: fixed; bottom: 0; right: 0; } .fancybox-lock .fancybox-overlay { overflow: auto; overflow-y: scroll; } /* Title helper */ .fancybox-title { visibility: hidden; font: normal 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; position: relative; text-shadow: none; z-index: 8050; } .fancybox-opened .fancybox-title { visibility: visible; } .fancybox-title-float-wrap { position: absolute; bottom: 0; right: 50%; margin-bottom: -35px; z-index: 8050; text-align: center; } .fancybox-title-float-wrap .child { display: inline-block; margin-right: -100%; padding: 2px 20px; background: transparent; /* Fallback for web browsers that doesn't support RGBa */ background: rgba(0, 0, 0, 0.8); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; text-shadow: 0 1px 2px #222; color: #FFF; font-weight: bold; line-height: 24px; white-space: nowrap; } .fancybox-title-outside-wrap { position: relative; margin-top: 10px; color: #fff; } .fancybox-title-inside-wrap { padding-top: 10px; } .fancybox-title-over-wrap { position: absolute; bottom: 0; left: 0; color: #fff; padding: 10px; background: #000; background: rgba(0, 0, 0, .8); } /*Retina graphics!*/ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('../images/fbox/fancybox_sprite@2x.png'); background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/ } #fancybox-loading div { background-image: url('../images/fbox/fancybox_loading@2x.gif'); background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/ } } /* simplyScroll 2 - a scroll-tastic jQuery plugin */ /* Default/Master classes Example markup format (for horizontal scroller) Note all DIVs are generated and should not be hard-coded
.simply-scroll-container { /* Container DIV - automatically generated */ position: relative; } .simply-scroll-clip { /* Clip DIV - automatically generated */ position: relative; overflow: hidden; } .simply-scroll-list { /* UL/OL/DIV - the element that simplyScroll is inited on */ overflow: hidden; margin: 0; padding: 0; list-style: none; } .simply-scroll-list li { padding: 0; margin: 0; list-style: none; } .simply-scroll-list li img { border: none; display: block; } .simply-scroll-btn { position: absolute; background-image: url(buttons.png); width: 42px; height: 44px; z-index:3; cursor: pointer; } .simply-scroll-btn-left { left: 6px; bottom: 6px; background-position: 0 -44px; } .simply-scroll-btn-left.disabled { background-position: 0 0 !important; } .simply-scroll-btn-left:hover, .simply-scroll-btn-left:focus { background-position: 0 -88px; } .simply-scroll-btn-right { right: 6px; bottom: 6px; background-position: -84px -44px; } .simply-scroll-btn-right.disabled { background-position: -84px 0 !important; } .simply-scroll-btn-right:hover, .simply-scroll-btn-right:focus { background-position: -84px -88px; } .simply-scroll-btn-up { right: 6px; top: 6px; background-position: -126px -44px; } .simply-scroll-btn-up.disabled { background-position: -126px 0 !important; } .simply-scroll-btn-up:hover, .simply-scroll-btn-up:focus { background-position: -126px -88px; } .simply-scroll-btn-down { right: 6px; bottom: 6px; background-position: -42px -44px; } .simply-scroll-btn-down.disabled { background-position: -42px 0 !important; } .simply-scroll-btn-down:hover, .simply-scroll-btn-down:focus { background-position: -42px -88px; } .simply-scroll-btn-pause { right: 6px; bottom: 6px; background-position: -168px -44px; } .simply-scroll-btn-pause:hover, .simply-scroll-btn-pause:focus { background-position: -168px -88px; } .simply-scroll-btn-pause.active { background-position: -84px -44px; } .simply-scroll-btn-pause.active:hover, .simply-scroll-btn-pause.active:focus { background-position: -84px -88px; } /* Custom class modifications - override classees .simply-scroll is default */ .simply-scroll { /* Customisable base class for style override DIV */ width: 1000px; height: 70px; margin-bottom:3px; } .simply-scroll .simply-scroll-clip { width: 1000px; height: 70px; } .simply-scroll .simply-scroll-list { } .simply-scroll .simply-scroll-list li { float: left; height: 70px; padding:0px 25px; border-right:1px solid #e5e5e5; } .simply-scroll .simply-scroll-list li img { } .simply-scroll .simply-scroll-btn { } .simply-scroll .simply-scroll-btn-left { } .simply-scroll .simply-scroll-btn-left.disabled { } .simply-scroll .simply-scroll-btn-left:hover { } .simply-scroll .simply-scroll-btn-right { } .simply-scroll .simply-scroll-btn-right.disabled { } .simply-scroll .simply-scroll-btn-right:hover { } .simply-scroll .simply-scroll-btn-up { } .simply-scroll .simply-scroll-btn-up.disabled { } .simply-scroll .simply-scroll-btn-up:hover { } .simply-scroll .simply-scroll-btn-down { } .simply-scroll .simply-scroll-btn-down.disabled { } .simply-scroll .simply-scroll-btn-down:hover { } /* NOTE left-right classes wouldn't be needed on vertical scroller */ #galleria { width:1100px; margin:0 auto; height:605px; } /* Home Page Image Gallery Scroller Styles */ .img_scroller { padding:0px; margin:10px 0; } .img_scroller .img_scroller_nav { position: absolute; } .img_scroller .img_scroller_nav li { cursor: pointer; position: absolute; top:20px; } .img_scroller .img_scroller_mask { position: absolute; margin-left: 0px; margin-right: 0px; overflow: hidden; } .img_scroller ul { padding: 0px; margin: 0px; float: left;} .img_scroller ul li { padding: 0px ; margin:0px 10px 0 0; list-style: none; float: left; text-align: center; display:inline; border-radius:4px; border:solid 2px #444; } .img_scroller ul li a { text-decoration: none; } .img_scroller ul li a:hover { text-decoration: underline; } .img_scroller ul li a img { border:1px solid #fff; border-radius:10px; } /* Accordion Styles */ .accord_part{ margin-top:30px;} h2.acc_trigger { padding:6px 10px 6px 35px; margin:6px 0 0 0; background: url(../images/sprite.png) left -7px no-repeat #ccc; font-size: 16px; font-weight: normal; cursor:pointer; border-radius:5px; transition: all 0.4s ease 0s; color:#111;} h2.acc_trigger:hover{ background-color:#666; color:#fff; transition: all 0.4s ease 0s;} h2.acc_trigger a { color: #fff; text-decoration: none; display: block; } h2.acc_trigger a:hover { color: #ccc; } h2.active { background-position: left -53px; border-radius:5px 5px 0 0; background-color:#dd0007; color:#fff; transition: all 0.4s ease 0s;} .acc_container { margin: 0 0 5px; padding: 0; overflow: hidden; font-size:14px; clear: both; background: #f6f6f6; border: 1px solid #d6d6d6; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .acc_container .block { padding: 20px; } .acc_container .block p { padding: 5px 0; margin: 5px 0; } .frm_dwn{ padding-top:16px;} /* UI TAB */ .container { margin: 10px 0; border-radius:6px; margin-top:30px; width:100%;} ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 45px; border-bottom: 1px solid #ddd; width: 100%; border-radius:6px 6px 0 0; } ul.tabs li { float: left; margin:0 4px 0 0; padding: 0; height: 45px; line-height: 45px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-right: 1px solid #ddd; margin-bottom: -1px; background: #999; overflow: hidden; position: relative; border-radius:6px 6px 0 0; font-size:18px;} ul.tabs li a { text-decoration: none; color: #fff; display: block; font-size: 18px; padding: 0 20px; outline: none; } ul.tabs li a:hover { background: #ccc; } html ul.tabs li.active, html ul.tabs li.active a:hover { background: #eee; color:#333; } ul.tabs li.active a{ color:#333;} .tab_container { border: 1px solid #ddd; border-top: none; clear: both; float: left; width: 100%; background: #eee; border-radius:0 0 6px 6px; } .tab_content { padding: 20px; font-size: 13px; background:#f8f8f8; border:1px solid #f2f2f2; border-radius:4px;} .tab_content h2 { font-weight: normal; padding-bottom: 10px; border-bottom: 1px dotted #bbb; font-size: 18px; color:#c30b12;} .tab_content h3 a { color: #254588; } .tab_content .fancybox img { border:1px solid #ccc; border-radius:6px;} .tab_content ul{ margin-left:20px;} .tab_content li{background: url(../images/bullet2.png) left 4px no-repeat; padding:0 10px 0 20px; margin-top:4px;} /*::::: PIROBOX RULES::::::::*/ .piro_overlay { position: fixed; _position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:#000; display: none; z-index:99997; } .loading span { position:absolute; top:50%; left:50%; margin-top:-15px; margin-left:-15px; width:30px; height:30px; display:block; z-index:100008; background:none } .loading span span { position:absolute; display:block; width:30px; height:30px; z-index:100009; background:url(../images/pbox/ajax-loader.gif) center center no-repeat!important; background:url(../images/pbox/ajax-loader.gif) center center no-repeat; } .caption { position:absolute; bottom:0; left:0; margin:0; display:block; padding:0px; cursor:text; background:#222; } .piro_nav { position:absolute; bottom:0; left:50%; margin:0; display:block; padding:0; background:none; } .caption p { display:none; margin:0; padding:4px 28px 4px 38px; text-align:center; font-weight:normal; background:black; color:white; font-size:12px; } a.piro_close { position:absolute; top:20px; right:20px; height:35px; width:35px; background:url(../images/pbox/close_btn.png) no-repeat; cursor:pointer; z-index:100006; } a:hover.piro_close { background:url(../images/pbox/close_btn_h.png) no-repeat; } a.piro_next { position:absolute; top:50%; width:35px; height:35px; right:20px; text-indent:-999em; outline:none; display:block; margin:-18px 0 0 0; background:url(../images/pbox/next.png) center right no-repeat; border:none; cursor:pointer; z-index:1000000001 } a:hover.piro_next { background:url(../images/pbox/next_h.png) center right no-repeat; } a.piro_prev { position:absolute; top:50%; width:35px; height:35px; left:20px; text-indent:-999em; outline:none; display:block; margin:-18px 0 0 0; background:url(../images/pbox/prev.png) center left no-repeat; border:none; cursor:pointer; z-index:1000000000 } a:hover.piro_prev { background:url(../images/pbox/prev_h.png) center left no-repeat; } .pirobox_content { position:absolute; top:50%; left: 50%; padding:0; width: 800px; height: 600px; margin:-300px 0 0 -400px; display:block; z-index:99998; font-family:Trebuchet MS, Arial; } .pirobox_content table, tbody, tr, th, td { margin:0; padding:0; border:none; } .pirobox_content img { margin:0; padding:0; border:none; } .t_l { background:url(../images/pbox/t_l.png) no-repeat; width:20px; height:20px; } .t_r { background:url(../images/pbox/t_r.png) no-repeat; width:20px; height:20px; } .t_c { height:20px; background:url(../images/pbox/t_c.png) repeat-x; } .c_l { width:20px; background:url(../images/pbox/c_l.png) repeat-y; } .c_c { background:white; margin:0; padding:0; } .c_c div { width:760px; height:560px; margin:0; padding:0 0 0px 0; } .c_r { width:20px; background:url(../images/pbox/c_r.png) repeat-y; } .b_c { height:20px; background:url(../images/pbox/b_c.png) repeat-x; } .b_l { background:url(../images/pbox/b_l.png) no-repeat; width:20px; height:20px; } .b_r { background:url(../images/pbox/b_r.png) no-repeat; width:20px; height:20px; } .pirobox_gall{ padding-bottom:7px;}