/* Feature Guide Wrapper and Header */
@font-face {
  font-family: 'Proxima Nova';
  src: url("/ProximaNova-Regular.otf") format('opentype');
  font-style: normal;
}

@font-face {
  font-family: 'Proxima Nova Bold';
  src: url("/ProximaNova-Bold.otf") format('opentype');
  font-style: bold;
}
b { font-family: "Proxima Nova Bold","Helvetica","Arial","Verdana",sans-serif; }
.visual { padding: 10px 0 0 18px; margin-top:20px }
.visual img
{
    padding: 0;
    margin: 0
}

#title-and-summary {
    width:100%;
    margin:0 auto;
    color:#737373
}
#title-and-summary p { width: 940px }
#title-and-summary h1 {margin:16px 0 9px !important; color:black; font-size:27px;}

/* breadcrumbs */
.breadcrumbs{width:992px;background: url(images/bg-breadcrumbs-c.png) repeat-x;position:absolute;top:0;}
.breadcrumbs-holder{width:992px;background: url(images/bg-breadcrumbs-l.png) no-repeat;}
.breadcrumbs ul{width:989px;background: url(images/bg-breadcrumbs-r.png) no-repeat 100% 0;overflow:hidden;margin:0;padding:0 0 0 3px;list-style:none;}
.breadcrumbs li{float:left;margin:0 0 0 8px;padding:6px 0 0;display:inline;color:#000;}
.breadcrumbs li a{float:left;background: url(images/bg-breadcrumbs-a.png) no-repeat 100% 0;height:24px;padding:6px 19px 0 11px;margin:-6px 0 0 -8px;position:relative;color:#000;}
.breadcrumbs a span{background: url(images/bg-breadcrumbs-home.png) no-repeat 0 3px;width:14px;height:24px;display:block;text-indent:-9999px;overflow:hidden;}

/* Feature Image w/ Rollover Commentary */

#rollover-wrapper {
    height:480px;
    position:relative
}

#rollover-comments-box {
    color:black !important;
    padding-left: 19px;
    position: absolute;
    background: url(images/feature-rollover-box-pointer.png) no-repeat 0px 35%;
    z-index: 4;
    right: 10px;
    top: 30px
}
.box-holder {
    height:330px;
    line-height:16px;
    margin:0;
    padding:13px 19px;
    width:150px;
    background:#E5E5E5;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
hr#box-top {height:15px; border:0px; background:black; margin:0; padding:0; background:#E5E5E5; background: url(images/feature-rollover-box-top.png) no-repeat -1px 0;}
hr#box-base{height:15px; border:0px; background:black; margin:0; padding:0; background:#E5E5E5; background: url(images/feature-rollover-box-bottom.png) no-repeat -1px 0;}
.box p {margin:0 0 5px; font-size:11px;}

/** how-to content **/

#how-to-content {
    width:930px;
    line-height:18px;
    margin:0 auto;
    padding:24px 0 42px
}

/* sidebar */

#sidebar {
    float:left;
    line-height:18px;
    padding:10px 0 0;
    width:250px
}
#sidebar p { margin:0 0 7px }
#sidebar h3 {
    margin:0 0 8px 15px;
    font-size:13px;
    line-height:36px;
    color:#000
}
#sidebar ul li div { display: none }


/* sidebar (how-to) nav */

.navbar {
    background:none repeat scroll 0 0 #FFFFFF;
    border:1px solid #E5E5E5;
    list-style:none outside none;
    margin:0;
    padding:0;
    width:250px;
    font-family: "Proxima Nova","Helvetica","Arial","Verdana",sans-serif;
    font-size: 13px;
    line-height: 1.5
}
.navbar li {
    line-height:15px;
    vertical-align:top;
}
.navbar li a {
    background:url(images/sidebarnav-arrow-grey.png) no-repeat scroll 226px 6px transparent;
    display:block;
    padding:6px 0 5px 15px;
    color:#000;
    cursor: pointer;
    text-decoration:none;
    font-weight:normal
}
.navbar li a:hover {
    background:url(images/sidebarnav-arrow-blue.png) no-repeat scroll 226px 6px transparent;
    color:#0088CC
}
.navbar li.active {
    background:url(images/bg-navbar-h.png) repeat-x scroll 0 100% #F4F4F4;
    color:#000000;
    text-decoration:none
}
.navbar li.active a:hover { color: #000 }
.navbar li.active a { background:url(images/bg-navbar-mh.png) no-repeat scroll 0 50% transparent }

/* How to Articles */

.article {
    background:url(images/bg-article-l.png) no-repeat scroll 0 60px transparent;
    float:right;
    line-height:20px;
    padding:0 0 0 20px;
    width:645px;
    margin-bottom: 35px
}
.article h2 { margin:0 0 14px; font-size:18px; line-height:30px }
.article-holder {
    background-color:#f0f0f0;
    padding:32px 60px 20px 53px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px
}
.article-holder p #box1 {
  max-width: 280px;   
}

#screens {
    background-color: transparent;
    width:756px;
    overflow: hidden;
    position: absolute;
    height: 100%
}
#screens .wrp { width: 99999px; position: relative }
#screens .nvs {
    padding: 0 10px;
    position: absolute;
    bottom: 0;
    width: 24px;
    height: 43px
}
#screens ul.wrp li map p { display: none }
#job-tasks, #timeline, #job-wall, #ToDos, #asset-manager, #job-snapshot {
    float: left
}

#screens ul.wrp li map area
{
    cursor: pointer
}
#screens img { max-width:100% }
.scnavs
{
    bottom: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none 
}
a.cprev, a.cnext {
    width: 26px;
    height: 26px;
    line-height: 22px;
    text-align: center;
    display: none;
    background: #E5E5E5;
    color: #4D4D4D;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 22px Arial,sans-serif;
    -webkit-border-radius: 26px;
    -moz-border-radius: 26px;
    border-radius: 26px;
    -webkit-box-shadow: 0 0 4px #F0EFE7;
    -moz-box-shadow: 0 0 4px #F0EFE7;
    box-shadow: 0 0 4px #F0EFE7;
    cursor: pointer;
    margin: 0 10px
}
.pgn a
{
    width: 12px;
    height: 12px;
    display: inline-block;;
    background: #E5E5E5;
    color: #4D4D4D;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-box-shadow: 0 0 2px #F0EFE7;
    -moz-box-shadow: 0 0 2px #F0EFE7;
    box-shadow: 0 0 2px #F0EFE7;
    opacity: .65;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=65);
    filter: alpha(opacity=65);
    border: #4D4D4D 2px solid;
    margin: 0 3px
}
.pgn a.active {
    background: #4D4D4D;
    opacity: 1;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    filter: alpha(opacity=100);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
    border: none;
    margin: 0 3px 2px 3px;
}
.callout {
    border: 1px solid #333;
    margin: 15px;
    padding: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 4px #F0EFE7;
    -moz-box-shadow: 0 0 4px #F0EFE7;
    box-shadow: 0 0 4px #F0EFE7;
}