body {
    background:#000 url(background.gif);
    margin:0;
    padding: 0px;
    text-align:center;
    font: 12px "Trebuchet MS",Verdana,Arial,Sans-serif;
    color: #000;
}


/* Page Structure */

/* controls the secondary background image at bottom of page in most browsers */
#outer {
    background: url(background-bottom-alpha2.png) no-repeat bottom center;
}

/* main content area, excluding footer */
#content {
    width:770px;
    margin:0 auto;
    text-align:left;
    background: #fff;
}
.fieldError{
 color: red;
}

#main {
    width:540px;
    float:left;
    padding: 0;
    margin:0;
    color:#000;
    background: #fff;
    overflow: hidden;
}

#main2 {
    width: 540px;;
    float: right;
    padding: 0;
}

#main3 {
    border: none;    
}

#main .content {
    background-color: #fff;
    width: 476px;
    margin: 0 2px 0 2px;
    padding: 30px;
    font-size: 13px;
}

/* just like above without the padding */
#main .content-no-padding {
    background-color: #fff;
    width: 536px;
    margin: 0 2px 0 2px;
    font-size: 13px;
}

#main .content p {
    margin: 0.5em 0 0.5em 0;
}
/*
.kajeet {
    color: black;
}
*/

/* button class defines the look and behavior of 
   the rounded corner button links */
a.button {
    display: block;
    color: #fff;
    background: #8d0e3a url(../images/button-bg-left.gif) no-repeat left top;
    height: 20px;
    text-align: left;
    padding: 0 0 0 12px;
    margin: 0 0 5px 0;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    line-height: normal;
    cursor: hand;
}

a.button:link {
    color: #fff;
}

a.button span {
    display: block;
    background: url(../images/button-bg-right.gif) no-repeat right top;
    padding: 0px 22px 0 0;
    color: #fff;
    height: 20px;
    line-height: 18px;
}

/* maybe useful for controlling generic blocks that could be images*/
#link-blocks {
    width: 555px;
    float: right;
    margin-top: 15px;
}
#link-blocks a {
    margin: 0 10px 15px 0;
}

a.link-block {
    display: block;
}


/* sidebar */

#sidebar {
    width:180px;
    float:left;
    margin: 0;
    padding: 0 15px 0 20px;
}

#sidebar div.box {
    margin-bottom: 13px;
}

#sidebar #left-nav {
    width: 100%;
}


#sidebar #left-nav3 {
    padding: 30px 14px 30px 14px;
}


/* BEGIN left navigation */

#sidebar #left-nav ul.menuList {
    margin: 0;
    padding: 0;
    list-style: none;
}

#sidebar #left-nav ul.menuList li {
    margin: 10px 0px 10px 0px;
    padding: 0;
    letter-spacing: -1px;
    font-size: 19px;
}

#sidebar #left-nav ul.menuList li a {
    margin: 0px 15px 0px 15px;
    padding-left: 20px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
}

#sidebar #left-nav li > a {
    display: block;
}

#sidebar #left-nav ul.menuList li ul.submenu {
    padding: 1px 0 1px 0;
    margin: 2px 0 2px 0;
    list-style: none;
}

#sidebar #left-nav ul.menuList li ul.submenu li {
    font-weight: bold;
    margin: 3px 0 3px 0;
    padding: 0;
    letter-spacing: -1px;
    font-size: 16px;
}

#sidebar #left-nav ul.menuList li ul.submenu li a {
    padding-left: 15px;
    font-weight: bold;
    margin: 0 0 0 20px;
    background-image: none;
    text-decoration: none;
    display: inline-block;
}

#sidebar #left-nav ul.menuList li.active ul.submenu li a.active,
#sidebar #left-nav ul.menuList li.active ul.submenu li a:hover {
    margin: 0 0 0 20px;
}

/* END left navigation */

