/* 
Website: Teraco - Data Environments
Title: Primary/Master style sheet for screen media
Updated: December 2008
Author: Clement Newton

Style Index
$1 - Reset/Defaults
$2 - Global Styles
$3 - Page Structure
$4 - Navigation - Primary/Secondary/Searchbar 
$5 - Breadcrumb
$6 - Print/Send/Share Icons
$7 - Footer
$8 - Homepage
$9 - News
$10 - Careers
$11 - Data locations
$12 - Why Teraco
$13 - Green CTA Box
$14 - Blue CTA Box
$15 - Our Services

*/



/* ------------------------------------------------------------
	$1  Reset/Defaults
------------------------------------------------------------ */

/*Clear Margin and Padding on major elements*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}

/* Remove border around linked images */
img { border: 0; }

/* ------------------------------------------------------------
	$2  Global Styles
------------------------------------------------------------ */

body{
	background: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;
}

input, textarea{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #4c4c4c;
	border: 1px solid #3f6ba1;
}

.clear{
	clear: both;
}

.cl{
	clear: left;	
}

.cr{
	clear: right;	
}

.fl{
	float: left;
}

.fr{
	float: right;
}

.hide{
	position: absolute;
	top: -9999px;
	left: -9999px;
}

a{
	color: #3f6ba1;
}

a:focus{
	outline: none;
}

.cl{
	clear: left;
}

.cr{
clear: right;
}

.center{
	text-align: center;
}

.external{
	/*background: url(/images/frontend/global/external_link.gif) no-repeat 0 2px;
	padding-left: 12px;*/
}

.imgbdr{
	border: 1px solid #f1f1f1;
}

.bold{
	font-weight: bold;
}

.mrg_top7{ margin-top: 7px;}
.mrg_top15{ margin-top: 15px;}
.mrg_bot15{ margin-bottom:15px;}
.mrg_bot70{ margin-bottom:90px;}
.mrg_top15{ margin: 15px 0 0 0;}
.mrg_bot10{ margin: 0 0 10px 0;}
.mrg_bot15{ margin: 0 0 15px 0;}
.mrg_bot20{ margin: 0 0 20px 0;}
.mrg_r15{ margin: 0 15px 0 0;}
.mrg_botl15{ margin: 0 0 15px 15px;}
.mrg_botlr10{ margin: 0 10px 10px 10px;}
.mrg_lef10{ margin-left: 10px;}
.mrg_lef20{ margin-left: 20px;}

.pad_lr15{ padding: 0 15px; }
.pad_r15{ padding: 0 15px 0 0;}
.pad_r5{ padding: 0 5px 0 0;}
.pad_bot15{ padding: 0 0 15px 0;}
.pad_l34{ padding: 0 0 0 34px;}
.iv {font-style: italic;}


.read_more a{
	display: block;
	height: 27px;
	width: 99px;
	background: url(/images/frontend/global/buttons.gif) no-repeat 0 -54px;
}

.read_more a:hover{
	background: url(/images/frontend/global/buttons.gif) no-repeat 0 -81px;
}

.clickthinking a{
	background: url(/images/frontend/global/ct_logo.gif) no-repeat;
	padding: 0 0 0 25px
}

#footer .inner .clickthinking a:hover{
	background: url(/images/frontend/global/ct_logo.gif) no-repeat 0 -15px;
	color: #000000;
}

#footer .inner ul li{
	float: left;
	padding: 0 10px;
	list-style: none;
}

#footer .inner ul li a{
	float: left;
}


/* ------------------------------------------------------------
	$3  Page Structure
------------------------------------------------------------ */

#container{
	width: 100%;
	text-align: center;
}

#content, #footer .inner, #topnav .inner{
	width: 867px;
	margin: 0 auto;
	text-align: left;
}

.lhs{
	width: 620px;
	float: left;
}

.lhswelcome{
	width: 860px;
	float: left;
}

.rhs{
	width: 230px;
	float: right;
}

/* ------------------------------------------------------------
	$4  Navigation - Primary/Secondary
------------------------------------------------------------ */

#topnav{
	height: 160px;
}

