/*
	BigTinCan Main CSS
	Roel Pollers
	November 2009
*/


html {
	font: small Verdana, Arial, Helvetica, sans-serif;
	font-size: 15px; /* Resets 1em to 10px */
	font-weight: bold;
	/*min-height: 101%;*/
}

body {
	margin: 0;
	padding: 0;
}

form { margin: 0; padding: 0; }

a img { border: 0; }

table {	border-collapse: collapse; }

h1, h2, h3, h4, h5, h6, p, ul, ol, li {
	padding: 0;
	margin: 0;
}

a {	color: #62c1e9;	}

a:hover { text-decoration: none; }

a:focus { outline: 0; }

.clear { clear: both; }

.hidden { display: none; }

.blue {	color: #29b0e9; font-weight: bold;}

.bold { font-weight: bold; }

.heightSpacer4 {height: 1px; clear: both;}

#col {
	margin: 0 auto;
	padding: 0;
}

#head {
	position: relative;
	height: 103px;
}

.buzztd {
	padding-left:4px;
	border: 1px solid #cccccc;
	vertical-align:top;
}

#head h1 a {
	display: block;
	width: 309px;
	height: 180px;
	background: url("../img/bigtincan300x175.jpg") no-repeat;
	position: absolute;
	left: 0px;
	top: 4px;
}

#head #shortcuts {
	position: absolute;
	right: 10px;
	top: 45px;
	width: 550px;
}

#head #shortcuts .sc {
	position: relative;
	float: left;
	width: 120px;
	height: 100px;
/*	
	border: 1px solid #eee;
*/
}

#head #shortcuts a.sc {
	position: absolute;
	display: block;
}

#head #shortcuts #countries {
	width: 140px;
}

#head #shortcuts #countries a {
	display: block;
	width: 19px;
	height: 90px;
	background: url("../img/sc-country.jpg") no-repeat 0 0;
	
	position: relative;
	top: -4px;
	left: 3px;
}

#head #shortcuts #countries a:hover {
	background-position: 0 -90px;
}

#head #shortcuts #countries select {
	display: block;
	position: relative;
	top: 2px;
	left: 4px;
	font: small Arial, Helvetica, sans-serif;
	font-size: 10px;
	background: #fff;
	border: 1px solid #aaa;
	width: 130px;
}

#head #shortcuts a#register {
	position: absolute;
	display: block;
	left: 162px;
	top: -4px;
	display: block;
	width: 111px;
	height: 106px;
	background: url("../img/sc-login.jpg") no-repeat 0 0;
}

#head #shortcuts a#register:hover { background-position: 0 -106px; }

#head #shortcuts a#iphone {
	position: absolute;
	left: 213px;
	top: -4px;
	display: block;
	width: 116px;
	height: 106px;
	background: url("../img/sc-iphone.jpg") no-repeat;
}

#head #shortcuts a#iphone:hover { background-position: 0 -106px; }

#head #shortcuts a#java {
	position: absolute;
	
	left: 389px;
	top: -4px;

	display: block;
	width: 111px;
	height: 106px;
	background: url("../img/sc-java.jpg") no-repeat;
}

#head #shortcuts a#java:hover { background-position: 0 -106px; }

#buttons {
  float: left;
  height: 32px;
  width=200px;
  padding-top:10px;
  top: 12px;
  left: 300px;
}

#nav {
	clear: both;
	background: url("../img/horizon.jpg") no-repeat 0 0;
  height: 42px;
	position: relative;
	width:865px;
}

#nav ul {
	list-style: none;
	position: absolute;
	left: 265px;
	top: 33px;
}

#nav li {
	float: left;
  display: inline;
}

#nav li a {
	float: left;
	display: block;
	height: 25px;
}

#nav li a span { display: none; }

#nav #nav-home {
	width: 105px;
	background: url("../img/nav-whatisit.gif") no-repeat;
}

#nav a#nav-home:hover {	background-position: 0 -25px; }

