/*Basic*/
.iphone {
	font: 75%/160% Helvetica, sans-serif;
	color: #333;
	position:relative;
}
    .iphone.vertical {
        width:320px;
        padding:124px 41px;
        background:url('images/iphone-vertical.jpg') 0 0 no-repeat;
    }
    .iphone.horizontal {
        width:480px;
        padding:34px 142px;
        background:url('images/iphone-horizontal.jpg') 0 0 no-repeat;
    }
.iphone .phone {
	position:relative;
	display:block;
	overflow:hidden;
}
	.iphone.vertical   .phone { width:100%;height:480px;min-height:480px }
	.iphone.horizontal .phone { width:100%;height:320px;min-height:320px }
	
.iphone a {
    color: #333;
    text-decoration:none;
}
.iphone a:active, .iphone a:focus {
    outline: 0;
}
.iphone a.external {
    color: #33a;
    text-decoration:underline;
}

.iphone ul, ol, li {
    margin:0;
    padding:0;
    list-style:none;
}
/*/Basic*/
.iphone .display {
	position:relative;
    display:block;
}
.iphone .screen{
    font-size:1.4em;
    font-weight:600;
    display:block;
    position:relative;
    width:100%;
    height:100%;
	min-width:320px;
	min-height:207px;
    background:#bbb;
    background-image:url('images/background.png');
}
.iphone .scroll{
    width:100%;
    height:100%;
}
    /* topbar=20px */
    .iphone.vertical .topbar + .screen,
    .iphone.vertical .topbar + .screen      .scroll { height:460px }
	
	/* tabbar=48px */
	.iphone.vertical .topbar + .screen.tabs,
    .iphone.vertical .topbar + .screen.tabs .scroll { height:412px }
	
	/* titlebar=45px */
    .iphone.vertical .topbar + .screen      .titlebar + .scroll { height:415px }
    .iphone.vertical .topbar + .screen.tabs .titlebar + .scroll { height:367px }

    .iphone.vertical .screen      .titlebar + .scroll { height:435px }
    .iphone.vertical .screen.tabs .titlebar + .scroll { height:387px }

    .iphone.horizontal .topbar + .screen,
    .iphone.horizontal .topbar + .screen      .scroll { height:300px }
	
	.iphone.horizontal .topbar + .screen.tabs,
    .iphone.horizontal .topbar + .screen.tabs .scroll { height:252px }
	
    .iphone.horizontal .topbar + .screen      .titlebar + .scroll { height:255px }
    .iphone.horizontal .topbar + .screen.tabs .titlebar + .scroll { height:207px }
	
    .iphone.horizontal .screen      .titlebar + .scroll { height:275px }
    .iphone.horizontal .screen.tabs .titlebar + .scroll { height:227px }

.iphone .display.home .screen{
    background:#000;
}
/*
.iphone .screen .scroll {
    height:100%;
}
*/
/*TopBar*/
.iphone .topbar {
    display:block;
    width:100%;
    height:20px;
    background:#bbb url('images/topbar.png') repeat-x;
}
.iphone .display.home .topbar {
	color:#fff;
    background:#000 !important;
}

/*/TopBar*/
/*TitleBar*/
.iphone .titlebar{
    position:relative;
    display:block;
    width:100%;
    height:45px;
    line-height:45px;
    font-size:1.3em;
    font-weight:900;
    color:#fff;
    text-align:center;
    text-shadow: #333 0px -1px 0px;
    background-image:url('images/titlebar.png');
}

.iphone .titlebar a {  
    color:#fff;
    font-size:12px;
    position:absolute;  
    height:30px;
    line-height:29px;
    top:8px;
    display:block;
    background:url('images/titlebar-buttons.png') 0 0 no-repeat;
}
.iphone .titlebar a em {
    display:block;
    width:8px;
    height:30px;
    position:absolute;
    top:0px;
}
.iphone .titlebar a.back{
    left:6px;
    padding-left:16px;    
}
.iphone .titlebar a.back em{
    right:-8px;
    background:url('images/titlebar-buttons.png') 100% 0 no-repeat;
}

.iphone .titlebar a:hover.back{ background-position:0 -32px }
.iphone .titlebar a:hover.back em{ background-position:100% -32px }

.iphone .titlebar a.forward{

    right:6px;
    padding-right:16px;   
    background:url('images/titlebar-buttons.png') 100% -64px no-repeat;
}