#topnav .inner{
	padding: 45px 0 0 0;
	position: relative;
}

#topnav .main_logo{
	display: block;
	width: 260px;
	height: 57px;
	padding: 0 0 10px 0;
	background: url(/images/frontend/global/teraco_logo.gif) no-repeat;
}

#topnav #navlinks{
	border-top: 1px solid #7ed801;
}

#topnav #navlinks ul li{
	float:left;
	list-style: none;
	padding: 12px 16px 0 16px;
	/*padding: 12px 23px 0 23px;*/
}

#navlinks ul li a{
	display: block;
	padding: 0 0 10px 0;
}

#navlinks ul li a:hover{
	background: url(/images/frontend/global/topnav_on.gif) no-repeat 50% 16px;
}

#navlinks ul li a.current{
	background: url(/images/frontend/global/topnav_on.gif) no-repeat 50% 16px;
}

/* Login Box */

#login{
	background: url(/images/frontend/global/login_bg.gif) repeat-x;
	border: solid #3f6ba1;
	border-width: 0 1px 1px 1px;
	height: 26px;
	text-align: left;
	width: 307px;
	padding: 4px 24px 0 24px;
	position: absolute;
	top: 0;
	right: 0px;
}

#login a.login{
	width: 90px;
	height: 23px;
	display: block;
	background: url(/images/frontend/global/login.gif) no-repeat 0 -23px;
}

#login a.login:hover{
	background-position: 0 0;	
}

#login_popup{
	display: none;
	padding: 20px;
} 

#login_popup input{
	width: 180px;
	padding: 2px;	
}

#login_popup p label{
	width: 100px;
	display: block;
	float: left;
}

/* ------------------------------------------------------------
	$5 - Breadcrumb
------------------------------------------------------------ */

#subnav{
	
}

#breadcrumb{
	font-size: 11px;
}

#breadcrumb li{
	float: left;
	list-style: none;
}

#breadcrumb li a{
	color: #666666;
	text-decoration: none;
	padding: 0 15px 0 19px;
	background: url(/images/frontend/global/breadcrumb_arrow.gif) no-repeat 0 3px ;
}

#breadcrumb li a:hover{
	text-decoration: underline;
}

#breadcrumb li .home_crumb{
	background: none;
	padding: 0 15px 0 0;
}

#breadcrumb li .active_crumb{
	font-weight: bold;
	color: #3f6ba1;
}


/* ------------------------------------------------------------
	$6 - Print/Send/Share Icons
------------------------------------------------------------ */

#social_icons{
	width: 120px;
	height: 24px;
	background: url(/images/frontend/global/icon_bg.gif) repeat-x;
	float: right;
	padding: 0 0 0 14px;
}

#social_icons li{
	float: left;
	list-style: none;
}

#social_icons li a{
	font-size: 11px;
	line-height: 16px;
	color: #3f6ba1;
	text-decoration: none;
	margin: 5px 0 0 0;
	padding: 0px 13px 0 23px;
	display: block;
}

#social_icons .print a{
	background: url(/images/frontend/global/print_icon.gif) no-repeat 0 0px;
}

#social_icons .print a:hover{
	background: url(/images/frontend/global/print_icon.gif) no-repeat 0 -16px;
	color: #bdcadb;
}

#social_icons .send a{
	background: url(/images/frontend/global/send_icon.gif) no-repeat 0 2px;
}

#social_icons .send a:hover{
	background: url(/images/frontend/global/send_icon.gif) no-repeat 0 -14px;
	color: #bdcadb;
}

#social_icons .share a{
	background: url(/images/frontend/global/share_icon.gif) no-repeat 0 0px;
}

#social_icons .share a:hover{
	background: url(/images/frontend/global/share_icon.gif) no-repeat 0 -16px;
	color: #bdcadb;
}

/* ------------------------------------------------------------
	$7 - Footer
------------------------------------------------------------ */

#footer{
	height: 140px;
	background: url(/images/frontend/global/footer_bg.gif) repeat-x;
	font-size: 10px;
	color: #afafaf;
	text-align: center;
	margin: 20px 0 0 0;
}

