@import "main.css";

#nav a {
    width: 79px;
    height: 72px;
    text-indent: -9999px;
}

#nav a#home {
    background: transparent url("../../en-us/images/menu-home.gif") left top no-repeat;
}

#nav a#services {
    background: transparent url("../../en-us/images/menu-services.gif") top left no-repeat;
}

#nav a#pricing {
    background: transparent url("../../en-us/images/menu-pricing.gif") top left no-repeat;
}

#nav a#faq {
    background: transparent url("../../en-us/images/menu-faq.gif") top left no-repeat;
}

#nav a#support {
    background: transparent url("../../en-us/images/menu-support.gif") top left no-repeat;
}

#nav a#account {
    background: transparent url("../../en-us/images/menu-account.gif") top left no-repeat;
}

#nav a#home:hover, #nav a#services:hover, #nav a#support:hover, #nav a#pricing:hover, #nav a#account:hover,
    #nav a#faq:hover, body#home #nav a#home, body#services a#services, body#pricing a#pricing, body#faq a#faq, 
    body#support a#support {
    background-position: 0px -71px;
}

ul#content {
	display: block;
	float: left;
	width: 970px;
	margin: 0 0 35px;
}
	
	ul#content li {
		display: block;
		float: left;
		width: 970px;
	}

	ul#content li#banner {
	    display: block;
	    position: relative;
		background: transparent url("../../en-us/images/home-banner.jpg") top no-repeat;
		height: 270px;
	}
	
	    ul#content li#banner span, ul#content li#banner h1 {
	        display: block;
	        position: absolute;
	        left: -9999px;
	        top: 0;
	    }
	
	    ul#content li#banner div#login {
	        display: block;
	        position: absolute;
	        width: 286px;
	        height: 206px;
	        right: 29px;
	        top: 39px;
	        background: transparent url("../../en-us/images/home-userlogin-bg.gif") top left no-repeat;
	    }
	    
	    ul#content li#banner div#login.authenticated {
	        background: transparent url("../../en-us/images/home-userlogin-authbg.gif") top left no-repeat;
	    }
	    
	    ul#content li#banner div#login h3 {
	        display: block;
	        position: absolute;
	        top: 30px;
	        left: 43px;
	        font-size: 18px;
	        color: #bbb;
	        font-weight: 100;
	    }
	    
	    ul#content li#banner div#login a#forgotPassword {
	        position: absolute;
	        display: block;
	        color: #fff;
	        right: 35px;
	        bottom: 0px;
	        text-indent: 0;
	    }
	    
	    ul#content li#banner div#login table#accountNav {
	        position: absolute;
	        width: 200px;
	        border: none;
	        top: 92px;
	        left: 45px;
	        font-size: 11px;
	    }
	    
	        ul#content li#banner div#login table#accountNav td {
	            width: 100px;
	            text-align: center;
	        }
	        
	        ul#content li#banner div#login table#accountNav a {
	            color: #000;
	        }
	        
	        ul#content li#banner div#login table#accountNav a:hover {
	            color: #E67E00;
	        }
	    
	    ul#content li#banner div#login input#email, ul#content li#banner div#login input#password {
	        display: inline;
	        position: absolute;
	        width: 140px;
	        height: 17px;
	        padding: 4px;
	        top: 94px;
	        left: 34px;
	        background: transparent url("../../en-us/images/home-userlogin-matrix.gif") top left no-repeat;
	        background-position: 0 -25px;
	        border: none;
	    }
	    
	    ul#content li#banner div#login input#password {
	        top: 130px;
	        left: 34px;
	        background-position: 0 -50px;
	    }
	    
	    ul#content li#banner div#login a#loginGo {
	        display: block;
	        position: absolute;
	        width: 49px;
	        height: 66px;
	        top: 91px;
	        right: 30px;
	        text-indent: -9999px;
	        background: transparent url("../../en-us/images/home-userlogin-go.gif") top left no-repeat;
	    }
	    
	    ul#content li#banner div#login a#loginGo:hover {
	        background-position: 0 -66px;
	    }
	    
	    ul#content li#banner div#login a#loginGo:active {
	        background-position: 0 100%;
	    }
	    
	    ul#content li#banner a#badge {
	        display: block;
	        position: absolute;
	        top: 45px;
	        left: 501px;
	        width: 116px;
	        height: 116px;
	        text-indent: -9999px;
	        background: transparent url("../../en-us/images/badge-free.gif") top left no-repeat;
	    }
	    
	    ul#content li#banner a#badge:hover {
	        background-position: 0 100%;
	    }
	
	ul#content li#main {
		display: block;
		float: left;
		width: 970px;
		clear: both;
	}
	
		ul#content li#main ul#tri {
			display: block;
			float: left;
			list-style: none;
		}
		
			ul#content li#main ul#tri li {
				display: block;
				float: left;
				color: #fff;
				padding-top: 34px;
				font-size: 1.1em;
				line-height: 19px;
			}
			
			ul#content li#main ul#tri li#one {
				width: 326px;
			}
			
				ul#content li#main ul#tri li#one p {
					display: block;
					float: left;
					width: 272px;
					padding: 27px;
				}
				
				ul#content li#main ul#tri li#one h1 {
					display: block;
					float: left;
					width: 267px;
					height: 28px;
					background: transparent url("../../en-us/images/werefast.gif") top left no-repeat;
					text-indent: -9999px;
				}
				
				ul#content li#main ul#tri li#one h1.sound {
				    background: transparent url("../../en-us/images/soundgreatforfree.gif") top left no-repeat;
				}

                ul#content li#main ul#tri li#one h1.limitedtime {
                    background: transparent url("../../en-us/images/promotions/header_limitedtime.gif") top left no-repeat;
                }
			
			ul#content li#main ul#tri li#two {
				width: 306px;
				background: #2d5f6b url("../../en-us/images/tri_two_bottom.gif") bottom no-repeat;
			}
			
				ul#content li#main ul#tri li#two h1 {
					display: block;
					float: left;
					width: 273px;
					height: 28px;
					background: transparent url("../../en-us/images/wastingmoney.gif") top no-repeat;
					text-indent: -9999px;
				}
				
				ul#content li#main ul#tri li#two p {
					display: block;
					float: left;
					width: 250px;
					padding: 27px 23px;
				}

				ul#content li#main ul#tri li#two table {
                    border: none;
                    clear: both;
                    margin-left: 23px;
					width: 250px;
				}
                    ul#content li#main ul#tri li#two table tr.row1 { background-color: #367382; }
                    ul#content li#main ul#tri li#two table tr.row2 { background-color: #2D5F6B; }

                    ul#content li#main ul#tri li#two table td {
                        margin-bottom: 1px;
                        padding-top: 0;
                        padding-bottom: 0;
                    }

                    ul#content li#main ul#tri li#two table td.one { text-align: left; }
                    ul#content li#main ul#tri li#two table td.two { text-align: right; }
			
			ul#content li#main ul#tri li#three {
				width: 328px;
				padding-left: 8px;
				padding-top: 13px;
			}
			
				ul#content li#main ul#tri li#three a#spankin {
					display: block;
					width: 318px;
					height: 297px;
					background: transparent url("../../en-us/images/spankin.png") top no-repeat;
					text-indent: -9999px;
                    margin: 20px 0 0;
				}
				
				ul#content li#main ul#tri li#three a#new_coverage {
				    display: block;
				    width: 318px;
				    height: 119px;
				    background: transparent url("../../en-us/images/banner-newcoverage.gif") top left no-repeat;
				    text-indent: -9999px;
				    margin-top: 10px;
				}
				
				ul#content li#main ul#tri li#three a#e911_coverage {
				    display: block;
				    width: 318px;
				    height: 119px;
				    background: transparent url("../../en-us/images/banner-newe911.gif") top left no-repeat;
				    text-indent: -9999px;
				    margin-top: 10px;
				}
				
                ul#content li#main ul#tri li#three a#kamailio {
				    display: block;
				    width: 318px;
				    height: 119px;
				    background: transparent url("../../en-us/images/banner-kamailio.gif") top left no-repeat;
				    text-indent: -9999px;
				    margin-top: 10px;
				}