.iphone .titlebar a.forward em{
    left:-8px;
    background:url('images/titlebar-buttons.png') 0 -64px no-repeat;
}

.iphone .titlebar a:hover.forward{ background-position:100% -96px }
.iphone .titlebar a:hover.forward em{ background-position:0 -96px }

/*/TitleBar*/
/*Dock*/
.iphone .dock {
    display:block;
    width:100%;
    height:92px;
    position:absolute;
    bottom:0;
    left:0;
    background:url('images/dock.png') repeat-x 0 0;
}

.iphone .dock .app{
    height:92px;
}
.iphone .dock .app a{
    height:92px;
    line-height:170px;
}
/*/Dock*/
/*Tabs*/
.iphone .tabs {
    position:relative;
	height:480px;
}
.iphone .tab {
    position:relative;
    top:0px;
    left:0px;
    height:480px;
    width:100%
}
.iphone .tabbar {
	position:relative;
	top:-48px;
}
/*/Tabs*/

/*TabBarIcons*/
.iicon {
    position:relative;
}
.iicon em{
    position:absolute;
    display: block;
    width:48px;
    height:48px;
    background-image:url('images/icons.png');
    background-repeat:no-repeat;
}
.iicon .ii-refresh   {background-position:50% 0}
.iicon .ii-redo      {background-position:50% -48px}
.iicon .ii-loopback  {background-position:50% -96px}
.iicon .ii-squiggle  {background-position:50% -144px}