#footer a{
	color: #afafaf;
	text-decoration: none;
	line-height: 13px;
}

#footer a:hover{
	color: #33ba02;
	text-decoration: underline;
}

#footer .inner{
	padding: 30px 0 0 0;
	width: 650px;
	text-align: center;
}

#footer table tr td{
	text-align: center;
}

#footer .ftr_bdr{
	border: solid #afafaf;
	border-width: 0 1px;
}

#footer .inner .footer_extra{
	padding: 20px 0 0 0;	
}


/* ------------------------------------------------------------
	$8 - Home Page
------------------------------------------------------------ */

#flash_area{
	height: 287px;
	margin: 0 0 15px 0;
}

#home_flash{
	width: 480px;
	height: 285px;
	float: left;
	border: 1px solid #f1f1f1;
}

#video_tour{
        width: 630px;
        height: 285px;
        float: left;
        border: 1px solid #f1f1f1;
}
#video_tour2{
        width: 630px;
        height: 0px;
        float: left;
        border: 1px solid #f1f1f1;
}


.home_cta{
	width: 217px;
	height: 86px;
	background: url(/images/frontend/home/home_cta_bg.gif) repeat-x;
	float: right;
	margin: 0 0 10px 0;
	border: 1px solid #f1f1f1;
}

.home_cta a{
	width: 217px;
	height: 86px;
	display: block;
}

a.phone{
	background: url(/images/frontend/home/phone_cta_bg.gif) no-repeat 16px 24px;
}

a.email{
	background: url(/images/frontend/home/email_cta.gif) no-repeat 16px 26px;
	width: 217px;
	height: 86px;
}

a.live_chat{
	background: url(/images/frontend/home/chat_cta_bg.gif) no-repeat 16px 10px;
	width: 217px;
	height: 86px;
}

#subsection {
	border: solid #f1f1f1;
	border-width: 1px 0;
	padding: 10px 0;
}

.home_subsection{
	width: 282px;
	float: left;
}

/* ------------------------------------------------------------
	$9 - News Section
------------------------------------------------------------ */

.article_intro{
	margin: 0 0 20px 0;
	border-top: 1px solid #f1f1f1;
	padding: 15px 0 0 0;
}

.article_intro p img{
	border: 1px solid #f1f1f1;
}

.article_intro a{
	color: #3f6ba1;
}

.news_header{
	font-size: 14px;
}

.news_header a{
	color: #666666;
	text-decoration: none;
}

.news_header a:hover{
	color: #3f6ba1;
	text-decoration: underline;
}

.news_date{
	font-style: italic;
}

/* News Pagination */

.pagination{
	padding: 15px 0 15px 0;
	margin: 0 auto;
	width: 530px;
}

.pagination li{
	list-style: none;
	float: left;
	text-align: center;
}

.pagination li a{
	display: block;
	font-weight: bold;
	text-decoration: none;
	color: #3f6ba1;
	font-size: 11px;
	padding: 0 7px;
	margin: 0 5px;
	border: 1px solid #3f6ba1;
}

.pagination li a:hover{
	color: #fff;
	background: #3f6ba1;
	border: 1px solid #3f6ba1;
}

.pagination .onstate a{
	color: #ffffff;
	background: #3f6ba1;
}


/* News Article */

#news_article{
	width: 640px;
	float: left;
}

#news_article img{
	border: 1px solid #f1f1f1;
}

#news_archive{
	float: right;
	width: 212px;
	padding: 0 0 0 8px;
	border-left: 1px solid #f1f1f1;
}

.doc_icons{
	list-style: none;
}

.word_icon {
	background: url(/images/frontend/news/word_icon.gif) no-repeat;
	padding: 5px 0 5px 30px;
	list-style: none;
}

.pdf_icon{
	background: url(/images/frontend/news/pdf_icon.gif) no-repeat;
	padding: 5px 0 5px 30px;
	list-style: none;
}


.slideshow_icon{
	background: url(/images/frontend/locations/Image.png) no-repeat;
	padding: 5px 0 5px 30px;
	list-style: none;
}

