﻿/* ciena.com home page style sheet */
/* Copyright 2010, Ciena Corporation */
/* block level elements
------------------------------------------------------ */
/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
* {
    margin: 0;
    padding: 0;
}
body {
    background: #fff;
    font: normal 11px/14px Arial, sans-serif;
    color: #2b2b2b;
}
img {
    border: 0px none;
}
a {
    color: #2b2b2b;
    text-decoration: none;
}
a:hover {
    color: #da1415;
}
/* header with 2009 primary navigation styles
------------------------------------------------------ */
#header {
    width: 969px;
    height: 85px;
    position: relative;
    margin: 0 auto 0 auto;
    padding: 0 0 0 0;
    color: #ffffff;
    z-index: 950;
    font-size: 12px;
}
#ciena_logo {
    margin: 0 0 0 18px;
    position: absolute;
    top: 15px;
}
#social_search {
    width: 220px;
    position: absolute;
    top: 10px;
    right: 0;
}
.page_rule {
    display: none;
}
/* social media links */
#social_links {
    width: 109px;
    float: left;
    margin: 2px 0 0 0;
    padding: 0 0 0 0;
}
#social_links li {
    float: left;
    margin-right: 7px;
    list-style-type: none;
}
#contact_link {
    margin: 4px 15px 0 0;
    float: left;
}
/* search form */
#search_con {
    float: left;
    width: 134px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: 1px solid #dadada;
    background: #fff url(/img/css/home/search_icon.jpg) no-repeat scroll 119px 4px;
}
#w {
    width: 105px;
    margin: 0 0 0 0;
    padding: 3px 0 3px 5px;
    background: transparent none;
    border: none;
    font-size: 11px;
}
/* Smart search */
#smart_search {
width: 299px;
top: 30px;
right: 20px;
position: absolute;
z-index: 10;
display: none;
font-size: 11px;
text-align: left;
z-index: 999;
}
#smart_search ul {
width: 299px;
float: left;
margin: 0px;
padding: 10px 0px 0px 0px;
background: transparent url(/img/css/smart_search_bg.png) repeat-y top left;
}
#smart_search ul li {
list-style: none none;
padding: 0px 25px 6px 35px;
background: transparent url(/img/css/icon_arrow.gif) no-repeat 22px 2px;
}
#smart_search li.skip {
padding: 3px 23px;
background: transparent url(/img/css/smart_search_skip_bg.png) no-repeat 5px 0px;
}
#smart_search li.current a {
color: #da1415 !important;
}
#smart_search a {
text-decoration: none;
text-transform: none;
color: #424242;
}
#smart_search_top {
width: 250px;
height: 12px;
float: left;
padding: 7px 25px 5px 24px;
background: transparent url(/img/css/smart_search_top_bg.png) no-repeat top left;
color: #fff;
}
#smart_search_top a {
color: #fff;
}
#smart_search_bottom {
width: 299px;
height: 7px;
float: left;
background: transparent url(/img/css/smart_search_bottom_bg.png) no-repeat top left;
}
/* primary navigation */
#header #pri_navigation {
    width: 949px;
    margin: 0 0 0 9px;
    padding: 0 0 0 0;
    position: absolute;
    top: 54px;
    z-index: 980;
    zIndex: 980;
}
#header #pri_navigation a {
    color: #2B2B2B;
    text-decoration: none;
}
#header #pri_navigation li {
    float: left;
    list-style-type: none;
    padding: 6px 9px 6px 9px;
}
#header #pri_navigation li:hover {
    background-color: #46423D;
    opacity: 0.96;
}
#header #pri_navigation li:hover a {
    color: #FFFFFF;
}
#header #pri_navigation a:hover {
    color: #FFFFFF !important;
}
#header #pri_navigation .nav_divider {
    padding: 6px 0 6px 0;
}
#header #pri_navigation li.nav_divider {
    color: #2B2B2B;
}
#header #pri_navigation .nav_divider:hover {
    background-color: transparent;
}
#header #pri_navigation li div.dropdown {
    display: none;
    position: absolute;
    top: 26px;
    margin: 0 0 0 -9px;
    padding: 10px;
    background-color: #46423D;
    font-size: 13px;
    z-index: 960;
}
#header #pri_navigation li div.js {
    display: block;
}
#header #pri_navigation li div.dropdown.products {
    width: 636px;
    height: 112px;
}
#header #pri_navigation li div.dropdown a:hover {
    color: #a4a4a4 !important;
}
#header #pri_navigation li:hover div {
    display: block;
}
#header #pri_navigation li div.dropdown .dropdown_section {
    height: 111px;
    float: left;
    border-right: 1px solid #808080;
    margin-right: 10px;
}
#header #pri_navigation li div.dropdown .dropdown_section.last {
    border-right: none;
}
#header #pri_navigation li div.dropdown ul {
    width: 200px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    font-size: 12px;
}
#header #pri_navigation li div.dropdown.products ul {
    margin: 3px 0 0 0;
}
#header #pri_navigation li div.dropdown ul li {
    float: none;
    margin: 0 0 0 15px;
    padding: 0 0 0 0;
    list-style-image: url(/img/css/home/arrow_dwn.png);
}
#header #pri_navigation li.ie6hover div.dropdown ul li {
    list-style-image: url(/img/css/arrow_dwn_gray.gif) !important;
}
#header #pri_navigation li#worldwide {
    margin: 0 0 0 21px;
    padding: 6px 11px 6px 26px;
    background: url(/img/css/home/worldwide_bullet_gray.png) no-repeat 10px 7px;
    position: relative;
}
#header #pri_navigation li#worldwide:hover,
#header #pri_navigation li#worldwide.ie6hover {
    background: url(/img/css/home/worldwide_bullet.png) no-repeat 10px 7px;
    background-color: #46423D;
}
#header #pri_navigation li#worldwide .dropdown {
    position: absolute;
    right: 0;
}
#header #pri_navigation li#worldwide .dropdown ul {
    width: 140px;
    text-align: right;
}
#header #pri_navigation li#worldwide div.dropdown ul li,
#header #pri_navigation li#worldwide.ie6hover div.dropdown ul li {
    list-style-image: none !important;
    border-top: 1px solid #808080;
    margin: 0 0 0 0;
    padding-top: 3px;
    padding-bottom: 3px;
}
#header #pri_navigation li#worldwide div.dropdown ul li#top {
    border-top: none;
}
#header #pri_navigation li.ie6hover {
    background-color: #46423D;
    opacity: 0.96;
}
#header #pri_navigation li.ie6hover a {
    color: #ffffff;
}
/* home page content well
------------------------------------------------------ */
#home_content {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-width: 1013px;
    min-height: 460px;
}
#home_container {}

