@charset "utf-8";
/* CSS for free cities iphone app website*/
/* Date: 4th July 2008 */

body{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	margin:0px;
	padding:0px;
	position:relative;
}
h1{
	font-size:24px;
	margin:0px 0px 5px 20px;
	padding:0px;
	color:#333333;
}
.header-bg{
	width:100%;
	height:112px;
	background:url(images/header_bg.gif) top left repeat;
	position:relative;
	min-width:940px;
}
.header{
	width:840px;
	height:94px;
	margin:0 auto;
	position:relative;
	padding-left:70px;
	padding-right:70px;
}

.logo{
	background:url(images/logo.png) top left repeat;
	width:434px;
	height:93px;
	margin-left:10px;
}
.menu{
	position:absolute;
	top:55px;
	right:70px;
	height:37px;
}
.m-left{
	height:37px;
	width:7px;
	float:left;
	background:url(images/menu_left.gif) top left no-repeat;
}
.m-middle a{
	float:left;
	margin:10px 30px;
	display:block;
	width:66px;
	height:19px;
	float:left;
	text-align:center;
	color:#000000;
	text-decoration:none;
	font-weight:bold;
	text-transform:uppercase;
	padding-top:2px;
	}
.m-middle a.selected{
	background:url(images/menu_link_bg.gif) top  left no-repeat;
	color:#FFFFFF;
	}
.m-middle a:hover{
	background:url(images/menu_link_bg.gif) top  left no-repeat;
	color:#FFFFFF;
	}

	.m-middle{
	height:37px;
	float:left;
	background:url(images/menu_middle.gif) top left repeat-x;
	}
.m-right{
	height:37px;
	width:7px;
	float:left;
	background:url(images/menu_right.gif) top right no-repeat;
}
.wrapper{
	width:100%;
	margin:0 auto;
	position:relative;
}
.content-top{
	background:#FFFFFF url(images/left_bar_bg.gif) top left repeat-y;
	height:20px;
}
.content{
	width:910px;
	background:#FFF;
	margin:0 auto;
	border-top:none;
	background:url(images/wrapper_bg.gif) top left no-repeat;
	padding-left:70px;	
}

.left-bar{
	background:url(images/left_bar_bg.gif) top left repeat-y;
	float:left;
	width:172px;
}
.app-icon{
	width:202px;
	height:72px;
	background:url(images/icon_shadow.gif) 6px 60px no-repeat;
	margin:29px 0px 0px 0px;
	padding:10px 0px 0px 5px;
}
.app-icon img{
	padding-left:9px;
	border:none;
	float:left;
}
.app-icon a{
	border:none;
	text-decoration:none;
	color:#0066CC;
	font-weight:bold;
}
.app-icon a span{
	padding:22px 0px 10px 5px;
	display:block;
	float:left;

}
.app-icon.selection{
	background:url(images/selection.gif) top left no-repeat;
	paddind:10px 0px 0px 5px
}
.app-icon:hover{
	background:url(images/selection.gif) top left no-repeat;
	paddind:10px 0px 0px 5px
}

.main-content{
	position:relative;
	float:left;
	width:668px;
}

.details{
	font-size:13px;
	color:#333333;
	margin:0px 20px 20px; 
}
.coming-soon{
	float:left;
	height:85px;
	width:668px;
	padding-left:15px;
	padding-bottom:15px;
}
.note{
	background:url(images/coming_soon_bg.gif) top left no-repeat;
	width:160px;
	height:78px;
	padding:16px;
	float:left;
}
.note b{
	padding-bottom:8px;
	display:block;
}
.coming-soon img{
	padding-left:20px;
}
.clear{
	clear:both;
}
.float-left{
	float:left;
}

.hint{
	width:126px !important;
	float:left;
}
/* left hint */
.hint-top-l{
	background:url(images/hint_t_l.png) top left no-repeat;
	height:5px;
	font-size:0px;
}
.hint-middle-l{
	background:#555655 url(images/hint_m_l.png) top left repeat-y;
	font-size:11px;
	color:#FFFFFF;
	padding:4px 5px;
}
.hint-bottom-l{	
	background:url(images/hint_b_l.png) top left no-repeat;
	height:9px;
	font-size:0px;
}
.hint-l{
	background:url(images/hint_l.png) top left no-repeat;
	height:26px;
	width:16px;
	float:left;
	margin-top:6px;
}