/* left navigation */
/*
#sidebar #left-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#sidebar #left-nav ul li {
    margin: 10px 0px 10px 0px;
    padding: 0;
    letter-spacing: -1px;
    font-size: 19px;
}

#sidebar #left-nav ul li a {
    margin: 0px 15px 0px 15px;
    padding-left: 20px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
}

#sidebar #left-nav li > a {
    display: block;
}
*/
/* left nav navigation level 2 */
/*
#sidebar #left-nav li.active ul {
    padding: 1px 0 1px 0;
    margin: 2px 0 2px 0;
}

#sidebar #left-nav li.active li {
    font-weight: bold;
    margin: 3px 0 3px 0;
    font-size: 16px;
}

#sidebar #left-nav li.active li a{
    padding-left: 15px;
    font-weight: bold;
    margin: 0 0 0 20px;
    background-image: none;
}

#sidebar #left-nav li.active li.active a,
#sidebar #left-nav ul li.active li a:hover {
    margin: 0 0 0 20px;
}
*/
/* left nav subnavigation level 3 */
/*
#sidebar #left-nav li.active li.active ul {
    padding: 1px 0 1px 0;
    margin: 2px 0 2px 0;
}

#sidebar #left-nav li.active li.active li {
    font-weight: bold;
    margin: 3px 0 3px 0;
    font-size: 12px;
}

#sidebar #left-nav li.active li.active li a {
    padding-left: 15px;
    font-weight: bold;
    margin: 0 0 0 20px;
    background: none;
}

#sidebar #left-nav ul li.active li.active li a:hover {
    margin: 0 0 0 20px;
    background: none;
}
*/











/* search box - same in all sections? */

#sidebar #searchbox {
    width: 100%;
    background: #00acee url(../images/searchbox-corners-top.gif) no-repeat top;
}

#sidebar #searchbox2 {
    background: url(../images/searchbox-corners-bot.gif) no-repeat bottom;
}

#sidebar #searchbox3 {
    padding: 30px 14px 30px 14px;
}

#sidebar #searchbox form {
    margin: 0;
    padding: 0;
}

#sidebar #searchbox p {
    color: #fff;
    padding-left: 20px;
    background: url(../images/searchbox-bullet.gif) no-repeat center left;
    font-size: 1.4em;
    margin: 0;
}

#sidebar #searchbox input {
    width: 150px;
    height: 20px;
    border: none;
    font-size: 1.2em;
}

#page-title {
    clear: both;
    margin: 0 0 5px 20px;
    height: 50px;
}

#page-title h1 {
    font-size: 3em;
    margin: 0;
}



/* Links
----------------------------------------------- */
a:link {
color:#ed174f;
}
a:visited {
color:#666;
}
a:hover {
color:#8d0e38;
}
a img {
border-width:0;
}


/* Header */

#logo {
    margin:8px 0 0 0;
    float: left;
    padding: 0 0 0 20px;
}

#logo a {
    display: block;
    width: 312px;
    height: 149px;
    background: url(kajeet-logo-beta.gif) no-repeat;
}


/* top navigation */

#top-nav {
    float: right;
    margin: 0;
    padding: 0 15px 0 0;
    font-size: 12px;
}

#top-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 222px;
}

#top-nav ul li {
	position: relative;
}


#top-nav li ul {
	position: absolute;
	left: -147px; /* Set 1px less than menu width */
	top: 0;
	display: none;
    width: 147px;
    height: 155px;
    padding: 17px 0 0 0;
    margin: 0;
}

/* top level items */
#top-nav ul li a {
	display: block;
    width: 222px;
    height: 30px;
	text-decoration: none;
	color: #fff;
	background: none; /* IE6 Bug */
	padding: 0;
	border-bottom: 0;
	}

/* 2nd level items */
#top-nav ul li ul li a {
    width: 100px;
    height: auto;
    margin: 0 0 7px 0;
    padding: 0 0 0 13px;
    overflow: hidden;
    line-height: 115%;
    font-weight: bold;
    font-size: 13px;
}