/* tabs */
#tabs_wrapper {
    position: absolute;
    bottom: 138px;
    left: 0;
    width: 100%;
    min-width: 1013px;    
    height: 33px;
    overflow: hidden;
}
#tabs {
    width: 100%;
    min-width: 1013px;
    padding: 0 0 2px;
    background: url(/img/css/home/bg-tabs-bottom.png) no-repeat bottom center;
    background-size: 100% 3px;
    /*    border-bottom: 3px solid #f37021;*/
    overflow: hidden;
}
#tabs ul {
    width: 969px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
#tabs ul li {
    display: block;
    float: left;
    height: 31px;
    margin: 0 3px 0 0;
    background: transparent url(/img/css/home/orange-tab-bg3.png) no-repeat top left;
    -moz-background-size: #transparent url(/img/css/home/orange-tab-bg3.png) repeat-x top left;
    text-align: left;
}
#tabs ul li a {
    width: 138px;
}
#tabs ul li a,
#tabs ul li a:visited {
    display: block;
    color: #fff;
    background: transparent url(/img/css/home/orange-tab-bg3.png) no-repeat top left;
    font-size: 13px;
    line-height: 31px;
    text-align: center;
    text-decoration: none;
    text-transform: lowercase;
}
#tabs ul li a:focus {
    outline: 0;
}
#tabs ul li.xtra,
#tabs ul li.xtra a {
    background: url(/img/css/home/home-red-tab.png) repeat-x top left !important;
    width: 306px;
    font-size: 16px;
    font-weight: bold;
}
#tabs_container {
    width: 100%;
    min-width: 1013px;
    height: 2000px;
    background: #fff;
}
.popped {
    z-index: 700;
}
#tabs_content {
    position: relative;
    width: 969px;
    margin: 0 auto;
    font-size: 13px;
    line-height: 17px;
}
#tabs_content .slide {
    display: none;
    position: absolute;
    top: 25px;
    left: 0;
    width: 969px;
    height: 400px;
}
.slide .col1 {
    float: left;
    width: 513px;
    margin: 0 20px 0 0;
}
.slide .col2 {
    float: left;
    width: 250px;
    height: 270px;
    padding: 60px 0 0 0;
}
.slide .col3 {
    float: right;
    width: 165px;
    height: 270px;
    padding: 60px 0 0 0;
}
.slide .col3 ul {
    margin: 0;
    padding: 0 0 0 15px;
    border-left: 1px solid #dcdbd9;
    list-style-type: none;
    color: #777572;
}
.slide .col3 ul li,
.slide .col3 ul li a {
    margin: 0;
    padding: 0;
}
.slide .col3 ul li ul {
    padding: 0 0 0 6px;
    border-left: none;
    list-style-type: none;
    font-size: 13px;
    color: #5a5753;
    margin-bottom: 7px;
}
.slide .col3 ul li ul li {
    padding: 0 0 0 15px;
    background: url(/img/css/home/arrow_dwn.png) no-repeat 2px 5px;
}
.slide .col3 li a {
    display: block;
}
.slide .col3 .list_letter {
    background: transparent url(/img/css/icon_dots.gif) no-repeat scroll 0 2px;
}
.slide h1 {
    margin: 0;
    font-size: 17px;
    color: #524f4b;
    font-weight: bold;
}
.slide p {
    margin: 5px 0 5px 0;
    font-size: 14px;
    color: #707070;
}
.slide p a {
    font-weight: bold;
}
.slide a {
    color: #5a5753;
    text-decoration: none;
}
.slide a:hover {
    text-decoration: underline;
}
.slide .video {
    width: 513px;
    height: 323px;
    background: #000;
}
#tabs_content a.close-tabs,
#tabs_content a.close-tabs:visited {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 54px;
    height: 20px;
    color: #636363;
    background: url(/img/css/btn-close.png) no-repeat;
    text-indent: -9999px;
}
#tabs_content a.close-tabs:hover {
    background-position: 0 -20px;
}
.no_flash_message {
    background: transparent url('/img/css/no_flash_background.png') no-repeat top left;
    width: 632px;
    height: 199px;
    padding: 0;
    margin: 70px auto 0 auto;
}
.no_flash_message .no_flash_message_content {
    padding: 45px 0 0 55px;
}
.no_flash_message .no_flash_message_content span {
    font-size: 14px;
    font-weight: bold;
    color: #EF6522;
}
.no_flash_message .no_flash_message_content p {
    font-size: 14px;
    color: #B5B4B1;
    margin: 0 0 15px 0;
    display: block;
}
.home-video-player-noflash-container {
    display: none;
    position: relative;
    top: 40px;
    width: 512px;
    height: 322px;
    background-color: #000;
}
.home-video-player-noflash-container .noflash-message {
    width: 380px;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -45px 0 0 -190px;
}
.home-video-player-noflash-container .noflash-message span {
    font-size: 14px;
    font-weight: bold;
    color: #EF6522;
}
.home-video-player-noflash-container .noflash-message p {
    font-size: 14px;
    color: #B5B4B1;
    margin: 0 0 15px 0;
    display: block;
}