.iicon .ii-shuffle   {background-position:50% -192px}
.iicon .ii-magnify   {background-position:50% -240px}
.iicon .ii-marker    {background-position:50% -288px}
.iicon .ii-chat      {background-position:50% -336px}
.iicon .ii-chat2     {background-position:50% -384px}
.iicon .ii-medical   {background-position:50% -432px}
.iicon .ii-clock     {background-position:50% -480px}
.iicon .ii-eye       {background-position:50% -528px}
.iicon .ii-target    {background-position:50% -576px}
.iicon .ii-tag       {background-position:50% -624px}
.iicon .ii-tags      {background-position:50% -672px}
.iicon .ii-chartline {background-position:50% -720px}
.iicon .ii-chartbar  {background-position:50% -768px}
.iicon .ii-envelope  {background-position:50% -816px}
.iicon .ii-gear      {background-position:50% -864px}
.iicon .ii-gear2     {background-position:50% -912px}
.iicon .ii-skull     {background-position:50% -960px}
.iicon .ii-skull2    {background-position:50% -1008px}
.iicon .ii-bird      {background-position:50% -1056px}
.iicon .ii-gift      {background-position:50% -1104px}
.iicon .ii-weather   {background-position:50% -1152px}
.iicon .ii-bandaid   {background-position:50% -1200px}
.iicon .ii-planet    {background-position:50% -1248px}
.iicon .ii-star      {background-position:50% -1296px}
.iicon .ii-heart     {background-position:50% -1344px}
.iicon .ii-key       {background-position:50% -1392px}
.iicon .ii-ipod      {background-position:50% -1440px}
.iicon .ii-iphone    {background-position:50% -1488px}
.iicon .ii-cabinet   {background-position:50% -1536px}
.iicon .ii-coffee    {background-position:50% -1584px}
.iicon .ii-shopping  {background-position:50% -1632px}
.iicon .ii-toolbox   {background-position:50% -1680px}
.iicon .ii-suitcase  {background-position:50% -1728px}
.iicon .ii-airplane  {background-position:50% -1776px}
.iicon .ii-spraycan  {background-position:50% -1824px}
.iicon .ii-inbox     {background-position:50% -1872px}
.iicon .ii-frame     {background-position:50% -1920px}
.iicon .ii-photos    {background-position:50% -1968px}
.iicon .ii-filmroll  {background-position:50% -2016px}
.iicon .ii-shoebox   {background-position:50% -2064px}
.iicon .ii-movie1    {background-position:50% -2112px}
.iicon .ii-movie2    {background-position:50% -2160px}
.iicon .ii-fuel      {background-position:50% -2208px}
.iicon .ii-forkknife {background-position:50% -2256px}
.iicon .ii-battery   {background-position:50% -2304px}
.iicon .ii-beaker    {background-position:50% -2352px}
.iicon .ii-outlet    {background-position:50% -2400px}
.iicon .ii-pinetree  {background-position:50% -2448px}
.iicon .ii-house     {background-position:50% -2496px}
.iicon .ii-lock      {background-position:50% -2544px}
.iicon .ii-network   {background-position:50% -2592px}
.iicon .ii-cloud     {background-position:50% -2640px}
.iicon .ii-download  {background-position:50% -2688px}
.iicon .ii-bookmark  {background-position:50% -2736px}
.iicon .ii-flag      {background-position:50% -2784px}
.iicon .ii-signpost  {background-position:50% -2832px}
.iicon .ii-brightness {background-position:50% -2880px}
.iicon .ii-contrast  {background-position:50% -2928px}
.iicon .ii-runner    {background-position:50% -2976px}
.iicon .ii-zap       {background-position:50% -3024px}
.iicon .ii-note      {background-position:50% -3072px}
.iicon .ii-microphone {background-position:50% -3120px}
.iicon .ii-tshirt    {background-position:50% -3168px}
.iicon .ii-paperclip {background-position:50% -3216px}
.iicon .ii-display   {background-position:50% -3264px}
.iicon .ii-tv        {background-position:50% -3312px}
.iicon .ii-compass   {background-position:50% -3360px}
.iicon .ii-pin       {background-position:50% -3408px}
.iicon .ii-radar     {background-position:50% -3456px}
.iicon .ii-location  {background-position:50% -3504px}
.iicon .ii-phone     {background-position:50% -3552px}
.iicon .ii-baby      {background-position:50% -3600px}
.iicon .ii-ekg       {background-position:50% -3648px}
.iicon .ii-stopwatch {background-position:50% -3696px}
.iicon .ii-medicalbag {background-position:50% -3744px}
.iicon .ii-shoppingcart {background-position:50% -3792px}
.iicon .ii-dashboard {background-position:50% -3840px}
.iicon .ii-dogpow    {background-position:50% -3888px}
.iicon .ii-calendar  {background-position:50% -3936px}
.iicon .ii-lightbulb {background-position:50% -3984px}
.iicon .ii-trophy    {background-position:50% -4032px}
.iicon .ii-camera    {background-position:50% -4080px}
.iicon .ii-wineglass {background-position:50% -4128px}
.iicon .ii-beerglass {background-position:50% -4176px}
.iicon .ii-dumbells  {background-position:50% -4224px}
.iicon .ii-lifebuoy  {background-position:50% -4272px}
.iicon .ii-beaker2   {background-position:50% -4320px}
.iicon .ii-testtube  {background-position:50% -4368px}
.iicon .ii-thermometer {background-position:50% -4416px}
.iicon .ii-pill      {background-position:50% -4464px}
.iicon .ii-equalizer {background-position:50% -4512px}
.iicon .ii-book      {background-position:50% -4560px}
.iicon .ii-puzzlepiece {background-position:50% -4608px}
.iicon .ii-palette   {background-position:50% -4656px}
.iicon .ii-umbrella  {background-position:50% -4704px}
.iicon .ii-coffee    {background-position:50% -4752px}
/*/TabBarIcons*/
/*Applications*/
.iphone .app{
   display:block;
   width:80px; 
   height:80px;
}

.iphone .app a{
    display:block;
    width:80px; 
    height:80px;
    line-height:160px;
    color:#fff;
    font-size:12px;
    text-align:center;
}
	.iphone .app a:hover{
	    background:url('app/64x64/glossy.png') 8px 8px no-repeat;
	}

.iphone .app.upackinglist { background:url('app/64x64/upackinglist.png') 8px 8px no-repeat }
/*/Applications*/
/*Buttons*/
.iphone .bigbutton {
    position:absolute;
    display:block;
    width:64px;
    height:64px;
    text-indent:-99999px;
}
.iphone.vertical .bigbutton   { left:170px; bottom:42px; }
.iphone.horizontal .bigbutton { right:58px; top:160px;   }
/*/Buttons*/
/*Editor*/
.iphone .editor {
    width:340px;
    height:460px;
    overflow-y: scroll; 
    overflow-x: hidden;
    
    position:relative;
}
/*/Editor*/
/*Text*/
.iphone .text {
	background:#fff !important;
	font-size:14px;
	font-weight: 400;
    line-height: 24px;
	text-indent: 12px;
	padding:6px 4px;
}

.iphone h1,h2,h3 {
	padding:12px;
}

.iphone .text ul,
.iphone .text ol {
	
}