#nav #nav-features {
	width: 103px;
	background: url("../img/nav-features.gif") no-repeat;
}

#nav a#nav-features:hover { background-position: 0 -25px; }

#nav #nav-howdoistart {
	width: 167px;
	background: url("../img/nav-howdoistart.gif") no-repeat;
}

#nav a#nav-howdoistart:hover { background-position: 0 -25px; }



#nav #nav-faq {
	width: 58px;
	background: url("../img/nav-faq.gif") no-repeat;
}

#nav a#nav-faq:hover { background-position: 0 -25px; }

#nav #nav-downloads {
	width: 131px;
	background: url("../img/nav-downloads.gif") no-repeat;
}

#nav a#nav-downloads:hover { background-position: 0 -25px; }

#nav #nav-contact {
	width: 97px;
	background: url("../img/nav-contact.gif") no-repeat;
}

#nav a#nav-contact:hover { background-position: 0 -25px; }

#nav #nav-numbers {
	width: 111px;
	background: url("../img/nav-numbers.gif") no-repeat;
}

#nav a#nav-numbers:hover { background-position: 0 -25px; }

#nav #nav-support {
	width: 97px;
	background: url("../img/nav-support.gif") no-repeat;
}

#nav a#nav-support:hover { background-position: 0 -25px; }

#foot_iframe {
  margin: 0 auto;
  position: relative;

  color: #919090;
  font-size: 0.9em;
}

#foot_iframe a {
        color: #919090;
        text-decoration: none;
}

#foot_iframe a:hover {
        text-decoration: underline;
}

#foot_iframe .left {
        /*width: 440px;
        float: left;
        position: relative;
        background: url("../img/slash.gif") no-repeat 80px 0;
        height: 30px*/
}

#foot_iframe #slash {
        background: url("../img/slash.gif") no-repeat;
        width: 8px;
        height: 30px;
        position: absolute;
        left: 250px;
        top: 0;
}

#foot_iframe .right {
        width: 320px;
        float: right;
        text-align: right;
        position: absolute;
        top:0px;
        right:0px;
}

#foot_iframe .left a {
        /* position: absolute; */
}

#foot_iframe #f-corps {
        left: 18px;
        top: 0;
}

#foot_iframe #f-corp{
        padding-right:20px;
}

#foot_iframe #f-about {
        /* left: 24px;
        top: 13px; */
}

#foot_iframe #f-management {
        /* left: 24px;
        top: 26px; */
}

#foot_iframe #f-investor {
        /* left: 24px;
        top: 39px; */
}

#foot_iframe #f-legals {
        /* left: 150px;
        top: 0; */
}

#foot_iframe #f-legal {
        padding-right:40px;
}

#foot_iframe #f-terms {
        /* left: 155px;
        top: 26px; */
}
#foot_iframe #f-privacy {
        /* left: 155px;
        top: 13px; */
}



#foot_iframe #f-license {
        /* left: 155px;
        top: 39px; */
}

#foot {
	width: 760px;
	margin: 0 auto;
	position: relative;
	top: 50em;
	color: #919090;
	font-size: 0.9em;
}

#foot a {
	color: #919090;
	text-decoration: none;
}

#foot a:hover {
	text-decoration: underline;
}

#foot .left {
	width: 440px;
  top:-30px;
  left: -50px;
	float: left;
	position: relative;
}

#foot #slash {
	background: url("../img/slash.gif") no-repeat;
	width: 8px;
	height: 30px;
	position: absolute;
	left: 250px;
	top: 0;
}

#foot .right {
	width: 320px;
	float: right;
	text-align: right;
	position: absolute;
	top:-35px;
	right:-50px;
}

#foot .left a {
	/* position: absolute; */
}

#foot #f-corps {
	left: 18px;
	top: 0;
}

#foot #f-corp{
	padding-right:20px;
}

#foot #f-about {
	/* left: 24px;
	top: 13px; */
}

#foot #f-management {
	/* left: 24px;
	top: 26px; */
}

#foot #f-investor {
	/* left: 24px;
	top: 39px; */
}

