侧边栏固定的布局

时间：2015-06-10 11:49:06 阅读：115 评论：0 收藏：0 [点我收藏+]

标签：

这部分没有弄得很清楚

问题来源：

http://codepen.io/wmrch05/details/LiaKG

在上述案例中，页面滚动的时候，侧边栏和顶部导航的布局由static转换为fixed。同时相对于原来的static的位置发生了编码，案例的源码是：（最终的scripts源码感觉涉及到一些高级的编程特性，没怎么看懂）

<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"><head>
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">


    <title>CodePen - Basic Responsive Bootstrap Template </title>
    <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>


    
    
    <link rel="stylesheet prefetch" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">

        <style>
      html body .span3 {width: 213px;}

/* nav */
.navbar-fixed {height:120px;}
.head3 {height:60px;}
.buttons a, .care, .inner {text-transform:uppercase;}
a.basic-btn { text-shadow: 0px 1px 2px #333; display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; color: #f3f3f3; text-decoration: none; font-family: "DIN Bold", sans-serif; font-size: 11px; margin: 0; line-height: 30px; height: 30px; padding: 0 10px; border-right: 1px solid #333; overflow: hidden; }
a.basic-btn:hover, a.basic-btn:visited, a.basic-btn:active { color: #ddd;text-decoration: none; }
.support { border-left: 1px solid #333; position: relative; background:#000;  }
.aboutus { position: relative; background:#000; }
a.iconic-btn { text-shadow: 0px 1px 2px #333; display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; color: #f3f3f3; text-decoration: none; font-size: 14px; margin: 0; line-height: 30px; height: 30px; padding: 0 18px 0 8px; border-right: 1px solid #333; }
a.iconic-btn:hover, .nav a.iconic-btn:visited, .nav a.iconic-btn:active { text-decoration: none; color: #fff; }
a.iconic-btn .divider { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; border-left: 1px solid #333; border-right: 1px solid #777; margin: 0 9px; padding: 0; height: 16px; }
.login { background:#000; font-family: DIN Bold, sans-serif; height: 28px; }

.nav2-btn, .nav2-btn-alt { background:#222; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; behavior: url("/stylesheets/PIE.htc"); position: relative; height: 54px; width: 100px; margin: 0 1px; vertical-align: middle; display: table; position: relative; }
.arrow { visibility: hidden; width: 0px; height: 0px; border-left:10px solid transparent; border-right:10px solid transparent; border-top:10px solid #fff;position:absolute;left:40px;bottom:-10px; }
.arrowInner { visibility: hidden; width: 0px; height: 0px; border-left:8px solid transparent; border-right:8px solid transparent; border-top:8px solid #555;position:relative;left:-8px;bottom:12px; }
.outer { display: table-cell; vertical-align: middle; width: 100%; margin: 0 auto; text-align: center; }
.inner {font-size:13px;}
.inner span {text-transform:none !important;}
.nav2 .nav2-btn .outer .inner, .nav2 .nav2-btn-alt .outer .inner { font-family: "DIN Bold", sans-serif; font-size: 13px; font-weight: normal; text-shadow: #777 0 -1px 0; text-decoration: none; color: #fff; }
.nav2-btn.current, .current.nav2-btn-alt { background:#555; }
.nav2-btn.current .arrow, .current.nav2-btn-alt .arrow, .nav2-btn.current .arrowInner, .current.nav2-btn-alt .arrowInner { visibility: visible; }
.nav2-btn-alt { background:#F0952E; width: 110px; }
.nav2-btn-alt .inner { text-shadow: #f73500 0 -1px 0; font-weight: normal; }
.nav2-btn-alt .inner strong { font-size: 16px; font-weight: normal; font-family: "DIN Black", sans-serif; }

/* buttons */
.btn { color:#fff !important;font-family: "DIN Bold", sans-serif; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; behavior: url("/stylesheets/PIE.htc"); position: relative; text-shadow: 0 1px 1px #f3f3f3; border: 1px solid #bfbfbf; color: #f88404; }
.btn em { font-family: "DIN Regular", sans-serif; }
.btn.alt { border: 1px solid #d37f00; color: #f3f3f3; text-shadow: 0 -2px 1px #e78b02; }
.btn.alt:hover, .btn.alt:active, .btn.alt:visited { color: #ddd; }
.btn.big { line-height: 58px; height: 58px; padding: 0 20px; font-size: 22px; }
.btn.big.icon:before, .btn.big.icon .before { font-size: 28px; line-height: 58px; padding-right: 18px; margin-right: 14px; }
.btn.big.alt { background: url(‘../images/default/bg/button-big-alt.png?1360067855‘) 0 0 repeat-x; }
.btn.big.alt.icon:before, .btn.big.alt.icon .before { background: url(‘../images/default/bg/button-big-alt-divider.png?1360067855‘) right no-repeat; }
.btn.medium { background: url(‘../images/default/bg/button-medium.png?1360067855‘) 0 0 repeat-x; line-height: 38px; height: 38px; padding: 0 12px; font-size: 20px; }
.btn.medium.icon:before, .btn.medium.icon .before { font-size: 20px; line-height: 38px; padding-right: 12px; margin-right: 10px; background: url(‘../images/default/bg/button-medium-divider.png?1361198036‘) right no-repeat; }
.btn.small { background: url(‘../images/default/bg/button-small.png?1360067858‘) 0 0 repeat-x; line-height: 28px; height: 28px; padding: 0 8px; font-size: 14px; }
.btn.small.icon:before, .btn.small.icon .before { font-size: 18px; line-height: 28px; padding-right: 9px; margin-right: 5px; background: url(‘../images/default/bg/button-small-divider.png?1361198394‘) right no-repeat; }
.btn.small.alt { background: #F0952E; }
.btn.small.alt.icon:before, .btn.small.alt.icon .before { background: #F0952E; }
.btn.xsmall { background: url(‘../images/default/bg/button-xsmall.png?1360067858‘) 0 0 repeat-x; line-height: 18px; height: 18px; padding: 0 5px; font-size: 12px; }
.btn.xsmall.icon:before, .btn.xsmall.icon .before { font-size: 12px; line-height: 18px; padding-right: 9px; margin-right: 5px; background: url(‘../images/default/bg/button-xsmall-divider.png?1361202268‘) right no-repeat; }
.btn:hover, .btn:active, .btn:visited { color: #f88404; }
.btn.no-text.icon:before, .btn.no-text.icon .before { color:orange;padding-right: 0; margin-right: 0; background: none !important; }

/* inputs */
input[type=text] { background: #006699; color: #f3f3f3; font-weight: normal; font-size: 12px; height: 26px; line-height: 26px; border: 1px solid #055982; padding: 0 9px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; width: 210px; }
input[type=text].placeholder { color: #f3f3f3; }
input[type=text]:-moz-placeholder { color: #f3f3f3; }
input[type=text]::-webkit-input-placeholder { color: #f3f3f3; }
input[type=text]::-ms-input-placeholder { color: #f3f3f3; }
input[type=text].alt { background-color: #f3f3f3; color: #333333; border: none; }
input[type=text].alt.placeholder { color: #333333; }
input[type=text].alt:-moz-placeholder { color: #333333; }
input[type=text].alt::-webkit-input-placeholder { color: #333333; }
input[type=text].alt::-ms-input-placeholder { color: #333333; }

textarea { background-color: #f3f3f3; color: #333333; border: none; resize: vertical; }
textarea.placeholder { color: #333333; }
textarea:-moz-placeholder { color: #333333; }
textarea::-webkit-input-placeholder { color: #333333; }
textarea::-ms-input-placeholder { color: #333333; }

.input-append input { display: inline; padding-right: 0; margin-right: 0; border-right: 1px solid #005884; -moz-border-radius-topright: 0; -webkit-border-top-right-radius: 0; border-top-right-radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; vertical-align: middle; }
.input-append .add-on { margin-left: 0; padding-left: 0; background: #006699; color: #f3f3f3; display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; border: 1px solid #055982; height: 26px; line-height: 26px; vertical-align: middle; border-left: 1px solid #0d6e9e; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; -moz-border-radius-bottomright: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; }
.input-append .add-on i { font-size: 14px; }

/* layout slider - I don‘t know where this is used */
.layout-slider { padding: 80px 65px 0 60px; position: relative; }
.layout-slider .border-container { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; position: relative; border: 1px solid #cfcfcf; position: absolute; top: 5px; bottom: 5px; width: 543px; left: 0; }
.layout-slider .title { position: absolute; top: -5px; left: 0; right: 0; text-align: center; }
.layout-slider .title p { background: #ffffff; display: inline; padding: 0 10px; font-family: Arial, sans-serif; font-size: 12px; font-weight: bold; }
.layout-slider .scale { position: relative; background: url(‘../images/default/bg/slider-scale.png?1360067871‘); -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; position: relative; height: 10px; width: 425px; }
.layout-slider .scale .range { background: url(‘../images/default/bg/slider-range.png?1360067871‘); height: 10px; width: 416px; position: absolute; left: 0; }
.layout-slider .scale .range .arrow { background-color: #0099cc; height: 1px; left: 15px; right: 5px; top: -25px; position: absolute; }
.layout-slider .scale .range .arrow .arrow-min { position: absolute; background: url(‘../images/default/bg/slider-arrow-min.png?1360067871‘); width: 4px; height: 7px; top: -3px; }
.layout-slider .scale .range .arrow .arrow-max { position: absolute; background: url(‘../images/default/bg/slider-arrow-max.png?1360067870‘); width: 4px; height: 7px; right: 0; top: -3px; }
.layout-slider .scale .handle { cursor: pointer; position: absolute; top: -3px; width: 14px; height: 17px; }
.layout-slider .scale .handle .label { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; position: relative; position: absolute; top: -45px; width: 58px; height: 38px; background-color: #f3f3f3; padding: 1px; color: #0099cc; text-align: center; }
.layout-slider .scale .handle .label .price { font-family: "DIN Bold", sans-serif; font-size: 16px; display: inline; }
.layout-slider .scale .handle .label .currency { font-family: "DIN Light", sans-serif; font-size: 16px; display: inline; }
.layout-slider .scale .handle .label .cents { font-family: "DIN Regular", sans-serif; display: inline; padding-bottom: 5px; }
.layout-slider .scale .handle .label .unit { font-size: 12px; font-family: "DIN Regular", sans-serif; color: #cfcfcf; text-align: center; }
.layout-slider .scale .handle.min { background: url(‘../images/default/bg/slider-handle-min.png?1360067871‘); left: 0; }
.layout-slider .scale .handle.min .label { left: -51px; }
.layout-slider .scale .handle.max { background: url(‘../images/default/bg/slider-handle-max.png?1360067871‘); left: 411px; }
.layout-slider .scale .handle.max .label { left: 5px; }

/* comments out the styles below because of bs implementation */
/*.icons-sprite, .icons-blue-mail, .icons-blue-phone, .icons-compact-list-current, .icons-compact-list.current, .icons-compact-list, .icons-favorite, .icons-full-list-current, .icons-full-list.current, .icons-full-list, .icons-gray-mail, .icons-green-articles, .icons-green-clip-hidden, .icons-green-comments, .icons-green-contacts, .icons-green-cp-big, .icons-green-cp, .icons-green-faq, .icons-green-fingerprint, .icons-green-hearts, .icons-green-horn, .icons-green-key, .icons-green-privacy, .icons-green-schedule, .icons-green-scroll, .icons-green-stars, .icons-green-stats, .icons-like, .icons-logo-fb, .icons-logo-moneyback, .icons-logo-small, .icons-logo-truste, .icons-logo-twitter, .icons-logo-verysign, .icons-logo-youtube, .icons-logo { background: url(‘../images/default/icons-s4c0e3bbfe9.png‘) no-repeat; } .icons-full-list-current, .icons-full-list.current { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; width: 18px; height: 15px; } .icons-full-list { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; width: 18px; height: 15px; } .icons-compact-list-current, .icons-compact-list.current { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; width: 18px; height: 15px; } .icons-compact-list { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; width: 18px; height: 15px; } .icons-like { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; width: 22px; height: 22px; } .icons-favorite { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; width: 22px; height: 22px; } .icons-green-key { width: 27px; height: 27px; } .icons-green-stats { width: 27px; height: 29px; } .icons-green-schedule { width: 27px; height: 27px; } .icons-green-clip-hidden { width: 27px; height: 31px; } .icons-green-scroll { width: 27px; height: 38px; } .icons-green-cp { width: 18px; height: 18px; } .icons-green-fingerprint { width: 27px; height: 33px; } .icons-green-articles { width: 27px; height: 21px; } .icons-green-hearts { width: 27px; height: 28px; } .icons-green-comments { width: 31px; height: 26px; } .icons-green-faq { width: 34px; height: 32px; } .icons-green-contacts { width: 33px; height: 34px; } .icons-blue-phone { width: 55px; height: 57px; } .icons-blue-mail { width: 55px; height: 56px; } .icons-gray-mail { width: 40px; height: 30px; } .icons-green-horn { width: 27px; height: 23px; } .icons-green-privacy { width: 21px; height: 30px; } .icons-green-stars { width: 36px; height: 38px; } .icons-green-cp-big { width: 34px; height: 34px; }*/

/* topic - I don‘t know where this is used */
.topic-container { position: relative; }
.topic-container.love .topic { background: url(‘../images/default/topics/hearts.png?1361444177‘); border: 1px solid #e94a5b; }
.topic-container.love .topic .checkbox { border: 1px solid #e94a5b; }
.topic-container.love .subtopics { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f66f82), color-stop(100%, #f45269)); background: -webkit-linear-gradient(#f66f82, #f45269); background: -moz-linear-gradient(#f66f82, #f45269); background: -o-linear-gradient(#f66f82, #f45269); -pie-background: linear-gradient(#f66f82, #f45269); background: linear-gradient(#f66f82, #f45269); border: 1px solid #e94a5b; background-color: #f45269; }
.topic-container.love .subtopics .subtopic .checkbox { border: 1px solid #e94a5b; }
.topic-container.money .topic { background: url(‘../images/default/topics/money.png?1361444475‘); border: 1px solid #9dc318; }
.topic-container.money .topic .checkbox { border: 1px solid #9dc318; }
.topic-container.money .subtopics { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b3d831), color-stop(100%, #a4d009)); background: -webkit-linear-gradient(#b3d831, #a4d009); background: -moz-linear-gradient(#b3d831, #a4d009); background: -o-linear-gradient(#b3d831, #a4d009); -pie-background: linear-gradient(#b3d831, #a4d009); background: linear-gradient(#b3d831, #a4d009); background-color: #a4d009; border: 1px solid #9dc318; }
.topic-container.money .subtopics .subtopic .checkbox { border: 1px solid #9dc318; }
.topic-container.destiny .topic { background: url(‘../images/default/topics/destiny.png?1361444285‘); border: 1px solid #f79502; }
.topic-container.destiny .topic .checkbox { border: 1px solid #f79502; }
.topic-container.destiny .subtopics { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffaf37), color-stop(100%, #ff9900)); background: -webkit-linear-gradient(#ffaf37, #ff9900); background: -moz-linear-gradient(#ffaf37, #ff9900); background: -o-linear-gradient(#ffaf37, #ff9900); -pie-background: linear-gradient(#ffaf37, #ff9900); background: linear-gradient(#ffaf37, #ff9900); background-color: #ff9900; border: 1px solid #f79502; }
.topic-container.destiny .subtopics .subtopic .checkbox { border: 1px solid #f79502; }
.topic-container.mind .topic { background: url(‘../images/default/topics/mind.png?1361444339‘); border: 1px solid #debd07; }
.topic-container.mind .topic .checkbox { border: 1px solid #debd07; }
.topic-container.mind .subtopics { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #edd036), color-stop(100%, #e9c812)); background: -webkit-linear-gradient(#edd036, #e9c812); background: -moz-linear-gradient(#edd036, #e9c812); background: -o-linear-gradient(#edd036, #e9c812); -pie-background: linear-gradient(#edd036, #e9c812); background: linear-gradient(#edd036, #e9c812); border: 1px solid #debd07; background-color: #e9c812; }
.topic-container.mind .subtopics .subtopic .checkbox { border: 1px solid #debd07; }
.topic-container.spirit .topic { background: url(‘../images/default/topics/spirit.png?1361444579‘); border: 1px solid #0eb7e4; }
.topic-container.spirit .topic .checkbox { border: 1px solid #0eb7e4; }
.topic-container.spirit .subtopics { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #44cef3), color-stop(100%, #1ac3f0)); background: -webkit-linear-gradient(#44cef3, #1ac3f0); background: -moz-linear-gradient(#44cef3, #1ac3f0); background: -o-linear-gradient(#44cef3, #1ac3f0); -pie-background: linear-gradient(#44cef3, #1ac3f0); background: linear-gradient(#44cef3, #1ac3f0); border: 1px solid #0eb7e4; background-color: #1ac3f0; }
.topic-container.spirit .subtopics .subtopic .checkbox { border: 1px solid #0eb7e4; }
.topic-container .topic { -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=36); opacity: 0.36; width: 100px; height: 70px; position: relative; }
.topic-container .topic .label { position: absolute; color: white; font-family: "DIN Bold", sans-serif; font-size: 15px; bottom: 8px; text-align: right; right: 6px; }
.topic-container .topic .checkbox { cursor: pointer; position: absolute; top: 8px; left: 8px; width: 20px; height: 20px; background-color: white; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }
.topic-container .topic .checkbox .check { background: url(‘../images/default/topics/check.png?1360586690‘); width: 20px; height: 17px; display: none; }
.topic-container .subtopics { -moz-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px; border-bottom-left-radius: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=36); opacity: 0.36; padding: 5px; width: 90px; display: none; }
.topic-container .subtopics .subtopic { padding: 5px 0; }
.topic-container .subtopics .subtopic .checkbox { width: 13px; height: 13px; background: white; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; cursor: pointer; }
.topic-container .subtopics .subtopic .checkbox .check { background: url(‘../images/default/topics/check-subtopic.png?1360603474‘); width: 13px; height: 11px; display: none; }
.topic-container .subtopics .subtopic .label { padding-left: 18px; font-family: "DIN Bold", sans-serif; color: white; font-size: 11px; display: block; margin-top: -13px; }
.topic-container .subtopics .subtopic.checked .check { display: block; }
.topic-container.with_subtopics .topic { -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; border-bottom: none; }
.topic-container.with_subtopics .subtopics { display: block; }
.topic-container.checked .topic { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }
.topic-container.checked .subtopics { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }
.topic-container.checked .topic .checkbox .check { display: block; }

/* comments out the styles below because of bs implementation */
/*.container { width: 950px; margin: 0 auto; overflow: hidden; *zoom: 1; }*/  /*.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 { display: inline; float: left; margin-right: 10px; } * html .column, * html .span-1, * html .span-2, * html .span-3, * html .span-4, * html .span-5, * html .span-6, * html .span-7, * html .span-8, * html .span-9, * html .span-10, * html .span-11, * html .span-12, * html .span-13, * html .span-14, * html .span-15, * html .span-16, * html .span-17, * html .span-18, * html .span-19, * html .span-20, * html .span-21, * html .span-22, * html .span-23, * html .span-24 { overflow-x: hidden; }  .last { margin-right: 0; }  .span-1 { width: 30px; }  .span-2 { width: 70px; }  .span-3 { width: 110px; }  .span-4 { width: 150px; }  .span-5 { width: 190px; }  .span-6 { width: 230px; }  .span-7 { width: 270px; }  .span-8 { width: 310px; }  .span-9 { width: 350px; }  .span-10 { width: 390px; }  .span-11 { width: 430px; }  .span-12 { width: 470px; }  .span-13 { width: 510px; }  .span-14 { width: 550px; }  .span-15 { width: 590px; }  .span-16 { width: 630px; }  .span-17 { width: 670px; }  .span-18 { width: 710px; }  .span-19 { width: 750px; }  .span-20 { width: 790px; }  .span-21 { width: 830px; }  .span-22 { width: 870px; }  .span-23 { width: 910px; }  .span-24 { width: 950px; margin: 0; }  input.span-1, textarea.span-1, select.span-1 { width: 30px; } input.span-2, textarea.span-2, select.span-2 { width: 70px; } input.span-3, textarea.span-3, select.span-3 { width: 110px; } input.span-4, textarea.span-4, select.span-4 { width: 150px; } input.span-5, textarea.span-5, select.span-5 { width: 190px; } input.span-6, textarea.span-6, select.span-6 { width: 230px; } input.span-7, textarea.span-7, select.span-7 { width: 270px; } input.span-8, textarea.span-8, select.span-8 { width: 310px; } input.span-9, textarea.span-9, select.span-9 { width: 350px; } input.span-10, textarea.span-10, select.span-10 { width: 390px; } input.span-11, textarea.span-11, select.span-11 { width: 430px; } input.span-12, textarea.span-12, select.span-12 { width: 470px; } input.span-13, textarea.span-13, select.span-13 { width: 510px; } input.span-14, textarea.span-14, select.span-14 { width: 550px; } input.span-15, textarea.span-15, select.span-15 { width: 590px; } input.span-16, textarea.span-16, select.span-16 { width: 630px; } input.span-17, textarea.span-17, select.span-17 { width: 670px; } input.span-18, textarea.span-18, select.span-18 { width: 710px; } input.span-19, textarea.span-19, select.span-19 { width: 750px; } input.span-20, textarea.span-20, select.span-20 { width: 790px; } input.span-21, textarea.span-21, select.span-21 { width: 830px; } input.span-22, textarea.span-22, select.span-22 { width: 870px; } input.span-23, textarea.span-23, select.span-23 { width: 910px; } input.span-24, textarea.span-24, select.span-24 { width: 950px; }  .append-1 { padding-right: 40px; }  .append-2 { padding-right: 80px; }  .append-3 { padding-right: 120px; }  .append-4 { padding-right: 160px; }  .append-5 { padding-right: 200px; }  .append-6 { padding-right: 240px; }  .append-7 { padding-right: 280px; }  .append-8 { padding-right: 320px; }  .append-9 { padding-right: 360px; }  .append-10 { padding-right: 400px; }  .append-11 { padding-right: 440px; }  .append-12 { padding-right: 480px; }  .append-13 { padding-right: 520px; }  .append-14 { padding-right: 560px; }  .append-15 { padding-right: 600px; }  .append-16 { padding-right: 640px; }  .append-17 { padding-right: 680px; }  .append-18 { padding-right: 720px; }  .append-19 { padding-right: 760px; }  .append-20 { padding-right: 800px; }  .append-21 { padding-right: 840px; }  .append-22 { padding-right: 880px; }  .append-23 { padding-right: 920px; }  .prepend-1 { padding-left: 40px; }  .prepend-2 { padding-left: 80px; }  .prepend-3 { padding-left: 120px; }  .prepend-4 { padding-left: 160px; }  .prepend-5 { padding-left: 200px; }  .prepend-6 { padding-left: 240px; }  .prepend-7 { padding-left: 280px; }  .prepend-8 { padding-left: 320px; }  .prepend-9 { padding-left: 360px; }  .prepend-10 { padding-left: 400px; }  .prepend-11 { padding-left: 440px; }  .prepend-12 { padding-left: 480px; }  .prepend-13 { padding-left: 520px; }  .prepend-14 { padding-left: 560px; }  .prepend-15 { padding-left: 600px; }  .prepend-16 { padding-left: 640px; }  .prepend-17 { padding-left: 680px; }  .prepend-18 { padding-left: 720px; }  .prepend-19 { padding-left: 760px; }  .prepend-20 { padding-left: 800px; }  .prepend-21 { padding-left: 840px; }  .prepend-22 { padding-left: 880px; }  .prepend-23 { padding-left: 920px; }  .pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 { display: inline; float: left; position: relative; }  .pull-1 { margin-left: -40px; }  .pull-2 { margin-left: -80px; }  .pull-3 { margin-left: -120px; }  .pull-4 { margin-left: -160px; }  .pull-5 { margin-left: -200px; }  .pull-6 { margin-left: -240px; }  .pull-7 { margin-left: -280px; }  .pull-8 { margin-left: -320px; }  .pull-9 { margin-left: -360px; }  .pull-10 { margin-left: -400px; }  .pull-11 { margin-left: -440px; }  .pull-12 { margin-left: -480px; }  .pull-13 { margin-left: -520px; }  .pull-14 { margin-left: -560px; }  .pull-15 { margin-left: -600px; }  .pull-16 { margin-left: -640px; }  .pull-17 { margin-left: -680px; }  .pull-18 { margin-left: -720px; }  .pull-19 { margin-left: -760px; }  .pull-20 { margin-left: -800px; }  .pull-21 { margin-left: -840px; }  .pull-22 { margin-left: -880px; }  .pull-23 { margin-left: -920px; }  .pull-24 { margin-left: -960px; }  .push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 { display: inline; float: left; position: relative; }  .push-1 { margin: 0 -40px 1.5em 40px; }  .push-2 { margin: 0 -80px 1.5em 80px; }  .push-3 { margin: 0 -120px 1.5em 120px; }  .push-4 { margin: 0 -160px 1.5em 160px; }  .push-5 { margin: 0 -200px 1.5em 200px; }  .push-6 { margin: 0 -240px 1.5em 240px; }  .push-7 { margin: 0 -280px 1.5em 280px; }  .push-8 { margin: 0 -320px 1.5em 320px; }  .push-9 { margin: 0 -360px 1.5em 360px; }  .push-10 { margin: 0 -400px 1.5em 400px; }  .push-11 { margin: 0 -440px 1.5em 440px; }  .push-12 { margin: 0 -480px 1.5em 480px; }  .push-13 { margin: 0 -520px 1.5em 520px; }  .push-14 { margin: 0 -560px 1.5em 560px; }  .push-15 { margin: 0 -600px 1.5em 600px; }  .push-16 { margin: 0 -640px 1.5em 640px; }  .push-17 { margin: 0 -680px 1.5em 680px; }  .push-18 { margin: 0 -720px 1.5em 720px; }  .push-19 { margin: 0 -760px 1.5em 760px; }  .push-20 { margin: 0 -800px 1.5em 800px; }  .push-21 { margin: 0 -840px 1.5em 840px; }  .push-22 { margin: 0 -880px 1.5em 880px; }  .push-23 { margin: 0 -920px 1.5em 920px; }  .push-24 { margin: 0 -960px 1.5em 960px; }  .prepend-top { margin-top: 1.5em; }  .append-bottom { margin-bottom: 1.5em; }  .clear-both { clear: both; }  .pull-right { display: inline; float: right; }  img.pull-right { padding: 10px 0 10px 20px; }  .pull-left { display: inline; float: left; }  img.pull-left { padding: 10px 20px 10px 0; }*/ 

.icons-sprite, .icons-blue-mail, .icons-blue-phone, .icons-compact-list-current, .icons-compact-list.current, .icons-compact-list, .icons-favorite, .icons-full-list-current, .icons-full-list.current, .icons-full-list, .icons-gray-mail, .icons-green-articles, .icons-green-clip-hidden, .icons-green-comments, .icons-green-contacts, .icons-green-cp-big, .icons-green-cp, .icons-green-faq, .icons-green-fingerprint, .icons-green-hearts, .icons-green-horn, .icons-green-key, .icons-green-privacy, .icons-green-schedule, .icons-green-scroll, .icons-green-stars, .icons-green-stats, .icons-like, .icons-logo-fb, .icons-logo-moneyback, .icons-logo-small, .icons-logo-truste, .icons-logo-twitter, .icons-logo-verysign, .icons-logo-youtube, .icons-logo { background: url(‘../images/default/icons-s4c0e3bbfe9.png‘) no-repeat; }
.icons-blue-mail { background-position: 0 -212px; }
.icons-blue-phone { background-position: -55px -212px; }
.icons-compact-list-current, .icons-compact-list.current { background-position: -30px -31px; }
.icons-compact-list { background-position: -48px -31px; }
.icons-favorite { background-position: 0 0; }
.icons-full-list-current, .icons-full-list.current { background-position: -12px -31px; }
.icons-full-list { background-position: 0 -64px; }
.icons-gray-mail { background-position: -71px -64px; }
.icons-green-articles { background-position: -109px -31px; }
.icons-green-clip-hidden { background-position: -209px 0; }
.icons-green-comments { background-position: -76px 0; }
.icons-green-contacts { background-position: -34px -116px; }
.icons-green-cp-big { background-position: 0 -116px; }
.icons-green-cp { background-position: -66px -31px; }
.icons-green-faq { background-position: -158px -31px; }
.icons-green-fingerprint { background-position: -192px -31px; }
.icons-green-hearts { background-position: -134px 0; }
.icons-green-horn { background-position: -22px 0; }
.icons-green-key { background-position: -107px 0; }
.icons-green-privacy { background-position: -161px 0; }
.icons-green-schedule { background-position: -49px 0; }
.icons-green-scroll { background-position: -147px -64px; }
.icons-green-stars { background-position: -111px -64px; }
.icons-green-stats { background-position: -182px 0; }
.icons-like { background-position: -136px -31px; }
.icons-logo-fb { background-position: 0 -31px; }
.icons-logo-moneyback { background-position: -67px -116px; }
.icons-logo-small { background-position: -174px -64px; }
.icons-logo-truste { background-position: 0 -269px; }
.icons-logo-twitter { background-position: -84px -31px; }
.icons-logo-verysign { background-position: -120px -116px; }
.icons-logo-youtube { background-position: -18px -64px; }
.icons-logo { background-position: 0 -172px; }
body .icon-envelope-alt, body .icon-twitter, body .icon-facebook {background-image:none;}

@font-face { font-family: "DIN Bold"; src: url(‘../font/din-bold-webfont.eot‘); src: url(‘../font/din-bold-webfont.eot?#iefix‘) format(‘eot‘), url(‘../font/din-bold-webfont.ttf‘) format(‘truetype‘), url(‘../font/din-bold-webfont.svg‘) format(‘svg‘), url(‘../font/din-bold-webfont.woff‘) format(‘woff‘); font-weight: bold; }
@font-face { font-family: "DIN Black"; src: url(‘../font/din-black-webfont.eot‘); src: url(‘../font/din-black-webfont.eot?#iefix‘) format(‘eot‘), url(‘../font/din-black-webfont.ttf‘) format(‘truetype‘), url(‘../font/din-black-webfont.svg‘) format(‘svg‘), url(‘../font/din-black-webfont.woff‘) format(‘woff‘); }
@font-face { font-family: "DIN Light"; src: url(‘../font/DIN-Light.eot‘); src: url(‘../font/DIN-Light.eot?#iefix‘) format(‘eot‘), url(‘../font/DIN-Light.ttf‘) format(‘truetype‘), url(‘../font/DIN-Light.svg‘) format(‘svg‘), url(‘../font/DIN-Light.woff‘) format(‘woff‘); }
@font-face { font-family: "DIN Regular"; src: url(‘../font/din-regular-webfont.eot‘); src: url(‘../font/din-regular-webfont.eot?#iefix‘) format(‘eot‘), url(‘../font/din-regular-webfont.ttf‘) format(‘truetype‘), url(‘../font/din-regular-webfont.svg‘) format(‘svg‘), url(‘../font/din-regular-webfont.woff‘) format(‘woff‘); }

hr { background: url(‘../images/default/bg/hr.png?1360067861‘) 0 0 no-repeat; height: 52px; width: 733px; border: none;*border: 0 !Important;*border-right:0;*display:list-item;*list-style: url(‘../images/default/bg/hr.png?1360067861‘) inside;filter : alpha(opacity=0);*margin-left: -10px;*width : 0;/* added ie7 rules - important for ie 7 */ padding-bottom: 20px; }
hr.compact { width: 100%; height: 1px; border: none; background-color: #ededed; padding-bottom: 0; background-image: none; }

body h1, body section h2 { font-family: "DIN Bold", sans-serif; padding-left: 0; padding-bottom: 25px; font-size: 46px; color: #000; }/* add ‘body‘ to over ride bootstrap inherit */
body h2 { font-family: "DIN Bold", sans-serif; font-size: 36px; color: #000; }
body h3 { font-family: "DIN Bold", sans-serif; font-size: 26px; color: #000; }

body h4 { font-family: Arial, sans-serif; font-size: 15px; color: #000; font-weight: bold; }

h5 { font-weight: bold; font-size: 14px; }

p { font-size: 14px; padding: 20px 0; }

p + p { padding-top: 10px; }

.navbar-fixed { position: fixed; top:0; width: 100%; left: 0; top: 0; z-index: 100; }

/* fixToolbar add class hass been removed for this mock */

/*body.fixToolbar {position:relative;}*/
body.fixToolbar .root { margin-top: 109px; }
body.fixToolbar  .sidebar {  z-index: 90 !important;}
body.fixToolbar .fixed { position: fixed; top:0; width: 100%; left: 0; top: 0; z-index: 100; }
body .root {margin-top:90px;}
body.fixToolbar .root { margin-top: 109px; }
body.fixToolbar .root section {}
body.fixToolbar .root .container .sidebar { top: 129px; z-index: 90 !important; }
body {position:relative;}

/* bootstrap affix code */

.navbar-fixed.affix-top {
position:absolute;
    top: 80px;
  }
.sidebar.affix-top {
position:absolute;
    top: 210px;
  }
  .navbar-fixed.affix {
    top: 0px;
  }
 .sidebar .affix {
    top: 130px;
    z-index:0;
  }
.sidebar.affix-bottom, .sidebar .affix-bottom {
position:absolute;
top:auto;
    bottom:530px;
    }

    
.center { width: 100%; text-align: center; }

.text-right {text-align:right}

/* head area 1 */
.head1 { background: #000; border-bottom: 1px solid #333; height: 30px; width: 100%; }
.head1 .nav {height: 30px; padding: 0; margin: 0; border-bottom: 1px solid #333; }
.head1 .nav .buttons { display: inline; float: right; }
.head1, .head2 {margin-left:-20px;padding:0 20px; }

/* heade area 2 */
.head2 { background:#000; height: 59px; width: 100%; z-index: -1; }
.head2 .nav-divider { background: url(‘../images/default/bg/header-divider.png?1360067859‘) 0 0 no-repeat; width: 950px; height: 1px; padding: 0; margin: 0; }
.head2 .search { background:#000; display: inline; float: left; margin-right: 0;text-shadow: 0px 1px 2px #333; height: 58px; line-height: 58px; font-size: 13px; color: #fff; }
* html .head2 .search { overflow-x: hidden; }
.head2 .search .care { display: inline; float: left; margin-right: 0; font-family: "DIN Bold", sans-serif; }
* html .head2 .search .care { overflow-x: hidden; }
.head2 .search .care i { font-size: 18px; padding-right: 5px; }
.head2 .search .care a { color: #fff; }
.head2 .search .search-input { display: inline; float: left; margin-right: 0;}
* html .head2 .search .search-input { overflow-x: hidden; }
.head2 .search .search-input .input-append { display: inline; float: right; }

/* head area 3 */
.head3 { background-color: white; }
.head3 .container { overflow: visible; }
.head3 .nav2 { display: inline; float: left; margin-right: 0; height: 60px; }
* html .head3 .nav2 { overflow-x: hidden; }
.head3 .nav2 .icons-logo { /* added 3/7/13 */ display: inline; float: left; margin-right: 0; width: 210px; margin-left: 10px; margin-top: 10px; height: 40px; }
* html .head3 .nav2 .icons-logo { overflow-x: hidden; }
.head3 .nav2 .nav2-menu { padding: 0; margin-left:0;margin-right: 0; display: inline; float: right; list-style: none; margin-top: 3px; }
.head3 .nav2 .nav2-menu li { display: inline; float: left; }

/* logged in header area */
.head4 { background:#444; height: 24px; width: 100%; }
.head4 .container { position: relative; height: 140px; }

.head4 .container .activity { 
    position: absolute; 
    right: 0; 
    top: 15px;  
    z-index: 100; 
    padding: 5px 15px 13px 15px; 
}
.show-activity, .have-activity {
    background: url(‘../images/default/bg/activity.png?1360067853‘); 
    -moz-border-radius-bottomleft: 5px; 
    -webkit-border-bottom-left-radius: 5px; 
    border-bottom-left-radius: 5px; 
    -moz-border-radius-bottomright: 5px; 
    -webkit-border-bottom-right-radius: 5px; 
    border-bottom-right-radius: 5px; 
    padding: 5px 15px 13px 15px; 
}
.show-activity .activity-wrap, .have-activity .activity-wrap {
    position:relative;
    top:-10px;
}
.show-activity {
    height: 15px; 
    width: 290px; 
}
html .have-activity {
    height:102px;
}
.show-activity .activity-wrap {
    background: url(‘../images/default/bg/activity-expander-open.png?1361812597‘) no-repeat right 6px;
}
.have-activity .activity-wrap {
background: url(‘../images/default/bg/activity-expander.png?1361812866‘) no-repeat right 6px;
}

.head4 .container .activity-wrap {

}
.head4 .container .activity h3  { 
    color: #f3f3f3; 
    font-size: 18px; 
    line-height:20px;
    font-family: "DIN Bold", sans-serif; 
}

.head4 .container .activity p { padding: 3px 0 6px 0; color: #557300; font-size: 12px; font-family: "DIN Bold", sans-serif; }
.head4 .container .activity .psychic { display: inline; float: left; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; background-color: #6f930a; color: #f3f3f3; padding: 5px; font-family:sans-serif;font-weight:normal !important; font-size: 15px; line-height:15px;}
.head4 .container .activity .estimate { display: inline; float: right; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; padding: 5px; background-color: #f3f3f3; color: #666666;font-family:sans-serif;font-size: 15px;line-height:15px; }
.head4 .container .activity .estimate .time { color: #6f930a; font-weight: bold; }
.head4 .container .activity .have-activity { font-family: "DIN Bold", sans-serif; color: white; font-size: 16px; line-height: 30px; }
.activity-description {width:100%;}
html body .activity-toggle {
    position:absolute;
    width:320px;
    height:50px;
    color:transparent;
    background:none;
    border:none;
    cursor:pointer;
    z-index:9;
}

.head4 .container .activity.compact { height: 30px; padding: 0 15px; }
.head4 .container .activity.compact h3, .head4 .container .activity.compact p, .head4 .container .activity.compact .psychic, .head4 .container .activity.compact .estimate { display: none; }
.head4 .container .activity.compact .have-activity { display: block; }

.head5 { background-color: white; }
.head5 .breadcrumbs { background: url(‘../images/default/bg/breadcrumbs.png?1360067854‘) 0 0 no-repeat; height: 20px; padding-left: 20px; padding-bottom: 5px; margin-top: 5px; margin-left: 10px; line-height: 20px; color: #999999; font-size: 12px; font-weight: bold; }
.head5 .breadcrumbs .chevron { float: left; padding: 0 8px; line-height: 20px; font-weight: normal; font-size: 8px; }
.head5 .breadcrumbs .item { padding: 0; float: left; }

.root .container { padding-top: 20px; }
.root .container .content { display: inline; float: left; /* width: 630px; removed and replaced with bootstrap widths */ display: inline; float: left; position: relative; /* width: 615px; removed and replaced with bootstrap widths */}
* html .root .container .content { overflow-x: hidden; }

.head2 .search .search-input .input-append {
padding-top:12px;
}
.input-append input, .input-append .add-on {
background:#006699;
border:1px solid #00537c;
color:#fff;
z-index:9;
}
.input-append .add-on {
width:30px;
}
.input-append .add-on i {
left:-4px;
position:relative;
}
.input-append, .input-prepend {
margin-right:10px;
}
.input-append .add-on:last-child, .input-append .btn:last-child {
width:20px;
}

.bs-docs-sidenav li{
border: 2px solid #E5F5FA;
border-radius: 5px;
clear:both;
cursor: pointer;
height: 75px;
margin-bottom: 5px;
position: relative;
text-align:center;
vertical-align:middle;
width: 130px;
}
html body .bs-docs-sidenav .active {
border:none;
height:85px;
}
html body .bs-docs-sidenav a, html body .bs-docs-sidenav a:hover {
background-color: transparent;
color:#0088CC;
display: table-cell;
font-size:14px;
font-weight:bold;
height: 75px;
vertical-align:middle;
width: 130px;
}
.root .container .bs-docs-sidebar {
display: inline;
*float:left;
}

html body .nav-list > li > a {padding:0;}

.share a{
text-decoration:none;
}

html body .bs-docs-sidenav .active a, html body .bs-docs-sidenav .active a:hover {

}
.sidebar-wrap {
float:left;
}
.root .container .sidebar { display: inline; height:100%;}
* html .root .container .sidebar { overflow-x: hidden; }
.root .container .sidebar + .content { display: inline; float: right; color: #333333;padding-right: 0; }
.root .container .sidebar .item { margin-bottom: 5px; display: table; height: 75px; cursor: pointer; width: 130px; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; border: 2px solid #e5f5fa; behavior: url("/stylesheets/PIE.htc"); position: relative; }
.root .container .sidebar .item .outer { display: table-cell; vertical-align: middle; width: 100%; margin: 0 auto; text-align: center; }
.root .container .sidebar .item .outer .inner { font-family: "DIN Bold", sans-serif; font-size: 14px; color: #0099cc; position: relative; padding: 0 5px; }
.root .container .sidebar .item .outer .inner .arrow { visibility: hidden; position: absolute; background: url(‘../images/default/bg/sidebar-arrow.png?1360067870‘); width: 7px; height: 24px; bottom: -5px; right: -12px; }
.root .container .sidebar .item.active { background: url(‘../images/default/bg/sidebar-button.png?1360067870‘); border: 5px solid #0099cc; }
.root .container .sidebar .item.active .outer .inner { color: #f3f3f3; }
.root .container .sidebar .item.active .outer .inner .arrow { visibility: visible; }
.root .container .sidebar .item.alt { border-color: #fef2e5; height: 25px; }
.root .container .sidebar .item.alt .outer .inner { color: #f88404; }
.root .container .sidebar .share { padding-top: 10px; margin-left: 30px; padding-bottom: 20px;width:100px; }

.share { color: #000; font-family: "DIN Bold", sans-serif; font-size: 12px; text-align: center; }
.share.horizontal .with { display: inline; }
.share.horizontal p { display: inline; padding: 0 15px 0 0; }
.share p { padding-bottom: 10px; }
.share .with { font-size: 18px; text-align: center; }
.share .with a { color: #000;height:25px; }
.share .with a:active, .share .with a:visited, .share .with a:hover { color: #000;height:25px;text-decoration:none; }
.share .with a + a { padding-left: 15px; }

.stay-sidebar {height:200px;}

/* note minor changes */
#footer {background-color: #f3f3f3; height:521px; color: #999999; font-size: 14px;margin-top:100px;width:100%;}
#footer .foot1 { height: 120px; background-color: #f3f3f3; }
#footer .foot1 .container { height: 120px;padding: 0 5px; background-color: #f3f3f3; }
#footer .foot1 .social { display: inline; float: left; margin-right: 10px; width: 350px; padding-right: 240px; height: 120px; }
* html #footer .foot1 .social { overflow-x: hidden; }
#footer .foot1 .social .icons-logo-small { display: inline; float: left; width: 52px; height: 52px; margin-top: 34px; margin-right: 40px; }
#footer .foot1 .social .meetus-on { display: inline; float: left; font-size: 22px; font-family: "DIN Light", sans-serif; line-height: 120px; margin-right: 15px; padding: 0; }
#footer .foot1 .social .icons-logo-twitter { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; width: 25px; height: 20px; margin-top: 50px; margin-right: 15px; }
#footer .foot1 .social .icons-logo-fb { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; width: 12px; height: 20px; margin-top: 50px; margin-right: 15px; }
#footer .foot1 .social .icons-logo-youtube { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; width: 53px; height: 20px; margin-top: 50px; }
#footer .foot1 .providers { display: inline; float: left; margin-right: 0; width: 350px; }
* html #footer .foot1 .providers { overflow-x: hidden; }
#footer .foot1 .providers .icons-logo-moneyback { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); display: inline; float: left; width: 53px; height: 53px; margin: 33.5px 30px 0 0; }
#footer .foot1 .providers .icons-logo-moneyback:hover { -webkit-filter: none; -moz-filter: none; filter: none; }
#footer .foot1 .providers .icons-logo-verysign { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); display: inline; float: left; width: 104px; height: 56px; margin: 32px 30px 0 0; }
#footer .foot1 .providers .icons-logo-verysign:hover { -webkit-filter: none; -moz-filter: none; filter: none; }
#footer .foot1 .providers .icons-logo-truste { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); display: inline; float: left; width: 127px; height: 35px; margin-top: 42.5px; }
#footer .foot1 .providers .icons-logo-truste:hover { -webkit-filter: none; -moz-filter: none; filter: none; }
#footer .foot2 { height:400px;border-top: 1px solid white; width: 100%; background-color: #f3f3f3; }
#footer .foot2 .container { height:280px;padding: 20px 0 100px 0; background-color: #f3f3f3; }
#footer .foot2 .foot-section { display: inline; float: left; margin-left:0;}
* html #footer .foot2 .foot-section { overflow-x: hidden; }
#footer .foot2 .foot-section .title { font-weight: bold; }
#footer .foot2 .foot-section .title + .title { padding-top: 16px; }
.foot2 .foot-section .foot-list { font-size: 12px; padding-top: 10px; }
.foot2 .foot-section .foot-list li { padding-bottom: 10px; list-style-type: none; list-style-position: outside; list-style-image: url(‘../images/default/bg/footer-list-item.png?1360067859‘); }
.foot2 .foot-section .foot-list li a { color: #999999; text-decoration: none;*text-indent:-10px;}
.foot2 .foot-section .foot-list li a:hover, #footer .foot2 .foot-section .foot-list li a:active, #footer .foot2 .foot-section .foot-list li a:visited { color: #999999; text-decoration: none; }
#footer .foot2 .vr { display: inline; float: left; margin: 0 12px; width: 1px; border-left: 1px dotted #999999; height: 180px; }

.loader { background: url(‘../images/default/loader-48.gif?1360067852‘) 0 0 no-repeat; display: block; padding-top: 10px; margin: 0 auto; width: 48px; height: 48px; }

.pager { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; }
.pager .pages { display: inline; font-size: 12px; }
.pager .pages a { text-decoration: underline; margin: 0 2px; }
.pager .next { display: inline; }
.pager .prev { display: inline; }
.pager .current { display: inline; color: #333333; font-weight: bold; }
.pager.compact { text-align: center; }
.pager.compact .current { display: inline; color: #666666; }
.pager.compact .of { color: #999999; display: inline; }

.availability .left { display: inline; float: left; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; behavior: url("/stylesheets/PIE.htc"); position: relative; font-family: "DIN Bold", sans-serif; font-size: 12px; height: 24px; width: 80px; padding: 8px; }
.availability .right { display: inline; float: left; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; behavior: url("/stylesheets/PIE.htc"); position: relative; font-family: "DIN Bold", sans-serif; font-size: 16px; line-height: 40px; text-align: center; height: 40px; width: 54px; position: relative; }
.availability .right .bottom { position: absolute; bottom: -16px; right: 0; width: 54px; height: 16px; }
.availability .right .supright { position: absolute; right: -15px; width: 15px; height: 40px; top: 0; }
.availability.ready .left { background: url(‘../images/default/bg/label-ready-left.png?1360067867‘) 0 0 repeat-x; color: #f3f3f3; }
.availability.ready .left strong { font-weight: normal; color: #729a00; }
.availability.ready .right { background: url(‘../images/default/bg/label-ready-right.png?1360067867‘) 0 0 repeat-x; color: #f3f3f3; }
.availability.ready .right .bottom { background: url(‘../images/default/bg/label-ready-bottom.png?1360067866‘); }
.availability.ready .right .supright { background: url(‘../images/default/bg/label-ready-supright.png?1360067868‘); }
.availability.busy .left { background: url(‘../images/default/bg/label-busy-left.png?1360067862‘) 0 0 repeat-x; color: #f3f3f3; }
.availability.busy .right { background: url(‘../images/default/bg/label-busy-right.png?1360067864‘) 0 0 repeat-x; color: #f3f3f3; line-height: inherit; padding-top: 2px; height: 38px; }
.availability.busy .right small { font-family: "DIN Regular", sans-serif; font-size: 11px; }
.availability.busy .right .bottom { background: url(‘../images/default/bg/label-busy-bottom.png?1360067861‘) 0 0 repeat-x; }
.availability.offline .left { background: url(‘../images/default/bg/label-offline-left.png?1360067865‘) 0 0 repeat-x; color: #f3f3f3; }
.availability.offline .right { background: url(‘../images/default/bg/label-offline-right.png?1360067866‘) 0 0 repeat-x; color: #f3f3f3; }
.availability.offline .right .bottom { background: url(‘../images/default/bg/label-offline-bottom.png?1360067864‘) 0 0 repeat-x; }

.item-border-8 {border:8px solid #F3F3F3;}
.item-border-4 {border:4px solid #F3F3F3;}

/* play video */
.play-button, html .bp .root .play-button{position:relative;margin:0 0 -75% 50%;width:60px !Important;height:60px !Important;}
.play-video {} 

/* added home.css */

.index h1 { font-size: 46px; color: #0099cc; padding: 10px; font-family: "DIN Light", sans-serif; }
.index h1 strong { font-family: "DIN Bold", sans-serif; font-weight: normal; }

/* home v2 */
.content { display: inline; float: left; margin-right: 0; width: 350px; display: inline; float: left; position: relative; margin: 0 -40px 1.5em 40px; }
* html .content { overflow-x: hidden; }
.intro { width: 100%; position: relative; }
.intro .poster { margin: 0 auto; display: block; margin-top: -4px; width: 100%; min-width: 960px; }
.intro .playicon { background: url(‘../images/default/bg/button-play-big.png?1360067857‘) 0 0 no-repeat; width: 100px; height: 100px; text-align: center; cursor: pointer; position: absolute; top: 19%; left: 50%; color: #f3f3f3; font-family: "DIN Bold", sans-serif; line-height: 100px; margin-left: -50px; }
.intro .teaser { position: absolute; top: 19%; color: #f3f3f3; font-family: "DIN Light", sans-serif; font-size: 62px; margin-top: 110px; width: 100%; text-align: center; display: block; left: 0; }
.intro .teaser strong { font-family: "DIN Black", sans-serif; font-weight: normal; }
.intro .cta { behavior: url("/stylesheets/PIE.htc");*background:#006699; position: relative; position: absolute; top: 19%; margin-top: 230px; height: 160px; left: 50%; margin-left: -325px; border: 3px solid #0099cc; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; background-color: rgba(0, 153, 204, 0.8); -pie-background: rgba(0, 153, 204, 0.8); padding: 20px 35px; color: #f3f3f3; }
.intro .cta ul { margin:0 0 10px 0;padding: 0; font-size: 18px; font-family: "DIN Regular", sans-serif;text-align:center; }
.intro .cta ul li { display: inline; list-style: decimal; padding-right: 10px; }
.intro .cta .getstarted { float: left; }
.intro .cta .customer-login { line-height: 18px; height: 18px; float: right; font-size: 14px; font-family: "DIN Bold", sans-serif; }
.intro .cta .customer-login a { color: #f3f3f3; text-decoration: underline; }
.intro .cta .customer-login a:hover, .intro .cta .customer-login a:visited, .intro .cta .customer-login a:active { color: #f3f3f3; }


.tour { background-color: #f3f3f3; padding-bottom: 90px; margin-bottom: 20px; }
.tour .span4 { padding: 35px 10px 35px 35px;}
.tour .span7  img { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; margin: 20px; width: 550px; height: 310px; }

.cta { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; display: inline; float: left; background-color: white; height: 68px; border: 1px #bfbfbf solid; border-bottom-width: 4px; margin-bottom:-60px;margin-left: 20px; font-family: "DIN Bold", sans-serif; font-size: 18px; padding: 15px 15px 15px 30px; position:relative;}
.cta .item { display: inline; float: left; }
.cta .item .step { color: #afd723; font-size: 22px; }
.cta .item .step-text { color: #0099cc; }
.cta .arrow { display: inline; float: left; background: url(‘../images/default/bg/arrow.png?1360067854‘) no-repeat; height: 60px; width: 36px; font-size: 50px; color: #f3f3f3; margin: 5px 20px 0 20px; }
.cta .getstarted { display: inline; float: right; line-height: 58px; }
.cta .getstarted .btn { margin-top: 4px; }
.pros { padding-top: 20px; }
.pros .column { text-align: justify; padding-right: 20px; padding-left: 20px; }
.pros .column .head { color: #0099cc; font-family: "DIN Bold", sans-serif; padding-bottom: 10px; text-align: left; }
.pros .column .img img { display: inline; float: left; margin-right: 10px; width: 190px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; padding-bottom: 10px; }
* html .pros .column .img img { overflow-x: hidden; }
.pros .column .text { font-size: 15px; color: #333333; padding-bottom: 10px; }
.pros .column .link { font-size: 14px; font-weight: bold; text-align: left; color: #006699; display: block; padding-bottom: 40px; text-decoration: underline; }

/* how it works css */

.steps { padding-top: 30px; position:relative;z-index:7;}
.steps .chevron { display: inline; float: left; font-size: 60px; color: #f3f3f3; padding: 0 40px; }
.steps .item { display: inline; float: left; }
.steps .item .step { color: #afd723; font-size: 60px; font-family: "DIN Bold", sans-serif; height: 60px; display: inline; float: left; }
.steps .item .step-text { font-family: "DIN Bold", sans-serif; font-size: 20px; color: #0099cc; height: 60px; display: inline; float: left; padding-left: 10px; padding-top: 10px; }

.item .center {margin-top:-40px;}

.ipads { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f3f3f3)); background: -webkit-linear-gradient(#ffffff, #f3f3f3); background: -moz-linear-gradient(#ffffff, #f3f3f3); background: -o-linear-gradient(#ffffff, #f3f3f3); -pie-background: linear-gradient(#ffffff, #f3f3f3); background: linear-gradient(#ffffff, #f3f3f3); -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; behavior: url("/stylesheets/PIE.htc"); position: relative; text-align: center; padding-top: 10px; padding-bottom: 30px; }
.ipads .ipad { display: inline; padding: 0 10px; position: relative; }
.ipads .ipad .getstarted { position: absolute; bottom: -10px; left: 0; width: 100%; }
.ipads .notipad { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; display: inline; position: relative; }
.ipads .notipad .getstarted { position: absolute; bottom: -10px; left: 0; width: 100%; }
.fullinfo { background: #F3F3F3;text-align: left; padding: 50px 30px 0 30px; position:relative; margin-left: 710px; overflow: hidden; top:-60px;width:94%; }
.fullinfo h3 { font-family: "DIN Bold", sans-serif; color: #0099cc; font-size: 22px; }
.fullinfo .step { color: #afd723; font-size: 42px; display: inline; }
.fullinfo .button-close { float: right; margin: 10px; }
.fullinfo.hidden { display: none; margin-left: 710px; }

/* why choose us css */

ul.best_psychics { background: #f3f3f3; border: 10px solid #f3f3f3; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; margin-left: 10px; padding: 0 0 50px 0; }
ul.best_psychics li { background-repeat: no-repeat; margin-top: 10px; padding: 10px 10px 10px 20px; list-style: none; background: white; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; position: relative; font-family: Arial, sans-serif; font-weight: bold; font-size: 14px; }
ul.best_psychics li .ok { background: url(‘../images/default/bg/why-listitem.png?1360067872‘) 0 0 no-repeat; position: absolute; left: -25px; width: 40px; height: 60px; }
ul.best_psychics li.last { padding-bottom: 20px; }
ul.best_psychics li:first-child { margin-top: 0; }
ul.best_psychics li:last-child { margin: 0; padding: 0; width: 100%; background-color: #f3f3f3; }
ul.best_psychics li:last-child .ok { background: url(‘../images/default/bg/why-list-ok.png?1360067872‘) 0 0 no-repeat; width: 60px; height: 80px; left: 105px; top: -10px; }

/* how we can help css */

.specializations { width: 100%; padding: 30px 0; }
.specializations .special { float: left; width: 20%; }
.specializations .special.closed { width: 15%; }
.specializations .special.open { width: 40%; }
.specializations .doubt { margin-right: 0; }

/* added.css */

    /* bootstrap overrides */
    html p {margin-bottom:0;}
    html .thumbnail {border:0;padding:0;}
    
    /* search area */
                .head2 .search .search-input .input-append {
                    padding-top:12px;
                }
                html body .input-append input, html body .input-append .add-on {
                    background:#fff;
                    border:1px solid #333;
                    color:#999;
                    z-index:9;
                }
                html body .input-append .add-on {color:#777 !important; text-shadow:0 1px 0 #ccc !important;}
                .input-append .add-on {
                    width:30px;
                }
                .input-append .add-on i {
                    left:-4px;
                    position:relative;
                }
                .input-append, .input-prepend {
                    margin-right:10px;
                }
                .input-append .add-on:last-child, .input-append .btn:last-child {
                    width:20px;
                }
                
    /* logo + menu */
        .nav2 .nav2-btn, .nav2 .nav2-btn-alt {
            text-decoration:none;
        }
                
                /* side bar */
                .bs-docs-sidenav li, html body .to-top{
                    border: 2px solid #ccc;
                    border-radius: 5px;
                    clear:both;
                    cursor: pointer;
                    height: 75px;
                    margin-bottom: 5px;
                    position: relative;
                    text-align:center;
                    vertical-align:middle;
                    width: 130px;
                }
                html body .bs-docs-sidenav .active {
                    background:#555;
                    border:none;
                    height:85px;
                    width:133px;
                    
            
                }
                html body .bs-docs-sidenav a, html body .bs-docs-sidenav a:hover, html body .to-top a, html body .to-top a:hover {
                    background-color: transparent;
                    color:#555;
                    display: table-cell;
                    font-size:14px;
                    font-weight:bold;    
                    height: 75px;
                    vertical-align:middle;
                    width: 130px;
                }
                .root .container .bs-docs-sidebar {
                    *float:left;
                    
        
                }
                
                /*social */
                .share a{
                    text-decoration:none;
                }
                /* bootstap sidebar style overwrite */
                html body .bs-docs-sidenav .active a, html body .bs-docs-sidenav .active a:hover {
                    background-color:transparent;
                
                }
                .sidebar-wrap {
                    float:left;
                }
                html body .to-top {
                    margin-left:15px;
                    border-color:#fef2e5 !important;
                    color:#f88404 !important;
                    height:45px !important;
                }
                html body .to-top a {
                    color:#f88404 !important;
                    height:35px !important;
                    text-decoration:none !important;
                }
                
                html #footer .foot1 .social {
        padding-right:220px;
    }
    </style>

    <script>
  window.console = window.console || function(t) {};
  window.open = function(){ console.log("window.open is disabled."); };
  window.print   = function(){ console.log("window.print is disabled."); };
</script>

    
    
  </head>

  <body class="bp" data-spy="scroll" data-target=".bs-docs-sidebar">

    


    <link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" media="screen, projection" rel="stylesheet" type="text/css">    
     <link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->    
    <style type="text/css">
    input, textarea { color: #fff; }
.placeholder { color: #fff; }
    </style>
    


<div class="head1">
    <div class="container">
        <div class="row">
        <div class="nav">
            <div class="buttons row pull-right">
                <a class="basic-btn support" alt="Support" href="1040_Support.html">Support</a>
                <a class="basic-btn aboutus" alt="About Us" href="1050_AboutUs.html">About Us</a>
                <a href="#" alt="Log in" class="iconic-btn login"><i class="icon-signin"></i>

                <div class="divider"></div>
                <span>Log in</span></a>
            </div>
        </div>
    </div>
    </div>
</div>
<div class="head2">
    <div class="container">
        <div class="row">
            <div class="nav-divide"></div>
            <div class="search">
                <div class="care-phone care span4" alt="Customer Care">
                    <i class="icon-phone"></i> Customer Care: <a href="#">1.555.555.5555</a>
                </div>
                <div class="care-chat care span4" alt="Customer Care Chat">
                    <i class="icon-comments"></i> Customer Care Chat: <a href="#">Click Here</a>
                </div>
                <div class="search-input span4">
                    <div class="input-append">
                        <input type="text" name="search" placeholder="Placeholder text">
                        <div class="add-on">
                            <i class="icon-search"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="navbar-fixed fixed affix-top" data-spy="affix" data-offset-top="80">
    <div class="head3">
        <div class="container">
            <div class="row">
            <div class="nav2 span12">
                <div class="row">
                    <div class="logoholder span4">
                        <a href="/">
                            <span class="icons-logo "></span>
                           </a>
                       </div>
                       <div class="span8">
                 <ul class="nav2-menu row hidden-phone hidden-tablet">
                    <li>
                        <div class="nav2-btn">
                            <div class="outer">
                                <a class="inner" href="#" alt="Menu Item 1">Menu Item 1</a>
                            </div>
                            <div class="arrow"><div class="arrowInner">
                        </div>
                    </div></div></li>
                    <li>
                        <div class="nav2-btn">
                            <div class="outer">
                                <span>
                                    <a class="inner" href="#" alt="Menu Item 2">Menu Item 2</a>
                                </span>
                            </div>
                            <div class="arrow"><div class="arrowInner"></div></div>
                        </div>
                    </li>
                    <li>
                        <div class="nav2-btn current">
                            <div class="outer">
                                <a class="inner" href="#" alt="Menu Item 3">Menu Item 3</a>
                            </div>
                            <div class="arrow"><div class="arrowInner">
                        </div>
                    </div></div></li>
                   
                    <li>
                        <div class="nav2-btn nav2-btn-alt">
                            <div class="outer">
                                <a class="inner" href="#" alt="Btn Special - Easy as 1-2-3"><strong>Btn&nbsp;Special</strong><br><span>Easy as 1-2-3</span></a>
                            </div>
                            <div class="arrow"><div class="arrowInner">
                        </div>
                    </div></div></li>
                </ul>
                <div class="navbar-inner visible-phone visible-tablet">
                    <div class="container ">
                      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </button>
                      <a class="brand" href="">CP</a>
                      <div class="nav-collapse collapse">
                        <ul class="nav">
                          <li class="">
                            <a href="#">Menu Item 1</a>
                          </li>
                          <li class="">
                            <a href="#">Menu Item 2</a>
                          </li>
                          <li class="active">
                            <a href="#">Menu Item 3</a>
                          </li>
                         
                          <li class="">
                            <a href="#">Btn&nbsp;Special</a>
                          </li>
                        </ul>
                      </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
            <div class="clear-both"></div>
        </div>
    </div>
    <div class="head4"></div>
    <div class="head5">
        <div class="container">
            <div class="breadcrumbs">
                <div class="icon"></div>
                <div class="item">Level 1</div>
                <div class="clear-both"></div>
            </div>
        </div>
    </div>
</div><!--end top nav -->
</div>

<div class="root">
    <div class="container">
        <div class="row">
            
    
            <div class="span2 sidebar bs-docs-sidebar">    
                <div class="bs-docs-sidenav affix-top">
                <ul class="nav nav-list">
                    <li class="active">
                        <a href="#part1">Part 1</a>
                    </li>        
                    <li>
                        <a href="#part2">Part 2</a>
                    </li>
                    <li>
                        <a href="#part3">Part 3</a>
                    </li>
                    <li>
                        <a href="#part4">Part 4</a>
                    </li>
                    
                    <li>
                        <a href="#part5">Part 5</a>
                    </li>
                </ul>
                    
                <div class="clearfix"></div>
                <div class="to-top">
                            <a name="To the top of the page" href="#">To the Top</a>
                        </div>
                <div class="share">
                    <p>Share with:</p>

                    <span class="with">
                        <a href="#" class="icon-envelope-alt"></a>
                        <a href="#" class="icon-twitter"></a>
                        <a href="#" class="icon-facebook"></a>
                    </span>

                </div>
            </div>
            </div>    <!-- end sidebar -->        
            
        
 <div class="content span10" style="*float:right;">
            <section id="part1">
                    
                <h1>Part 1</h1>

                <h5>Part 1 Sub Header</h5>

                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry‘s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

                </p>

                <p class="center">
                    <a href="#" class="btn btn-small btn-warning">
                        <i class="icon-angle-right"></i>Take advantage of our introductory offer
                    </a>
                </p>
                <div class="clearfix"></div>
                <hr>
            </section>
           
            <section id="part2">
                <h1>Part 2</h1>

                <h5>Part 2 Sub Header</h5>
                <div class="row">
                <div class="span4 pull-right"> 
                <div style="background:#000;display:block;height:300px;width:300px;"></div>
                </div>
                <div class="span5">
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry‘s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

                </p>
                    </div>
                </div>
                    
                    <div class="clearfix"></div>
                    <p class="center">
                        <a href="#" class="btn btn-small btn-warning">
                            <i class="icon-angle-right"></i>Take advantage of our introductory offer
                        </a>
                    </p>
                <div class="clearfix"></div>
            <hr>
            </section>

            <section id="part3">

                <h1>Part 3</h1>

                <h5>Part 3 Sub Header</h5>

                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry‘s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

                </p>

                <p>
                    <a href="#">Link</a>
                </p>

                <div class="clearfix"></div>
            <hr>
            </section>

           <section id="part4">

           <h1>Part 4</h1>

                <h5>Part 4 Sub Header</h5>
                
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry‘s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>And more</li>
            </ul>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry‘s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

            <p><a href="#">Link</a></p>
            <div class="clearfix"></div>
            <hr>
            </section>

           <section id="part5">

            <h1>Part 5</h1>

           

           <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry‘s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

                </p>
                
            <div class="clearfix"></div>
            <hr>
            </section>

        </div><!-- content div -->
    </div>
</div><!-- end container div -->
</div><!-- end root div -->


<div id="footer">
    <div class="foot1 container">
        <div class="row">
            <span class="social span7">
                <a class="icons-logo-small" href="/"></a>

                <p class="meetus-on">Share Section: </p>
                <a href="#" class="icons-logo-twitter"></a>
                <a href="#" class="icons-logo-fb"></a>
                <a href="#" class="icons-logo-youtube"></a>
            </span>
            <span class="providers span5">
                <a href="#" class="icons-logo-moneyback"></a>
                <a href="#" class="icons-logo-verysign"></a>
                <a href="#" class="icons-logo-truste"></a>
            </span>
        </div>
    </div>
  <div class="foot2">
        <div class="container">
            <div class="row">
            <div class="span2 foot-section">
                <span class="title">Section 1</span>
                <ul class="foot-list">
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                </ul>
            </div>
            <div class="span2 foot-section">
                <span class="title">Section 2</span>
                <ul class="foot-list">
                     <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                </ul>
            </div>
            <div class="span2 foot-section">
                <span class="title">Section 3</span>
                <ul class="foot-list">
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                </ul>
            </div>
            <div class="span2 foot-section">
                <span class="title">Section 4</span>
                 <ul class="foot-list">
                     <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                </ul>
            </div>

            <div class=" span2 foot-section">
                <span class="title">Section 5</span>
                <ul class="foot-list">
                     <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                </ul>
            </div>
            <div class="span2 foot-section">
                <span class="title">Section 6</span>
                <ul class="foot-list">
                     <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                </ul>
            </div>
        </div>
    </div>
    </div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-1.7-development-only.js"></script>
    <script type="text/javascript">
        Modernizr.load([{
  test: Modernizr.input.placeholder,
  nope : ‘/js/lib/polyfils/placeholder.js‘
}]);
    </script>
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script type="text/javascript">
    var offset = 120;

$(‘.bs-docs-sidenav a‘).click(function(event) {
    event.preventDefault();
    $($(this).attr(‘href‘))[0].scrollIntoView();
    scrollBy(0, -offset);
});
    </script>
    
    <!-- affix script -->
    <script type="text/javascript">
setTimeout(function () {
      $(‘.bs-docs-sidenav‘).affix({
        offset: {
          top: 0
        , bottom: 540
        }
      })
    }, 100)
    </script>

      <script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-6c99970ade81e43be51fa877be0f7600.js"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

        <script>
      !function ($) {
    ‘use strict‘;
    var Affix = function (element, options) {
        this.options = $.extend({}, $.fn.affix.defaults, options);
        this.$window = $(window).on(‘scroll.affix.data-api‘, $.proxy(this.checkPosition, this)).on(‘click.affix.data-api‘, $.proxy(function () {
            setTimeout($.proxy(this.checkPosition, this), 1);
        }, this));
        this.$element = $(element);
        this.checkPosition();
    };
    Affix.prototype.checkPosition = function () {
        if (!this.$element.is(‘:visible‘))
            return;
        var scrollHeight = $(document).height(), scrollTop = this.$window.scrollTop(), position = this.$element.offset(), offset = this.options.offset, offsetBottom = offset.bottom, offsetTop = offset.top, reset = ‘affix affix-top affix-bottom‘, affix;
        if (typeof offset != ‘object‘)
            offsetBottom = offsetTop = offset;
        if (typeof offsetTop == ‘function‘)
            offsetTop = offset.top();
        if (typeof offsetBottom == ‘function‘)
            offsetBottom = offset.bottom();
        affix = this.unpin != null && scrollTop + this.unpin <= position.top ? false : offsetBottom != null && position.top + this.$element.height() >= scrollHeight - offsetBottom ? ‘bottom‘ : offsetTop != null && scrollTop <= offsetTop ? ‘top‘ : false;
        if (this.affixed === affix)
            return;
        this.affixed = affix;
        this.unpin = affix == ‘bottom‘ ? position.top - scrollTop : null;
        this.$element.removeClass(reset).addClass(‘affix‘ + (affix ? ‘-‘ + affix : ‘‘));
    };
    var old = $.fn.affix;
    $.fn.affix = function (option) {
        return this.each(function () {
            var $this = $(this), data = $this.data(‘affix‘), options = typeof option == ‘object‘ && option;
            if (!data)
                $this.data(‘affix‘, data = new Affix(this, options));
            if (typeof option == ‘string‘)
                data[option]();
        });
    };
    $.fn.affix.Constructor = Affix;
    $.fn.affix.defaults = { offset: 0 };
    $.fn.affix.noConflict = function () {
        $.fn.affix = old;
        return this;
    };
    $(window).on(‘load‘, function () {
        $(‘[data-spy="affix"]‘).each(function () {
            var $spy = $(this), data = $spy.data();
            data.offset = data.offset || {};
            data.offsetBottom && (data.offset.bottom = data.offsetBottom);
            data.offsetTop && (data.offset.top = data.offsetTop);
            $spy.affix(data);
        });
    });
}(window.jQuery);
      //@ sourceURL=pen.js
    </script>

    
    <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>

    
  

 
</body></html>

固定侧边栏/导航栏布局

自己参考了相关资料，实现了部分布局，但是很多地方还有问题

1）滚动时，侧边栏虽然可以固定，但是宽度发生了变化

2）滚动到顶部后，侧边栏不能回归到原来的位置

一、侧边栏固定

实现思路是这样的：

首先获取需要跟随的DIV距离页面顶部的距离（offset.top），然后判断，当浏览器滚动的距离($(window.scrollTop))大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。

这时候可能出现一个问题，因为fixed之后，侧边栏脱离了页面流，因此需要是事先为主体部分设置大于等于侧边栏高度的padding，如果是bootstrap网格布局，fixed之后，需要为主体部分设置和是的col-offset

<!doctype html>
<html lang="zh-hans">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="css/test.css">
    <title>test</title>
</head>
<body>
<div id="main">
    <div id="sidebar">
        
            侧边栏相关内容
    
    </div>
    <div id="content">
        <p>
 实现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。
    需要跟随浏览器固定的DIV添加.fixed_side类
     实现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。
    需要跟随浏览器固定的DIV添加.fixed_side类
     实现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。
    需要跟随浏览器固定的DIV添加.fixed_side类
     实现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。
    需要跟随浏览器固定的DIV添加.fixed_side类
     实现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。
    需要跟随浏览器固定的DIV添加.fixed_side类
     实现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。
    需要跟随浏览器固定的DIV添加.fixed_side类
     实现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。
    需要跟随浏览器固定的DIV添加.fixed_side类
     实现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。
    需要跟随浏览器固定的DIV添加.fixed_side类
     实现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。
    需要跟随浏览器固定的DIV添加.fixed_side类
     实现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。
    需要跟随浏览器固定的DIV添加.fixed_side类
     实现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。
    需要跟随浏览器固定的DIV添加.fixed_side类实现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。
    需要跟随浏览器固定的DIV添加.fixed_side类
     实现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。
    需要跟随浏览器固定的DIV添加.fixed_side类
     实现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。
    需要跟随浏览器固定的DIV添加.fixed_side类
     实现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。
    需要跟随浏览器固定的DIV添加.fixed_side类
     实现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。
    需要跟随浏览器固定的DIV添加.fixed_side类
     实现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。
    需要跟随浏览器固定的DIV添加.fixed_side类
     实现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。
    需要跟随浏览器固定的DIV添加.fixed_side类
     实现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。
    需要跟随浏览器固定的DIV添加.fixed_side类
     实现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。
    需要跟随浏览器固定的DIV添加.fixed_side类
     实现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。
    需要跟随浏览器固定的DIV添加.fixed_side类
     实现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。
    需要跟随浏览器固定的DIV添加.fixed_side类
    
        </p>
    </div>
    </div>
    <script src="lib/jquery-2.1.4.min.js"></script>
    <script src="js/test.js"></script>
</div>

</body>

侧边栏固定的html布局

#sidebar{
    float:left;
    width:20%;
    border:1px solid #000;
    height:500px;
}
#content p{
/*padding-left是相对于父元素，而非本身*/
    padding-left:20%;
    width:80%;
 
}
.fixed{
    position:fixed;
    top:10px;
    left:0
    
}

侧边栏固定的样式布局

//首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。
$(function(){
    var $sidebar=$("#sidebar");
    var offset=$sidebar.offset();
    $(window).scroll(function(){
        var scrollTop=$(window).scrollTop();
        if(offset.top<scrollTop){
            $sidebar.addClass("fixed");            
        }else{
            $sidebar.removeClass("fixed");
        }
    });
    
})

侧边栏固定的jquery代码

二、侧边栏随着页面的滚动而滚动

可以参考这篇博客中的案例二

http://www.jiawin.com/wordpress-sidebar-scroll

侧边栏固定的布局

标签：

原文地址：http://www.cnblogs.com/bobodeboke/p/4565382.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行