#top-nav li li {
    padding: 0;
}
    
/* Fix IE. Hide from IE Mac \*/
* html #top-nav ul li { float: left; height: 1%; }
* html #top-nav ul li a { height: 30px; }
/* End */

#top-nav ul li a:hover { color: #fff;} /* Hover Styles */
		
#top-nav li ul li a:hover {
    color: #000;
} 
		
#top-nav li:hover ul, 
#top-nav li.over ul { display: block; } /* The magic */

/* styles specific to each nav section (background images) */
/* caution: many ie6- hacks here */

#top-nav li#phones-and-accessories {
    background: url(../images/P&A_rest.gif);
}

#top-nav #phones-and-accessories.active,
#top-nav #phones-and-accessories:hover,
#top-nav #phones-and-accessories.over a
{
    background: url(../images/P&A_roll.gif);
}

#top-nav li#phones-and-accessories.over li a {
    background: none;
}


#top-nav li#phones-and-accessories ul {
    background: url(../images/top-nav_sub_pa.gif) no-repeat;
}


#top-nav li#services-and-rates {
    background: url(../images/S&R_rest.gif);
}

#top-nav li#services-and-rates.active,
#top-nav li#services-and-rates:hover,
#top-nav li#services-and-rates.over a
{
    background: url(../images/S&R_roll.gif);
}

#top-nav li#services-and-rates.over li a {
    background: none;
}


#top-nav li#services-and-rates ul {
    background: url(../images/top-nav_sub_sr.gif) no-repeat;
    top: -30px;
}

#top-nav li#why-kajeet {
    background: url(../images/WK_rest.gif);
}

#top-nav li#why-kajeet:hover,
#top-nav li#why-kajeet.active,
#top-nav li#why-kajeet.over a
{
    background: url(../images/WK_roll.gif);
}

#top-nav li#why-kajeet.over li a {
    background: none;
}

#top-nav li#why-kajeet ul {
    background: url(../images/top-nav_sub_wk.gif) no-repeat;
    top: -60px;
}

#top-nav li#get-the-good-stuff {
    background: url(../images/GG_rest.gif);
}

#top-nav li#get-the-good-stuff ul {
	background: url(../images/top-nav_sub_gtg.gif) no-repeat;
	top: -90px;	
}

#top-nav li#get-the-good-stuff:hover,
#top-nav li#get-the-good-stuff.active,
#top-nav li#get-the-good-stuff.over a
{
    background: url(../images/GG_roll.gif);
}

#top-nav li#get-the-good-stuff.over li a {
    background: none;
}

#top-nav li#my-kajeet {
    background: url(../images/MK_rest.gif);
}

#top-nav li#my-kajeet:hover,
#top-nav li#my-kajeet.active,
#top-nav li#my-kajeet.over a
{
    background: url(../images/MK_roll.gif);
}

#top-nav li#my-kajeet.over li a {
    background: none;
}


#top-nav li#my-kajeet ul {
    background: url(../images/top-nav_sub_mk.gif) no-repeat;
    top: -120px;
}


#top-utility-nav {
    margin: 0;
    padding: 15px 15px 8px 0;
    text-align: right;
    clear: both;
    font-size: 10px;
    font-weight: bold;
    line-height: 100%;
}

#top-utility-nav a {
    text-decoration: none;
}

#top-utility-nav a.cart {
    padding-right: 12px;
}




/* Footer */

#footer {
    width: 770px;
    margin:0 auto;
    clear:both;
}

#footer2 {
    margin:0 0 0px 0;
    padding: 0 0 20px 0;
    text-align: left;
    color: #000;
    font-size: 11px;
    line-height: 1.5em;
}

#footer3 {
    height: 141px;
    width: 770px;
}

#buildfooter {
	text-align: right;
	color: #ff0;
	padding: 0px 20px 10px 0px;
	font-size: 10px;
}
	