#foot #f-legals {
	/* left: 150px;
	top: 0; */
}

#foot #f-legal {
	padding-right:40px;
}

#foot #f-terms {
	/* left: 155px;
	top: 26px; */
}
#foot #f-privacy {
	/* left: 155px;
	top: 13px; */
}



#foot #f-license {
	/* left: 155px;
	top: 39px; */
}


#frame {
	position: relative;
  top: 0px;
  padding-top:25px;
	width: 870px;
	margin: 0 auto;
}

#frame .scroll {
	display: block;
	width: 30px;
	height: 31px;
	position: absolute;
	top: 145px;
}

#frame a#scroll_left {
	top: 170px;
	left: 0;
	background: url("../img/arrow_left.jpg") no-repeat;
}

#frame a#scroll_right {
  float: right;
	right:0px;
	background: url("../img/arrow_right.jpg") no-repeat;	
}

#frame a#scroll_left:hover, #frame a#scroll_right:hover {
	background-position: 0 -31px;
}

#frame #scroller {
	width: 820px;
	overflow: hidden;
	height: 47em;
	position: absolute;
	left: 53px;
}

#frame #content {
	position: relative;
	width: 8980px;
	/* width needs to be a multiple of 770, MINUS 40px padding */
	
	padding: 20px;
	font-family: "HelveticaNeue-Light", Helvetica, Arial, sans-serif;
	font-size: 1.4em;

	/* change left here to start at a page other than the first @@@ */
	/* eg 'howdoistart' = left: -3080px */
	
	left: 0;

}


#frame #home {
	position: absolute;
	left: 0;
}

	#frame #home .left {
		width: 190px;
		float: left;
	}

	#frame #home .right {
		width: 580px;
		float: left;
	}

	#frame #home .left h4 {
		width: 131px;
		height: 60px;
		background: url("../img/title-what-can.gif") no-repeat;
		position: relative;
		top: 4px;
		left: 14px;
	}

	#frame #home .left img {
		display: block;
		position: relative;
		top: 28px;
		left: 18px;
	}

	#frame #home .right p {
		padding: 2px 0 28px 5px;
		line-height: 135%;
	}

	
	#frame #home .right div {
		padding: 10px 0 17px 80px;
	}

	#frame #home .right #h-30cmin {
		background: url("../img/PiggyBank.jpg") no-repeat 5px 10px;
		padding-bottom: 6px;
	}

  #frame #home .right #h-30cmin h1, #frame #home .right #h-10cmsg h1, #frame #home .right #h-free h1, #frame #home .right #h-mobile h1 {
		margin-bottom:2px;
		font-size: 14px;
	}

	#frame #home .right #h-10cmsg {
		background: url("../img/Audio-Multimedia.jpg") no-repeat 15px 15px;
		padding-bottom: 6px;
	}

	#frame #home .right #h-free {
		background: url("../img/page01_comstat.gif") no-repeat 0px 14px;
		padding-bottom: 6px;
	}

	#frame #home .right #h-mobile {
		background: url("../img/twitts.gif") no-repeat 1px 9px;
	}

	
	#frame #home .right a#h-forfree {
		padding-left: 0;
		display: block;
		width: 175px;
		height: 17px;
		background: url("../img/but_tryitfree.gif") no-repeat;
		
		position: relative;
		top: 21px;
		left: 13px;
	}	