/* no flash content
------------------------------------------------------ */
#home_container.no_flash {
    overflow: hidden;
    background: url(/img/css/home/cities.jpg) no-repeat center 60%;
}
#home_container #no_flash {
    width: 100%;
    min-width: 1013px;
    height: 460px;
    display: none;
    position: relative;
    overflow: hidden;
    font-size: 14px;
    color: #32454B;
}
#home_container #no_flash #spectrum {
    width: 100%;
    min-width: 1013px;
    height: 66px;
    position: relative;
    background: #f7d301;
    overflow: hidden;
}
#home_container #no_flash #spectrum #right {
    width: 100%;
    height: 66px;
    position: absolute;
    top: 0;
    left: 50%;
    background: #bb1309;
}
#home_container #no_flash #spectrum ul {
    width: 1059px;
    height: 50px;
    margin: 0 0 0 -600px;
    padding: 16px 0 0 140px;
    position: absolute;
    left: 50%;
    background: url(/img/css/spectrum.gif) repeat-y;
    color: #fff;
    font-size: 9px;
    text-transform: uppercase;
}
#home_container #no_flash #spectrum ul a {
    color: #fff;
}
#home_container #no_flash #spectrum ul li {
    width: 200px;
    float: left;
    display: inline-block;
}
#home_container #no_flash #spectrum ul li a span {
    display: block;
    color: #fff;
    font-size: 22px;
    line-height: 22px;
    font-weight: bold;
}
#city-messages {
    position: absolute;
    top: 100px !important;
    left: 50% !important;
    width: 500px;
    margin-left: -250px;
}
#home_container #no_flash .city-message {
    padding-left: 60px;
    background: url(/img/css/boxes.png) no-repeat left top;
    cursor: pointer;
}
#home_container #no_flash .city-message h2 {
    font-size: 21px;
    line-height: 21px;
    color: #DA1F27;
    text-transform: uppercase;
}
#home_container #no_flash .city-message p {
    margin-top: 3px;
}
#home_container #no_flash .city-message a {
    display: block;
    margin-top: 12px;
    padding-left: 14px;
    background: url(/img/css/arrow.gif) no-repeat left 4px;
}
#home_container #no_flash .city-message .city-message-more {
    padding: 16px 58px 30px 22px;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(/img/css/answer.png);
    color: #fff;
    cursor: default;
    font: 14px/19px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