#back-to-top {
    padding: 65px 0 0 20px;
}

#back-to-top a {
    display: block;
    width: 82px;
    height: 62px;
    text-decoration: none;
}

#bottom-nav {
    margin-left: 41px;
    padding: 10px;
    font-weight: normal;
}

#bottom-nav a {
    text-decoration: none;
}

#bottom-nav p {
    color: #000;
    margin: 0;
}


/* tabbed interface */

.tabs {
    clear: both;
    padding-top: 14px;
}

.tabs .row-front,
.tabs .row-back {
    float:left;
    width:100%;
    font-size:93%;
    line-height:normal;
    position: relative;
}

.tabs .row-back {
    margin-bottom: -30px;
}

.tabs .row-front ul,
.tabs .row-back ul {
    margin:0;
    padding:0;
    list-style:none;
}

.tabs .row-front li,
.tabs .row-back li {
    float:left;
    margin:0 2px 0 0;
    padding:0 0 0 20px;
}

.tabs .row-front a, 
.tabs .row-front strong, 
.tabs .row-front span,
.tabs .row-back a, 
.tabs .row-back strong, 
.tabs .row-back span {
    display:block;
    padding:5px 20px 4px 0px;
    text-decoration: none;
}

.tabs .row-back a {
    padding-bottom: 33px;
}

.tabs .row-front .current a {
    color: #fff;
    font-weight: bold;
}

.tabs .row-front a:hover,
.tabs .row-back a:hover {
    color: #fff;
}


/* form controls */

form {
    margin: 0;
    padding: 0;
}

select {
    border: 1px solid #7F9DB9;
    padding: 2px;
    font-size: 0.9em;
}

input {
    border: 1px solid #7F9DB9;
}


/* dynamically-placed images (or other objects) */

.dynamic {
    position: absolute;
    visibility: hidden;
}


/* contextual help rollover */

.dialog {
    width:404px;
    margin:0px auto;
    min-width:300px;
    position: absolute;
    z-index: 50000;
    display: none; 
    visibility: hidden;
}

.dialog .hd .c,
.dialog .ft .c {
    font-size:1px; /* ensure minimum height */
    height:31px;
}

.dialog .ft .c {
    height:31px;
}

.dialog .hd {
    background:transparent url(../images/dialog/top-left.png) no-repeat 0px 0px;
}

.dialog .hd .c {
    background:transparent url(../images/dialog/top-right.png) no-repeat right 0px;
}

.dialog .bd {
    background:transparent url(../images/dialog/middle-left.png) repeat-y 0px 0px;
}

.dialog .bd .c {
    background:transparent url(../images/dialog/middle-right.png) repeat-y right 0px;
    min-height: 100px;
}

.dialog .bd .c .s {
    margin:0px 8px 0px 4px;
    padding:1em;
}

.dialog .ft {
    background:transparent url(../images/dialog/bottom-left.png) no-repeat 0px 0px;
}

.dialog .ft .c {
    background:transparent url(../images/dialog/bottom-right.png) no-repeat right 0px;
}

.dialog-pointer {
    width: 43px;
    height: 39px;
    background: url(../images/dialog/pt-bottom.png) no-repeat;
    position: absolute;
    z-index: 50001;
}

.dialog-pointer-top {
    background: url(../images/dialog/pt-top.png) no-repeat;
}


.dialog .content-dialog {
    border: 1px solid #fff;
    margin: 0px 30px;
    text-align: left;
}

.dialog h1 {
    font-size: 1.5em;
    font-weight: bold;
    color: #00acee;
    margin: 0;
    padding: 0;
}

.dialog p {
    margin: 0;
    padding: 0;
}

.dialog ul,
.dialog ol
{
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}



/* fix for ie/mozilla layout inconsistencies */

.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */


/* added to look of loging */
div#loginTable {
    padding: 10px 10px 10px 15px;
}