.iphone .text li {
	list-style-position:inside;
	list-style-type:circle !important;
	padding-left:12px;
}
/*/Text*/
/*List*/
.iphone .list {

}
.iphone .list h1,
.iphone .list h2,
.iphone .list h3 {
	color: #fff;
    text-indent: 12px;
    text-shadow: #333 0 0 2px;
    background: url(images/list-header.png) left top repeat-x;
}
.iphone .list h2 {
    padding:0;
    margin:0;
    font-size:1.2em;
    font-weight: 900;
    height: 32px;
    line-height: 32px;
}
.iphone .list h3 {
	background-position: 0 -32px;
    padding:0;
    margin:0;
    font-size:1em;
    font-weight: 900;
    text-shadow: #555 0 0 1px;
    height: 24px;
    line-height: 24px;
}

.iphone .list h1 a,
.iphone .list h2 a,
.iphone .list h3 a{
	float:right;
	font-size:0.8em;
	height:24px;
	line-height:24px;
	text-shadow: #555 0 0 0;
}

.iphone .list ul.inlist li {
    background: #efefef;
    border-top: solid 1px #ddd;
    text-indent: 12px;
    height: 40px;
    line-height: 40px;
}

.iphone .list p {
    background: #f5f5f5;
    border-top: solid 1px #ddd;
    text-indent: 12px;
    line-height: 16px;
	padding:12px 0;
}

/*/List*/

/*** Widgets ***/
.iphoneui a {
    color: #333;
    text-decoration:none;
}
.iphoneui a:active, .iphoneui a:focus {
    outline: 0;
}

.iphoneui .iclockui {
	font-weight:900;
	width:54px;
	margin:0 auto;
}
/*Scroll*/
.iscrollui{
    position:relative;
    overflow: hidden;
}
.iscrollbar{
    position:absolute;
    top:0px;
    right:0px;
    width:10px;
    display:none;
    z-index:999;
}

.iscrollbar div{
    margin:2px;
    width:6px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -khtml-border-radius: 2px;
    -webkit-border-radius: 2px;
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA9JREFUeNpiYmBgaAAIMAAAjwCD5Hc2/AAAAABJRU5ErkJggg==);
    background:rgba(0, 0, 0, 0.4);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#65000000, endColorstr=#65000000);

}
/*/Scroll*/
/*Menu*/
.imenuui {
	margin: 0;
    padding: 10px !important;
}
.imenuui li{
    background: #FFFFFF;
    position:relative;
    width:100%;
    height:44px;
    border: 1px solid #999;
    border-top: 0;
}
.imenuui li.first {
    border-top:1px solid #999;
    border-radius:10px 10px 0 0;
    -moz-border-radius:10px 10px 0 0;
    -khtml-border-radius:10px 10px 0 0;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
}
.imenuui li.last {
    border-radius:0 0 10px 10px;
    -moz-border-radius:0 0 10px 10px;
    -khtml-border-radius:0 0 10px 10px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
}
.imenuui li.single {
    border-top: 1px solid #999;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    -webkit-border-radius: 10px;
}

.imenuui li.active{
    background:#2472d4;
}
.imenuui .icon{
    text-indent:44px;
}
.imenuui .icon em{
    top:-2px;
    left:0px;
}
.imenuui li{
    text-indent:16px;
    line-height:44px;
    text-shadow: #999 0px 0px 1px;
}
.imenuui li a{
    display:block;
    text-indent:16px;
	text-decoration:none;
    font-size:1em;
    font-weight:900;
    color: #333;
    height:44px;
    line-height:44px;
    text-shadow: #ccc 0px 0px 1px;
}

.imenuui li .icheckboxui{
    position:absolute;
    right:10px;
    top:8px;
}

.imenuui li .arrow { background:url(images/arrows.png) 100% 14px no-repeat }
.imenuui li.active .arrow { background:url(images/arrows.png) 100% -57px no-repeat }