#home_container #no_flash .city-message .city-message-more a.close {
    width: 21px;
    height: 21px;
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    background: url(/img/css/close.png) no-repeat;
}
#home_container #no_flash .city-message .city-message-more a.close span {
    visibility: hidden;
}
#home_container #no_flash .city-message .city-message-more h2 {
    margin: 12px 0 8px 0;
    font-size: 28px;
    line-height: 25px;
    color: #fff;
    text-transform: none;
}
#home_container #no_flash .city-message .city-message-more h3 {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
}
#home_container #no_flash .city-message .city-message-more h2 {
    margin: 12px 0 8px 0;
    font-size: 28px;
    line-height: 25px;
    color: #fff;
    text-transform: none;
}

/* footer
------------------------------------------------------ */
#footer {
    position: relative;
    width: 100%;
    min-width: 1013px;
    height: 138px;
    background: url('/img/css/home/bg-footer.png') repeat-x;
    overflow: visible;
}
#footer .content {
    width: 970px;
    margin: 0 auto;
}
/* footer promo boxes */
#footer .promo-con {
    position: relative;
    height: 83px;
    width: 970px;
}
#footer .promo {
    float: left;
    width: 204px;
    height: 71px;
    padding: 12px 10px 0 18px;
    color: #fff;
    overflow: hidden;
}
#footer .promo-first,
#footer .promo-second,
#footer .promo-blog {
    background: url(/img/css/home/divider.gif) no-repeat top right;
}
#footer .promo h2 {
    padding: 0 0 5px;
}
#footer .promo h2 {
    margin: 0;
}
#footer .promo h2,
#footer .promo h2 a,
#footer .promo ul li h2 a {
    color: #a8a8a8;
    font-weight: normal;
    font-style: normal;
    font-size: 12px;
}
#footer .promo ul {
    width: 176px !important;
    list-style: none;
    overflow: hidden;
}
#footer .promo ul li,
#footer .promo ul li a {
    display: block;
    color: #fff;
    background-color: transparent;
    text-decoration: none;
}
#footer .promo ul li {
    margin: 0 0 16px;
    font-size: 19px;
    font-weight: normal;
    font-style: normal;
}
#footer .promo-first ul li,
#footer .promo-second ul li {
    height: 78px;
}
#footer .promo-blog ul,
#footer .promo-social-media ul {
    overflow: hidden;
}
#footer .promo-blog ul {
    height: 45px;
}
#footer .promo-social-media ul {
    height: 50px;
}
#footer .promo ul.social-media-links {
    overflow: hidden;
}
#footer .promo ul.social-media-links li {
    display: block;
    float: left;
    margin: 8px 12px 0 0;
    text-align: left;
}
#footer .promo ul.social-media-links li a {
    width: 17px;
    height: 17px;
    text-indent: -9999px;
}
.promo .social-media-links .facebook {
    background: url(/img/home/icon-facebook.png) no-repeat;
}
.promo .social-media-links .twitter {
    background: url(/img/home/icon-twitter.png) no-repeat;
}
.promo .social-media-links .linkedin {
    background: url(/img/home/icon-linkedin.png) no-repeat;
}
.promo .social-media-links .youtube {
    background: url(/img/home/icon-youtube.png) no-repeat;
}
.promo .social-media-links .flickr {
    background: url(/img/home/icon-flickr.png) no-repeat;
}
.promo .social-media-links .boomerang {
    background: url(/img/home/icon-boomerang.png) no-repeat;
}
/* open version of promo box */
#footer .promo.open {
    height: 523px;
    position: relative;
    top: -440px;
    background: url('/public/images/footer/promo-open.png') repeat-x;
}
#footer .promo.open h2, #footer .promo.open p, #footer .promo.open a.link {
    display: block;
}
/* footer links */
#footer .links {
    position: absolute;
    bottom: 15px;
    font-size: 9px;
    color: #8A8A8A;
    line-height: 12px;
}
#footer .links a {
    color: #8A8A8A;
}