#searchDID {
    display: block;
    float: left;
    clear: both;
    width: 280px;
    height: 71px;
    background: transparent url("../../en-us/images/search-dids-bg.gif") top left no-repeat;
    padding: 42px 0 0 38px;
    margin: 15px 0 0;
}

    #searchDID span {
        font-size: 10px;
        color: #000;
    }
    
    #searchDID input {
        display: block;
        float: left;
        border: 2px solid #999;
        height: 14px;
        width: 178px;
        padding: 4px;
        margin: 5px 0 0;
    }

    a#btnDIDSearch {
        display: block;
        float: left;
        width: 57px;
        height: 35px;
        text-indent: -9999px;
        background: transparent url("../../en-us/images/btnicon-search.gif") top left no-repeat;
    }
    
    a#btnDIDSearch:hover {
        background-position: 0 -35px;
    }
    
    a#btnDIDSearch:active {
        background-position: 0 100%;
    }


/* right column | press release section */

li#three .press {
    display: block;
    width: 318px;
}

li#three .press h4 {
    background: transparent url('../../en-us/images/heading-inthepress.png') top left no-repeat;
    text-indent: -9999px;
    width: 318px;
    height: 28px;
    margin: 22px 0 20px 0;
}

li#three .press ul {
    display: block;
    float: none;
    width: 300px;
    margin: 0 0 0 8px;
}

ul#content li#main ul#tri li#three .press ul li {
    display: block;
    float: none;
    clear: both;
    width: 280px;
    height: auto;
    padding-top: 0;
    font-size: 12px;
}

ul#content li#main ul#tri li#three .press ul li a {
    display: block;
    color: #fff;
    width: 270px;
    background: #306775;
    border-bottom: 1px solid #26505b;
    padding: 10px 15px;
}

ul#content li#main ul#tri li#three .press ul li:nth-child(even) a {
    background: #2b5c68;
}

ul#content li#main ul#tri li#three .press ul li a:hover {
    text-decoration: none;
    color: #e67e00;
    background: #4a818f;
}

ul#content li#main ul#tri li#three .press ul li a span {
    color: #000;
}

ul#content li#main ul#tri li#three .press ul li:first-child a {
    border-top: 1px solid #26505b;
    border-radius: 10px 10px 0 0;
}

ul#content li#main ul#tri li#three .press ul li:last-child a {
    border-radius: 0 0 10px 10px;
}