#frame #features {
	position: absolute;
	left: 820px;
}

	#frame #features .left {
		width: 300px;
		float: left;
	}

	#frame #features .left h4 {
		width: 187px;
		height: 28px;
		background: url("../img/title-features.gif") no-repeat;
		position: relative;
		top: 7px;
		left: 15px;
	}

	#frame #features .left img {
		display: block;
		position: relative;
		top: 28px;
		left: 15px;
	}

	#frame #features .right {
		width: 470px;
		float: left;
		position: relative;
		left: -3px;
		top: 0px;
	}

	#frame #features .right h3 {
		font-size: 1.3em;
		font-weight: bold;
		padding: 0 0 0.5em 0;
	}
	
	#frame #features .right p {
		padding: 0.7em 0;
	}

	#frame #features .right ul {
		margin-top: -15px;	
		padding: 0.0em 0 0.7em 2px;
		list-style: none;
	}

	#frame #features .right ul li {
		padding: 0 0 2px 27px;
		background: url("../img/tick.gif") no-repeat 0 3px;
	}

	#frame #features .right a#f-wwv2 {
		display: block;
		width: 249px;
		height: 17px;
		background: url("../img/but_whatwillbe.gif") no-repeat;
	
		position: relative;
		top: 8px;
		left: 0px;
	}

	#frame #features .right a#f-wwv2:hover {
		text-decoration: underline;
	}


#frame #howdoistart {
	position: absolute;
	left: 2460px;
}

	#frame #howdoistart h3 {
		background: url("../img/title-howdoistart.gif") no-repeat;
		width: 217px;
		height: 51px;
		position: relative;
		left: 15px;
		top: 4px;
	}



	#frame #howdoistart #hdis-grid {
		position: relative;
	}

	#frame #howdoistart img {
		display: block;
	}

	#frame #howdoistart #hdis-iphone {
		display: block;
		height: 104px;
		width: 176px;
		background: url("../img/how_iphone.jpg") no-repeat 12px 6px;
		padding: 21px 0 0 84px;

		position: absolute;
		left: 194px;
		top: 37px;
	}

	#frame #howdoistart #hdis-mobile {
		display: block;
		height: 104px;
		padding: 21px 0 0 79px;
		background: url("../img/how_phone.jpg") no-repeat 0px 12px;

		position: absolute;
		left: 198px;
		top: 173px;
	}

	#frame #howdoistart #hdis-pc {
		display: block;
		height: 104px;
		padding: 22px 0 0 95px;
		background: url("../img/how_pc.jpg") no-repeat 4px 18px;
		
		position: absolute;
		left: 471px;
		top: 172px;

	}

	#frame #howdoistart #hdis-bb {
		display: block;
		height: 95px;
		padding: 22px 0 0 75px;
		background: url("../img/how_black.jpg") no-repeat 7px 15px;
		
		position: absolute;
		left: 481px;
		top: 34px;

	}


.howdoistart-title {
	width: 216px;
	height: 27px;
	background: url("../img/title-howdoistart_sm.gif") no-repeat;
	position: relative;
	top: 6px;
	left: 16px;
}

.subnav {
	position: relative;
	top: 6px;
	left: 16px;
	list-style-type: none;
	padding-top: 1em;
}

.subnav li a {
	text-decoration: none;
	color: #000;
	font-weight: bold;
}

.subnav li a:hover {
	text-decoration: underline;
}


#frame #howdoistart-iphone {
	position: absolute;
	left: 3280px;
}

	#frame #howdoistart-iphone h4 {
		font-size: 190%;
		font-weight: normal;
		position: relative;
		left: 330px;
		top: -40px;
		width: 80px;
		height: 20px;
		background: url("../img/title_iPhone.gif") no-repeat;
	}

	#frame #howdoistart-iphone img {
		position: relative;
		top: -60px;
		left: 182px;
	}

	#frame #howdoistart-iphone .list {
		position: relative;
		top: -330px;
		left: 330px;
	}

	#frame #howdoistart-iphone .list p {
		padding: 0 0 5px 0;
		font-weight: bold;
		width: 500px;
		position: relative;
	}

	#frame #howdoistart-iphone .list p span {
		position: absolute;
		left: 43px;
		font-weight: normal;
	}

	#frame #howdoistart-iphone .list #hdis-i-dl {
		padding: 0 0 0 20px;
		background: url("../img/icon_app.jpg") no-repeat 0 1px;
	}

#icons {
  position: absolute;
	right: 0px;
  top: 15px;
  width: 462px;
  height: 98px;
}

.icon {
  float: left;
}