/* right hint */
.hint-top-r{
	background:url(images/hint_t_r.png) top left no-repeat;
	height:5px;
	font-size:0px;
}
.hint-middle-r{
	background:#555655 url(images/hint_m_r.png) top left repeat-y;
	font-size:11px;
	color:#FFFFFF;
	padding:4px 5px;
}
.hint-bottom-r{	
	background:url(images/hint_b_r.png) top left no-repeat;
	height:9px;
	font-size:0px;
}
.hint-r{
	background:url(images/hint_r.png) top left no-repeat;
	height:26px;
	width:15px;
	float:left;
	margin-top:5px;
}


.iphone-bg-small-left{
	background:url(images/iphone_small_left.gif) 37px 0px no-repeat;
	width:270px;
	height:390px;
	margin:10px;
	float:left;	
}
.iphone-bg-small-right{
	background:url(images/iphone_small_right.gif) 10px 0px no-repeat;
	width:270px;
	height:390px;
	margin:10px;
	float:left;
}
.price-tag{
	background:url(images/price_tag.png) top left no-repeat;
	width:66px;
	height:64px;
	position:absolute;
	top:-5px;
	left:10px;
}
.app-store{
	width:100px;
	height:35px;
	position:absolute;
	top:-15px;
	left:562px;	
}
.app-store img{
	border:none;
}
.callout1{
	position:absolute;
	top:290px;
	left:224px;
}
.callout2{
	position:absolute;
	top:64px;
	left:525px;
}

.callout3{
	position:absolute;
	top:290px;
	left:515px;
}

.callout4{
	position:absolute;
	top:100px;
	left:195px;
}

/* ------------------- Support form ----------------*/
.support label
{
	width: 120px;
	float: left;
	text-align: right;
	margin-right: 5px;
	display: block
}

.support input
{
	width: 220px;
}

.support  .submit 
{
	margin-left: 473px;
} 
/* ------------- Product List -----------*/
.pro-box{
	background:#F8F8F8 none repeat scroll 0 0;
	border:1px solid #DDDDCC;
	padding: 5px;
	width: 500px;
	float:left;
	margin:0px 0px 15px 50px;
}
.pro-app-icon{
	width:300px;
	height:61px;
	background:url(images/icon_shadow.gif) 6px 50px no-repeat;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 5px;
	float:left;
}
.pro-app-icon span{
	padding:15px 0px 0px 10px;
	font-size:20px;
	color:#333333;
	display:block;
	float:left;
	
}
.pro-app-icon img{
	padding-left:9px;
	border:none;
	float:left;
}

.pro-box .link{
	float:right;
	margin-top:17px;
}
/* -------------- buttons ---------------------*/
.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}

a.button {
    background: transparent url(images/bg_button_a.gif) no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

a.button span {
    background: transparent url(images/bg_button_span.gif) no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
} 
a.button:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}

a.button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
} 
/* ------------ Product page --------------------*/
.product .iphone-bg-small-left{
	width:240px;
}
.product .details{
	float:left;
	width:360px;
}
.product .price-tag{
	background:url(images/price_tag.png) top left no-repeat;
	width:66px;
	height:64px;
	position:absolute;
	top:35px;
	left:20px;
}
.product img{
	float:left;
	padding:5px 0px;
}
.product h1{
	margin-left:0px;
}
.product ul{
	margin-top:5px;
	float:left;
	padding-left:25px;
}
.product ul li{

}

.product .float-left{
	width:350px;
}

/* ----------------- footer -------------------------*/
.footer-outer{
	background:url(images/content_bg_bottom.gif) top left no-repeat;
	height:21px;
	margin:0 auto;
	width:840px;
}
.footer-bg{

	background:url(images/footer_bg.gif) top left repeat;
	width:100%;

}
.footer{
	width:840px;
	margin:0 auto;
	text-align:center;
	color:#FFFFFF;
}