.map_icon{
	background: url(/images/frontend/locations/Globe.png) no-repeat;
	padding: 5px 0 5px 30px;
	list-style: none;
}

.zoom_icon{
	background: url(/images/frontend/global/zoom.png) no-repeat;
	padding: 0px 0 5px 15px;
	list-style: none;
}

.other_icon{
	background: url(/images/frontend/news/other_icon.gif) no-repeat;
	padding: 5px 0 5px 30px;
	list-style: none;
}

/* ------------------------------------------------------------
	$10 - Careers
------------------------------------------------------------ */

#careers{
	margin: 0 0 15px 0;
}

.career_head{
	font-weight: bold;
	margin: 0 0 15px 0;
	padding: 15px 0 0 0;
	border-top: 1px solid #f1f1f1;
}

.job_listing{
	border-bottom: 3px solid #f1f1f1;
	padding: 15px 0 0 0;
}

#career_popup{
	width: 570px;
	height: 400px;
	text-align: left;
	display:none;
	overflow:scroll;
	padding:20px;
}

/* ------------------------------------------------------------
	$10 - Contact
------------------------------------------------------------ */

#contact {
	padding: 15px 0;
	border: solid #f1f1f1;
	border-width: 1px 0;
}

#contact label.error, #enquiryForm label.error{
	color: #33ba02;
	display: block;
	width: 100%;
	margin-bottom: 8px;
	padding: 0px 0;
}

#contact input{
	width: 180px;
	padding: 2px;
}

#contact span{
	color: #33ba02;
}

#contact label{
	width: 190px;
	float: left;
	display: block;
}

#contact .checkbox{
	margin-right: 10px;	
	border: none;
	width: 15px;
}

.top_form textarea{
	width: 374px;
}

.lower_form{
	border-top: 1px solid #f1f1f1;
	margin: 15px 0 0 0;
	padding: 10px 0 0 0;
}

.lower_form .header{
	font-weight: bold;	
}

.lower_form select{
	width: 185px;
	color: #666666;
	font-size: 11px;
	border: 1px solid #3f6ba1;
}

.lower_form option{
	padding: 3px 2px 2px 1px;
}

#newsletter {
        padding: 15px 0;
        border: solid #f1f1f1;
        border-width: 1px 0;
}

#newsletter label.error, #enquiryForm label.error{
        color: #33ba02;
        display: block;
        width: 100%;
        padding: 5px 0;
}

#newsletter input{
        width: 180px;
        padding: 2px;
}

#newsletter span{
        color: #33ba02;
}

#newsletter label{
        width: 190px;
        float: left;
        display: block;
}

#newsletter .checkbox{
        margin-right: 10px;
        border: none;
        width: 15px;
}

/* Log In Btn */ 

#login .login_button a{
	background: url(/images/frontend/global/log_in.gif) -126px 0;
	display: block;
	width: 85px;
	height: 27px;
}

#login .login_button a:hover{
	background: url(/images/frontend/global/log_in.gif) -126px -27px;
}

.padlogo{
    float:right;
	padding:15px;
}

/* Lower Contact Area */ 

#lower_contact{
	margin: 20px 0 0 0;
}

.city_block{
	width: 263px;
	border: 1px solid #f1f1f1;
	float: left;
	padding: 15px;
	margin: 15px 15px 0 0;
}

/* Enquire Form*/ 

#enquiryForm{
	border: solid #f1f1f1;
	border-width: 1px 0;
	padding: 20px 0;
}

#enquiryForm input{
	width: 180px;
	padding: 2px;
}

#enquiryForm p label{
	width: 100px;
	float: left;
	display: block;
}

#enquiryForm span{
	color: #33ba02;
}

#enquiryForm .checkbox{
	margin-right: 10px;	
	border: none;
	width: 15px;
}

a.submit{
	display: block;
	width: 73px;
	height: 24px;
	margin: 15px 0 0 0;
	background: url(/images/frontend/contact/submit.gif) no-repeat 0 -24px;
}

a.submit:hover{
	background: url(/images/frontend/contact/submit.gif) no-repeat 0 0;	
}