.icon-spacer {
  float: left;
  width: 12px;
}

.bubble-wrap {
  display: none;
  position: absolute;
  z-index: 9999;
}

.bubble-top {
  border-top: 2px solid #929291;
  border-left: 2px solid #929291;
  border-right: 2px solid #929291;
  width: 223px;
  height: 5px;
  background-color: white;
}

.bubble-body {
  border-left: 2px solid #929291;
  border-right: 2px solid #929291;
  background-color: white;
  width: 223px;
}

.bubble-bottom {
  border-bottom: 2px solid #929291;
  border-right: 2px solid #929291;
  border-left: 2px solid #929291;
  width: 223px;
  height: 1px;
  background-color: white;
}
.bubble-inner {
  margin: 0px 5px 0 13px;
  font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
  font-size: 0.6em;
}

.bubble-inner h1 {
  font-size: 2em;
  height: 25px;
}

.bubble-body dl {
  font-size: 1.7em;
  margin: 0;
}

.bubble-body dt {
  font-weight: bold;
  float: left;
  padding-bottom: 0px;
}

.bubble-body dd {
  padding-bottom: 5px;
  margin-left: 23px;
}

#bubble-iphone {
  left: 272px;
  top: 10px;
}

#webcan {
  left: 465px;
  top: 10px;
}

#bubble-blackberry {
  left: 366px;
  top: 10px;
}

#bubble-facebook {
  left: 557px;
  top: 10px;
}

#bubble-winmo {
  left: 650px;
  top: 10px;
}

#frame #howdoistart-bb {
	position: absolute;
	left: 4100px;
}

	#frame #howdoistart-bb h4 {
		position: relative;
		left: 330px;
		top: -40px;
		width: 123px;
		height: 27px;
		background: url("../img/title_blackberry.gif") no-repeat;
	}

	#frame #howdoistart-bb img {
		position: relative;
		top: -71px;
		left: 171px;
	}

	#frame #howdoistart-bb .list {
		position: relative;
		top: -272px;
		left: 330px;
	}

	#frame #howdoistart-bb .list p {
		padding: 0 0 5px 0;
		font-weight: bold;
		width: 500px;
		position: relative;
	}

	#frame #howdoistart-bb .list p span {
		position: absolute;
		left: 43px;
		font-weight: normal;
	}
	
	#frame #howdoistart-bb .list p.l3 {
		top: 3.3em;
	}
	

#frame #howdoistart-mobile {
	position: absolute;
	left: 4920px;
}

	#frame #howdoistart-mobile h4 {
		position: relative;
		left: 330px;
		top: -40px;
		width: 180px;
		height: 27px;
		background: url("../img/title_mobile-1.gif") no-repeat;
	}

	#frame #howdoistart-mobile img {
		position: relative;
		top: -59px;
		left: 124px;
	}

	#frame #howdoistart-mobile .list {
		position: relative;
		top: -263px;
		left: 330px;
	}

	#frame #howdoistart-mobile .list p {
		padding: 0 0 5px 0;
		font-weight: bold;
		width: 500px;
		position: relative;
	}

	#frame #howdoistart-mobile .list p span {
		position: absolute;
		left: 43px;
		font-weight: normal;
	}

	#frame #howdoistart-mobile .list p.l2 {
		top: 0em;
	}

	#frame #howdoistart-mobile .list p.l3 {
		top: 2.2em;
	}



#frame #howdoistart-pc {
	position: absolute;
	left: 5740px;
}

	#frame #howdoistart-pc h4 {
		font-size: 190%;
		font-weight: normal;
		position: relative;
		left: 331px;
		top: -41px;
		width: 95px;
		height: 24px;
		background: url("../img/title_iCan.gif") no-repeat;
	}

  #frame #howdoistart-pc img {
    position: relative;
    top: -63px;
    left: 141px;
  }

	#frame #howdoistart-pc .list p {
		padding: 0 0 5px 0;
		font-weight: bold;
		width: 500px;
		position: relative;
		left:335px;
		top:-190px;
	}

	#frame #howdoistart-pc .list p span {
		position: absolute;
		left: 43px;
		font-weight: normal;
	}

	#frame #howdoistart-pc .list p.l2 {
		top: -184px;
	}