/* IE6 alert */
#ie6-alert-container {
    background: transparent url('/img/css/attn_bkg.gif') repeat-x top left;
    height: 71px;
    display: none;
}
#ie6-alert-container a,
#ie6-alert-container a:link,
#ie6-alert-container a:visited,
#ie6-alert-container a:active {
    color: #46433d;
    text-decoration: none;
}
#ie6-alert-container #ie6-alert {
    position: relative;
    width: 969px;
    height: 68px;
    margin: 0 auto;
    background: transparent url('/img/css/attn_warning.gif') no-repeat 16px center;
}
#ie6-alert-container #ie6-alert h4 {
    margin: 0 0 0 0;
    padding: 20px 0 0 70px;
    color: #46433d;
    font-size: 14px;
    font-weight: normal;
}
#ie6-alert-container #ie6-alert span {
    display: block;
    color: #6b6964;
    padding: 0 0 0 70px;
    font-size: 12px;
}
#ie6-alert-container #ie6-alert #ie6-alert-close-container {
    float: right;
    padding: 5px 40px 0 0;
    text-align: right;
}
#ie6-alert-container #ie6-alert #ie6-alert-close-container .ie6-alert-close {
    background: transparent url('/img/css/attn_carat.gif') no-repeat right center;
    color: #46433d;
    padding: 0 20px 0 0;
    text-decoration: none;
}

/* Hide Omniture div */
#omniture {
    position: absolute;
    height: 0px;
    overflow: hidden;
    visibility: hidden;
}

/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/
html, body {height: 100%;}
#wrapper {min-height: 100%;}
#home_content {
    overflow: auto;
    padding-bottom: 138px; /* must be same height as the footer */
} 
#footer {
    position: relative;
    margin-top: -138px; /* negative value of footer height */
    clear: both;
} 
/*Opera Fix*/
body:before { /* thanks to Maleika (Kohoutec)*/
    content: '';
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px;/* thank you Erik J - negate effect of float*/
}