/* ------------------------------------------------------------
	$11 - Data locations
------------------------------------------------------------ */

.br_info{
	margin: 15px 0;
	border-bottom: 1px solid #f1f1f1;
}

.def_list{
	padding: 0 0 0 15px;
}

.contact_cta a{
	display: block;
	width: 199px;
	height: 60px;
	margin: 15px 0 0 0;
	background: url(/images/frontend/locations/contact_us.gif) no-repeat;
}

.imgGridContainer {
  border: 1px solid #666666;
  background-color: #ffe;
	width: 176px;
}

.imgGridSpacer {
	clear: both;
}

.imgGrid {
	width: 40px;
	height: 40px;
	padding: 2px 2px 2px 2px;
	float: left;
}

/* ------------------------------------------------------------
	$12 - Why Teraco
------------------------------------------------------------ */

.carrier_logo{
	text-align: center;
}

#service_popup {
	display: none;
	padding: 35px 20px 20px 20px;
}

#outsource_popup {
	display: none;
	padding: 35px 20px 20px 20px;
	width:700px;
	
}

#why_flash{
	border: 1px solid #f1f1f1;
	margin: 0 0 15px 0;
	padding: 0;
	height: 266px;
}

/* Login Box */ 

a.login_btn{
	display: block;
	background: url(/images/frontend/global/login.gif) no-repeat;
	width: 77px;
	margin: 15px 0 0 0;
	height: 29px;
}

a.login_white{
	display: block;
	background: url(/images/frontend/global/login_white.gif) no-repeat 0 0;
	width: 88px;
	margin: 15px 0 0 100px;
	height: 21px;
}

a.login_white:hover{
	background-position: 0 -21px;	
}

#login_table td{
	padding: 5px 0 0 0;
}

/* ------------------------------------------------------------
	$13 - Green CTA Box
------------------------------------------------------------ */

.green_box{
	border: 1px solid #dffcd4;
	padding: 4px;
	width: 208px;
	position: relative;
}

.green_box .hdr{
	height: 19px;
	padding: 8px 0 0 9px;
	background: url(/images/frontend/global/greenbox_header.gif) no-repeat;
}

.green_box .cnt{
	color: #666666;
	font-size: 11px;
	background: #f2f2f2 url(/images/frontend/global/greenbox_ftr.gif) no-repeat bottom left;
}

.green_box .cnt .onstate{
	font-weight: bold;
	background: #b4b4b4 url(/images/frontend/global/sidenav_arrow.gif) no-repeat 15px 8px;
}

/* 3 Reasons Header */

.reasons_hdr{
	height: 19px;
	padding: 8px 0 0 9px;
	background: url(/images/frontend/global/greenbox_header_reason.gif) no-repeat;
}

.greenBG{
	background-color: #79d457;
	height: 19px;
}


/* Home News */ 

.green_box .home_news{
	padding: 12px 8px 8px 8px;
	height: 229px;
	height: auto;
}

.green_box .home_news a{
	color: #666666;
	text-decoration: none;
}

.green_box .home_news a:hover{
	text-decoration: underline;
}

.home_news .home_article{
	margin: 0 0 13px 0;
}

.home_news .home_article .italic{
	font-style: italic;
}

.home_news .home_article .bold{
	font-weight: bold;
}

.home_news a.view_news, .top_form p a.contact_more{
	color: #33ba02;
	display: block;
	padding: 0 0 0 22px;
	background: url(/images/frontend/global/greenbox_bullet.gif) no-repeat 0px 0px;
}

/* Connect */ 

.green_box .connect_rhs{
	height: 205px;	
}

.green_box .connect_rhs ul li{
	list-style: none;
	padding: 10px 0 10px 47px;
	background: url(/images/frontend/global/connect_icons.gif) no-repeat;
}

.connect_rhs ul li.telephone, .support_link li.telephone{
	background-position: 14px 8px;
}

.connect_rhs ul li.email, .support_link li.email{
	background-position: 14px -20px;
}

.connect_rhs ul li.live_chat, .support_link li.live_chat{
	background-position: 14px -50px;
}

.connect_rhs ul li.download{
	background-position: 14px -93px;
}