#frame #faq {
	position: absolute;
	left: 6560px;
}

	#frame #faq h3 {
		width: 64px;
		height: 35px;
		background: url("../img/title-faq.gif") no-repeat;
		position: relative;
		top: 5px;
		left: 17px;
	}

	#frame #faq dl {
		margin: 0;
		padding: 1em 1.5em;
		width: 700px;
		height: 26em;
		overflow: auto;
	}

	#frame #faq dt {
		margin: 0;
		padding: 2px 0 0 0;
		cursor: pointer;
	}

	#frame #faq dd {
		margin: 0;
		padding: 4px 0;
	}

	#frame #faq .q { color: #29b0e9; font-weight: bold;}
	#frame #faq .a { font-weight: bold; }

	#frame #faq dd ul {
		padding-left: 2em;
	}



#frame #roeltest {
  position: absolute;
  left: 1640px;
}

  #frame #roeltest h3 {
    width: 117px;
    height: 28px;
    background: url("../img/title-contact.gif") no-repeat;
    position: relative;
    top: 6px;
    left: 15px;
    padding: 0 0 8px 0;
  }

  #frame #roeltest .left {
    float: left;
    width: 400px;
    position: relative;
    left: 16px;
		padding-right:35px;
  }

  #frame #roeltest p {
    padding: 1.2em 0 0 0;
  }

  #frame #roeltest .phoneNum {
    color: #000;
    position: absolute;
    left: 100px;
  }

  #frame #roeltest .right {
    float: right;
    width: 241px;
	position: absolute;
		left:465px;
	top: 0px;
    font-size: 0.8em;
  }

  #frame #roeltest .right form div {
    padding: 5px 0;
  }

  #frame #roeltest input, #frame #roeltest select, #frame #roeltest textarea {
    border: 1px solid #ccc;
    padding: 2px;
    width: 190px;
    font-family: "HelveticaNeue-Light", Helvetica, Arial, sans-serif;
    font-size: 1em;
  }

#frame #contact {
	position: absolute;
	left: 7380px;
}

	#frame #contact h3 {
		width: 117px;
		height: 28px;
		background: url("../img/title-contact.gif") no-repeat;
		position: relative;
		top: 6px;
		left: 15px;
		padding: 0 0 8px 0;
	}

	#frame #contact .left {
		float: left;
		width: 400px;
		position: relative;
		left: 16px;
	}

	#frame #contact p {
		padding: 1.2em 0 0 0;
	}

	#frame #contact .phoneNum {
		color: #000;
		position: absolute;
		left: 100px;
	}

	#frame #contact .right {
		float: left;
		width: 311px;
		position: relative;
		font-size: 0.8em;
	}

	#frame #contact .right form div {
		padding: 5px 0;
	}

	#frame #contact input, #frame #contact select, #frame #contact textarea {
		border: 1px solid #ccc;
		padding: 2px;
		width: 190px;
		font-family: "HelveticaNeue-Light", Helvetica, Arial, sans-serif;
		font-size: 1em;
	}

	#frame #contact textarea {
		width: 260px;
		height: 110px;
	}

#frame #buzzme {
  position: absolute;
  left: 8200px;
}

  #frame #buzzme h3 {
    width: 117px;
    height: 28px;
    background: url("../img/title-buzzme.gif") no-repeat;
    position: relative;
    top: 6px;
    left: 15px;
    padding: 0 0 8px 0;
  }


  #frame #buzzme .left {
    float: left;
    width: 220px;
    position: relative;
    left: 16px;
  }

  #frame #buzzme p {
    padding: 1.2em 0 0 0;
  }

  #frame #buzzme .right {
    float: left;
    width: 550px;
    position: relative;
    font-size: 0.8em;
		top:-40px;
  }