.imenuui li.active a {
    color:#eee;
    text-shadow: #eee 0px 0px 1px;
}
.imenuui li a span{
    position:absolute;
    display:block;
    height:44px;
    right:32px;
    top:0;    
    color:#777;
}
.imenuui li.active a span{
    color:#eee;
    text-shadow: #eee 0px 0px 2px;
}
/*/Menu*/
/*TabBar*/
.itabsui {
    display:block;
    width:100%;
    height:48px;
	padding:0;
	margin:0;
    background:url('images/tabbar.png') repeat-x 0 0;
}
.itabsui li {

    display:block;
    float:left;
    /*width:80px; setup in JS*/
    height:48px !important;
	padding:0;
	margin:0;
	background: none;
    border: 0;
    text-indent: 0;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -khtml-border-radius: 6px;
    -webkit-border-radius: 6px    
}
.itabsui li em{
    width:100% !important;
    top:-6px;
    left:0;
}
.itabsui li.active {
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABBJREFUeNpi/v//fyxAgAEACWgDXjXePfkAAAAASUVORK5CYII=);
    background:rgba(255, 255, 255, 0.1);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#45FFFFFF, endColorstr=#45FFFFFF);    
}
.itabsui a{
    display:block;
    width:100%;
    color:#ccc;  
    font-size:10px;
    font-weight:900;
    text-align:center;
    height:48px;
    line-height:80px;
}
.itabsui .active a{
    color:#fff; 
    text-shadow: #fff 0px 0px 2px;
}
.itabsui .iicon{
    /*position:absolute;*/
    /*margin-top:-6px;*/
}
/*/TabBar*/
/*Gallery*/
.igalleryui {
	background:#000 !important;
	overflow:hidden;	
}
.igalleryui .frame {
    width:auto;
    position:relative;
    cursor:pointer;
    background:#000 !important;
    padding:0 20px 0 0;
}
.igalleryui .slide{
    display:block;
    float:left;
    margin-left:20px;
}
/*/Gallery*/

/*Form Elements*/
/*Label*/
.ilabelui {

}
/*/Label*/
/*Checkbox*/
.icheckboxui {
    border-radius: 4px;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px;
    cursor:pointer;
    display:inline-block;
    width:94px;
    height:26px;
	line-height:26px;
    background: #2472d4 url('images/form-checkbox.png') 0 0 no-repeat;
}
.icheckboxui.off {
    background-position: 100% 0;
}
.icheckboxui.active {
    background-position: 0 100%;
}
.icheckboxui.active.off {
    background-position: 100% 100%;
}
/*/Checkbox*/
/*Radiobutton*/
.iradiobuttonui {
    border-radius: 4px;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px;
    cursor:pointer;
    display:inline-block;
    width:21px;
    height:21px;
	line-height:21px;
    background: transparent url('images/form-radiobutton.png') 0 0 no-repeat;
}
.iradiobuttonui.on {
    background-position: 100% 0;
}
.iradiobuttonui.active {
    background-position: 0 100%;
}
.iradiobuttonui.active.on {
    background-position: 100% 100%;
}
/*/Radiobutton*/
/*Input Text*/
.iinputui, .ipasswordui {
    background:url('images/form-input.png') 0 0 no-repeat;
    height:32px;
    display:inline-block;
    padding-left:6px;
    margin-right:6px;
    
}
.iinputui input, .ipasswordui input{
    background:url('images/form-input.png') 100% 0 no-repeat;
    color:#333;
    font-weight: 700;
    border:0;
    height:16px;
    line-height:16px;
    padding:10px 8px 8px 0;
    margin-right:-6px;
}

.iinputui input:focus,
.iinputui input:active,
.ipasswordui input:focus,
.ipasswordui input:active{
    outline:none;
}
/*/Input Text*/
/*/Select*/
.iselectui {
    position:relative;
    height:186px;  
    background:#fff;
    font-size:18px;
    font-weight:700;
    padding:18px 0;
}
.iselectui select {
    /*opacity:0;*/
    display:none;
}
.iselectui .ioverflow{
    position:absolute;
    z-index:200;
    height:234px;
    margin:0 17px;
    top:0;
    background:url('images/form-select.png') repeat-x 0 100%;    
}

    .iselectui .ioverflow-left{
        position:absolute;
        left:0;
    top:0;
        height:234px;
        width:17px;    
        background:url('images/form-select.png') no-repeat 0 0;  
    }
    .iselectui .ioverflow-right{
        position:absolute;
        right:0;
    	top:0;
        height:234px;
        width:17px;    
        background:url('images/form-select.png') no-repeat 100% 0;  
    }

.iselectui .ioptions {
    height:194px;
    overflow:hidden;
}
.iselectui ul{
    padding:0;
    margin:74px 16px 0 16px;
}
    .iselectui ul li{
        height:44px;
        line-height:44px;
        
    }
/*/Select*/
/*/Form Elements*/