.connect_rhs ul li.tour{
	background-position: 14px -128px;
}

/* Services */ 

.green_box .services_rhs{
	height: 230px;
}

a.services_link{
	display: block;
	width: 208px;
	height: 257px;
	position: absolute;
	top: 4px;
	left: 4px;
}

.green_box .services_rhs ul{
	padding: 5px 0 6px 0;
}	

.green_box .services_rhs ul li{
	list-style: none;
	padding: 5px 0 5px 33px;
	background: url(/images/frontend/global/sidenav_arrow.gif) no-repeat 15px 8px;
}

.green_box .services_rhs a.more{
	padding: 10px 0 0 15px;
	color: #33ba02;
}

/* SideNav */

.green_box .sidenav_rhs{
	height: 130px;	
}

.green_box .sidenav_rhs ul{
	padding: 5px 5px 6px 0;
}	

.green_box .sidenav_rhs ul li{
	list-style: none;
	padding: 5px 0 5px 33px;
	background: url(/images/frontend/global/sidenav_arrow.gif) no-repeat 15px 8px;
}

.green_box .sidenav_rhs ul li a{
	color: #666666;
	font-weight: bold;
}

/* ------------------------------------------------------------
	$14 - Blue Box
------------------------------------------------------------ */

.blue_box{
	border: 1px solid #d3e3f6;
	padding: 4px;
	width: 208px;
}

/* ------------------------------------------------------------
	$15 - Our Services
------------------------------------------------------------ */

.support_link{
	background: #F2F2F2;
	width: 100%;
	padding: 5px;
}

.support_link li{
	background: url(/images/frontend/global/connect_icons.gif) no-repeat;
	list-style: none;
	padding: 10px 0 10px 47px;
}


/* ------------------------------------------------------------
	Services Pop-Up
------------------------------------------------------------ */
.mrg_pad_logo{ 
     margin: 0px 0px 10px 0px;
	 border-bottom: 1px solid #7ED801;
}

.mrg_pad_close{ 
    margin: 13px 0px 0px 0px;
}

.logo_margin{
	margin-bottom: 13px;
}


/* --------------------------------------------------------------------------------------------- */
/*modal*/
/* Overlay */
#modalOverlay {background-color:#000; cursor:default;}

/* Default Container used for login */
#modalContainer {
	/*height:330px;*/ /*commented out by rafeeqah on 12/02/09 beacuse of popup on http://teraco/why/ */
	width:600px;
	left:50%;
	top:15%;
	margin-left:-300px;
	background-color:#fff;
	border:1px solid #c1c1c1;
}

#modalContainer a.modalCloseImg {
	/*background:url(/images/frontend/global/close-button.png) no-repeat; */
	background: url(/images/frontend/global/close.gif);
	width:50px; 
	height:16px; 
	display:inline; 
	z-index:3200; 
	position:absolute;
	top:22px; 
	right:18px; 
	cursor:pointer;
}

#whyContainer {
	/*height:330px;*/ /*commented out by rafeeqah on 12/02/09 beacuse of popup on http://teraco/why/ */
	width:730px;
	left:50%;
	top:15%;
	margin-left:-355px;
	background-color:#fff;
	border:1px solid #c1c1c1;
}

#whyContainer a.modalCloseImg {
	background: url(/images/frontend/global/close.gif);
	width:50px; 
	height:16px; 
	display:inline; 
	z-index:3200; 
	position:absolute;
	top:22px; 
	right:18px; 
	cursor:pointer;
}
#modalContainer #career_popup #login_popup #service_popup #outsource_popup {padding:15px;}

.cust_logo{
        display: block;
        width: 800px;
        height: 300px;
        padding: 100px 0px 0px 0;
	margin-left:280px;
	margin-top: 0px;
        background: url(/images/frontend/global/telconet.jpg) no-repeat;
}
.cust_logo2{
        display: block;
        width: 530px;
        height: 300px;
        padding: 0px 0px 0px 0;
	margin-left:300px;
	margin-top:0px;
        background: url(/images/frontend/global/KDDI_logo.png) no-repeat;
}