/*

File: iphone.css
Abstract : specific classes to adapt / extend iWebkit or other framework css to our plemi iphone needs

*/

/*********
** MAIN **
**********/

/* basics */

h1, h2, h3 {
	margin-left:10px;
	color : #333;
	}

/* float clearing */
.clear {
 	clear:both;	
	}

/* title */

.centergraytitle {
	color:#4C4C4C;
	font-size:18px;
	font-weight:bold;
	margin:0 9px;
	padding:1px 0 3px 8px;
	position:relative;
	text-shadow:0 1px 0 #FFFFFF;
	text-align:center;
}

/* paginate */

.pagination {
	text-align:center;
}
.pagination a, .pagination a:hover, .pagination a:visited {
	color : #777;
	text-decoration : none;	
}
.first, .prev {
	float : left;
}
.next, .last {
	float : right;
}	

/* LOADER IMG */

.loader .besides_loader.left {
	float: left;
	}
.loader .besides_loader.right {
	float: right;
	}		
.loader img, img.loading, body.list ul .loader img, body.list ul img.loading {
	width:28px;
	height:28px;
	margin:3px 10px;	
	top:auto; 
	left:auto;	
	position:absolute;	
	}

/* SCROLLING */

/* encore utilisŽ ? */

#wrapper {
	position:relative;	/* needed */
	z-index:1;			/* needed and important */
	height:380px;		/* needed */
	overflow:hidden;	/* suggested */
	background:#eee;
}

#scroller {
	position:absolute;	/* optional. Seems to work with absolute, relative and without it */
	top:0;				/* optional */
	width:100%;	
}

/*********
** HOME **
*********/

/* Splash image */
	
.pageitem.Splash li:first-child {
	height:202px;
	-webkit-border-top-left-radius: 8px;   	
    -webkit-border-top-right-radius: 8px; 
	background:url(/iPhone/plemi/images/plemi_iphone_splash.jpg) center top no-repeat;
	}
.pageitem.Splash li:last-child {
	background-color:#e9e9e9;
	-webkit-border-bottom-left-radius: 8px;   	
    -webkit-border-bottom-right-radius: 8px;	
	}

.pageitem.Splash li .labelover {
	position:absolute;
	width:100%;
	}

.Splash h1 {
	color:#fff;
	margin:12px 8px 0 8px;
	text-align:center;
	font-size:28px;
	font-weight:bold;
	text-shadow:#999 0 1px 0;
	}
	
.Splash h2 {
	color:#e9e9e9;
	margin:8px 65px 0 8px;
	text-align:right;
	font-size:14px;
	text-shadow:#999 0 1px 0;
	}	

/* ˆ classer ? */
li.store .minicomment {
	position:absolute;
	left:95px;
	top:56px;
	font-size:12px;
	color:#7f7f7f;
	font-weight:lighter;
	}

/**************
** MAIN BARS **
**************/

.bar {
	top: 0;	
	height: 38px;
	width: 100%;
    background-color:#6d84a2;border-top:solid 1px #95a5bc;border-bottom:solid 1px #2d3642;
	padding:0;
	margin:0;
	position:relative;
	}

.plemibar {
	position: relative;
	left: 0;
	top: 0;
	height: 44px;
	width: auto;
	background: url("/iPhone/iWebKit/Framework/images/header.png") repeat;
	}

.plemibar#search_distance_musictags {
	height:43px;
	}


#topbar, .plemibar#topbar  {
	margin:0;
	}

#bottombar {
	right: 0;
	bottom:0;	
	height: 44px;
	width: 100%;
	background: url("/iPhone/iWebKit/Framework/images/header.png") repeat;
	padding:0;
	margin:0;
	position:relative;
	}	

/* NB : les classes de la 'tabbar' (barre de menus) se trouvent dans la section footer */


/* BAR BUTTONS */

#secondleftbutton {
	position: absolute;
	font-size: 12px;
	left: 70px;
	top: 7px;
	font-weight: bold;
	z-index: 5000;
}
#secondleftbutton a {
	display: block;
	color: #fff;
	text-shadow: rgba(0,0,0,0.6) 0 -1px 0;
	line-height: 30px;
	height: 30px;
	text-decoration: none;
	-webkit-border-image: url("/iPhone/iWebKit/Framework/images/navbutton.png") 0 5 0 5;
	border-width: 0 5px;
	-webkit-border-radius: 6px;
}

#leftbutton .select, #rightbutton .select {
	display: block;
	color: #fff;
	text-shadow: rgba(0,0,0,0.6) 0 -1px 0;
	line-height: 30px;
	height: 30px;
	text-decoration: none;
	font-size:12px;
	font-weight:bold;
	margin:0;
	max-width:100%;
	overflow:hidden;
	position:relative;
	z-index:1;
}
#rightbutton .select {
	width:35px;
	display: absolute;
	float: right;
	text-align:center;
}	

#leftbutton select {
	display: block;
	margin:0;
    left:0;
    top:0;
    height:30px;
    line-height:30px;
	position:absolute;
	z-index:2;
}
#rightbutton select {
	display: block;
	margin:0;
    right:0;
    top:0;
    width:52px;
    height:30px;
    line-height:30px;
	position:absolute;
	overflow:hidden;
	z-index:2;
}


/********** 
** FORMS **
**********/

/* input & submit */ 

input[type="submit"] {
	position : relative;
	background:#7A88A5;
} /* ˆ confirmer */

#search_refresh input[type="submit"] {
	position : 	absolute;
} /* ˆ confirmer */

li.submit {
	background:#aab4c6;
	color:#fff;
    -webkit-border-bottom-left-radius: 8px;   	
    -webkit-border-bottom-right-radius: 8px;   	
	}

li.submit input[type="submit"]  {
	top:0;
	}

/* error */

li.errorbox span.name {
	color:red;
	}

/* facebook connect */

li.fbconnect {
	background:#aab4c6;
	color:#fff;
    -webkit-border-radius: 8px;   	 	
	}
li.fbconnect .fbwrap {
	color:#000000;
	font-size:18px;
	font-weight:bold;
	margin:5px auto;
	margin:auto;
	width:100%
	}	
li.fbconnect .fbname {
	width:50%;
	float:left;
	margin-top:5px;
	text-align:right;	
	}	
li.fbconnect .fbbutton {
	float:left;
	margin-left:10px;
	margin-top:5px;
	width:40%;
	}	

/* date controlers */

#search_date li.form {
	padding-left:30px;
	color:#fff;
	}
.date_range div.label {
	float:left;
	margin-top:8px;
	width:45px;
	}

.date_range span.from select,
.date_range span.to select {
	height:30px;
	padding:5px 5px 2px 0;
	margin:2px 0 0 -5px;
	opacity:1;
	position:relative;
	width:auto;
	}
	
button.ui-datepicker-trigger{
	color:#ffffff;
	width:50px;
	left:250px;
	height:35px;
	}	


/******************
** SEARCH MODULE **
******************/

form#search {
	margin:0;
}
#musictags, #search-help, #search_refresh, #noresult {
	margin : 15px 30px;
	}
body.list div#content ul li.title #results_infos {
	color:#F8F8F8;
	display:inline;
	font-size:11px;
	padding:0 5px;
	position:absolute;
	}

body.list div#content #noresult li.textbox {
	height: 200px;
	}
body.list div#content #noresult li.textbox span.notes {
	font-size:11px;
	color: #7a88a5;
	line-height:10px;
	}	

#musictags .closetags {
	text-align:center;
	font-size:17px;
	font-weight:bold;
	margin:5px 0 0 0;
}

.iSearchForm{position:absolute;z-index:3;left:0;width:100%;}
.iSearchForm legend{display:none}
.iSearchForm fieldset{padding:0 5px;margin:0;border:none;position:relative;text-shadow:none;font-weight:normal;line-height:normal}
.iSearchForm input[type=text],.iSearchForm input[type=password],.iSearchForm input[type=search]{width:92%;display:block;font-size:15px;line-height:19px;height:28px;margin:5px 10px;padding:3px;border-width:0;-webkit-border-image: url(/iPhone/WebApp/Img/form-input.gif) 3 6}
.iSearchForm select{font-size:15px;width:100%;display:block;margin:4px 0;height:31px;background:#fff;border-color:#49607e}
.iSearchForm label{display:none;position:absolute;color:#8f8f8f;text-align:right;left:16px;padding:6px 0;font-size:15px;line-height:19px}

.iSearchForm #leftbutton, .iSearchForm #rightbutton {
	margin-top:4px;
	top:0px;
	}
.iSearchForm #leftbutton {
	position:relative;
	float:left;
	}
.iSearchForm #rightbutton {
	position:relative;
	float:right;
	}	

li.form div.initform,
li.form div.links {
	text-align:center;
	position:relative;
	text-decoration:none;
	color:#000;
	font-size:18px;
	font-weight:bold;
	margin-bottom:5px;
	margin-top:5px;
	margin-left : auto;
	margin-right : auto;  
	}
	
li.form div.initform a, li.form div.initform a:hover, li.form div.initform a:visited,
li.form div.links a, li.form div.links a:hover, li.form div.links a:visited
 {	
	text-decoration:none;
	color:#000;
	}

li.form.noborder-top {
	border-top:none;
	}

/* LOCALIZATION SLIDER */

/* Defines the position, appearance, and dimensions of the knob div */
#knob
{
    position: absolute;
    margin:3px 0 0 0;
    left: 63px;
    top: 12px;
    height: 19px;
    width: 20px; 
    background-image: url(/iPhone/SlideMe/Images/ballgray2.png);
    z-index:99;
}

/* Defines the position and dimensions of the precision div */
.precision
{
	color:#FFFFFF;
	font-size:10px;
	line-height:10px;
	padding:4px 0 0;
	position:absolute;
	text-align:center;
	width:100%;
}

#canvas
{
   position: absolute;
   left: 50px;
   top:12px;
}



/***************
** LIST VIEWS **
***************/

/* Listes rŽtractables */

.accordeon .pageitem {
	margin:9px 9px;
	}

.accordeon li.form .name {
	left:0;
	}
	
li.ad-closed:nth-last-child(2):hover {
	-webkit-border-bottom-left-radius: 8px 8px;
	-webkit-border-bottom-right-radius: 8px 8px;
}	

/* Composants des listes de commentaires */

li.menu a span.author, li.menu a span.minitopright, li.menu a span.minibottomright {
	position: absolute;
	right: 24px;
	margin: 0;
	font-size: 9px;
	color : #555;
	}
.menu .author, .menu .minitopright {
	top:10px;
	}	
.menu .minibottomright {
	top:25px;
	}		

li.menu a:hover span.author, li.menu a:hover span.minitopright, li.menu a:hover span.minibottomright {
	color : #fff;
	} 

li.menu.usercomment {
	border-top:1px solid #878787;
	}
li.textbox.thecomment {
	border-top:none;
	}	

.textbox .comment {
	font-size: 12px;
	line-height: 13px;
	margin:2px 0 8px 0;
	}
.textbox .profil {
	float:left;
	font-size: 10px;
	text-align:left;
	color: #555;
	margin-bottom:5px;
	}	
.textbox .notice {
	float:right;
	font-size: 10px;
	text-align:right;
	color: #999;
	margin-bottom:5px;
	}	
.textbox .notice a, .textbox .notice a:hover, .textbox .notice a:visited {
	color: #999;
	text-decoration: none;
	}	


/* CONCERTS LIST */

body.list div#content,
ul.body.list div#content {
	margin-top: 0px !important;
}

ul.body.list div#content {
	min-height:81px;
}

body.list div#footer {
	margin-top: 0px !important;
}

body.list li.withimage .wrapperright,
ul.body.list li.withimage .wrapperright{
	float:right;
	font-size:11px;
	margin:-50px 5px 0 0;
	width:160px;
	}
	
/* ˆ virer ? */
.withimage .wrapper right{
	float:right;
	font-size:11px;
	margin:0 5px 0 0;
	width:160px;
	}

body.list li.withimage .bandname,
ul.body.list li.withimage .bandname {
	font-size: 18px;
	white-space: nowrap;
	margin: 0 0 0 85px;
	display: block;
	overflow: hidden;
	color: #000;
	max-width: 60%;
	text-overflow: ellipsis;
	font-weight: bold;
	white-space: nowrap;
	text-overflow: ellipsis;
}

body.list li.withimage .tags, body.list li.withimage .address, body.list li.withimage .date,
ul.body.list li.withimage .tags, ul.body.list li.withimage .address, ul.body.list li.withimage .date {
	font-size: 12px;
	color: #7f7f7f;
	margin: 0 0 0 85px;
	display: block;
	width: 60%;
	font-weight: bold;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

body.list li.withimage .address, body.list li.withimage .date,
ul.body.list li.withimage .address, ul.body.list li.withimage .date {
	font-weight: normal;
}
body.list li.withimage .address,
ul.body.list li.withimage .address {
	font-weight: normal;
	margin: 5px 0 0 85px;
}

/* Listes de concerts depuis les show views */

ul.body.list {
	background-color:#FFFFFF;
	margin:9px 9px;
	border:1px solid #878787;
	-webkit-border-radius:6px;
	overflow:hidden;
	padding:0;
	widh:auto;
}

ul.body.list div#content li {
	border-bottom:1px solid #E1E1E1;
	height:40px;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
}

ul.body.list li.withimage {
	height:90px !important;
}

ul.body.list div#content li a {
	color:#000000;
	display:block;
	font-size:large;
	font-weight:bold;
	height:32px;
	padding:9px 0 0 20px;
	position:relative;
	text-decoration:none;
}

ul.body.list li.withimage a, ul.body.list li.withimage:hover a {
	-moz-background-clip:border !important;
	-moz-background-inline-policy:continuous !important;
	-moz-background-origin:padding !important;
	background:transparent url("/iPhone/iWebKit/Framework/images/storebg.png") no-repeat scroll left top !important;
	height:81px !important;
}

ul.body.list li.withimage:hover {
	background-image: url("/iPhone/iWebKit/Framework/images/storetouched.png");
}


ul.body.list img {
	height:88px;
	padding:1px;
	left:0;
	position:absolute;
	top:0;
	width:88px;
}

ul.body.list li.withimage .arrow {
	top:39px !important;
}

	ul.body.list span.arrow {
	-moz-background-clip:border;
	-moz-background-inline-policy:continuous;
	-moz-background-origin:padding;
	background:transparent url("/iPhone/iWebKit/Framework/images/arrow.png") no-repeat scroll 0 0;
	height:13px !important;
	margin:0 !important;
	position:absolute;
	right:10px;
	top:15px;
	width:8px !important;
}

/* ElŽments spŽcifiques des listes de concerts */

.withfriends, .attendance_yes, .attendance_maybe {
	position: absolute;
	right: 10px;
	margin: 0;
	width: 16px;
	height: 16px;
	}
.withfriends {
	top:65px;
	background:transparent url(/iPhone/plemi/images/friends_mini.gif) no-repeat scroll 0 0;
	}
.attendance_yes {
	top:8px;
	background:transparent url(/iPhone/plemi/images/attendanceok_mini.gif) no-repeat scroll 0 0;
	}
.attendance_maybe {
	top:8px;
	background:transparent url(/iPhone/plemi/images/attendancemaybe_mini.gif) no-repeat scroll 0 0;
	}	


/***************
** SHOW VIEWS **
***************/

.largeimage {
	width:220px;
	margin-left:30px;

}

/* profil */

#notifs a, #notifs a:hover, #notifs a:visited {
	color : #777;
	text-decoration : underline;	
}

/***********
** FOOTER **
***********/

#footer {
	background:none;
	text-align: center;
	position: relative;
	padding: 10px 10px;
	margin:0;
	height: auto;
	width: auto;
	bottom: 0px;
	}
	
#footer #webversion {	
	display:block;
	margin-top:5px;
	}	
	
/* footer tabbar */

#tabbar {
	right: 0;
	bottom:0;	
	height: 49px;
	width: 100%;
	border-top: solid 1px #000;
	background: url("/iPhone/plemi/images/tabbar.gif") repeat-x;
	padding:0;
	margin:0;
	position:relative;
	}

#tabbar ul, 
body.list #tabbar ul {
	background:none;
	border:none;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:0 ;
	padding:0;
	width:auto;
	height:auto;
	}

#tabbar div {
	list-style-type:none;
	display:inline;
	border:none;
	float:left;
	margin:0;
	width:auto;
	height:49px;
	padding:0;
	}
#tabbar div a,
#tabbar div a:hover,
#tabbar div a:visited  {
	color: #fff;
	height:49px;
	display:block;
	border:none;
	text-decoration:none;
	}
	
#tabbar div.agenda a {
	background: url(/iPhone/plemi/images/menu_agenda_sprite.gif) left bottom no-repeat #000;
	width:59px;
	}
#tabbar div.agenda#current a {
	background: url(/iPhone/plemi/images/menu_agenda_sprite.gif) left top no-repeat #000;
	}	

#tabbar div.concerts a {
	background: url(/iPhone/plemi/images/menu_concerts_sprite.gif) left bottom no-repeat #000;
	width:63px;	
	}
#tabbar div.concerts#current a {
	background: url(/iPhone/plemi/images/menu_concerts_sprite.gif) left top no-repeat #000;
	}

#tabbar div.monplemi a {
	background: url(/iPhone/plemi/images/menu_monplemi_sprite.gif) left bottom no-repeat #000;
	width:66px;	
	}
#tabbar div.monplemi#current a {
	background: url(/iPhone/plemi/images/menu_monplemi_sprite.gif) left top no-repeat #000;
	}

#tabbar div.messages a {
	background: url(/iPhone/plemi/images/menu_messages_sprite.gif) left bottom no-repeat #000;
	width:66px;	
	}
#tabbar div.messages#current a {
	background: url(/iPhone/plemi/images/menu_messages_sprite.gif) left top no-repeat #000;
	}

#tabbar div.friends a {
	background: url(/iPhone/plemi/images/menu_friends_sprite.gif) left bottom no-repeat #000;
	width:57px;	
	}
#tabbar div.friends#current a {
	background: url(/iPhone/plemi/images/menu_friends_sprite.gif) left top no-repeat #000;
	}	

#tabbar div.about a {
	background: url(/iPhone/plemi/images/menu_about_sprite.gif) left bottom no-repeat #000;
	width:57px;	
	}
#tabbar div.about#current a {
	background: url(/iPhone/plemi/images/menu_about_sprite.gif) left top no-repeat #000;
	}	
	

/*********
* DIVERS *
**********/

/* Slide Effects from WebApp - in progress */

#iHeader .iTab:not(.iInner){position:relative;top:6px;margin:0 4px}
#iHeader{position:relative;z-index:1;height:44px;background-color:#8195af;-webkit-box-sizing:border-box;border-width:22px 0 1px;-webkit-border-image:url(/iPhone/WebApp/Img/bg-head.png) 22 0 1 0;color:#fff;font-weight:bold;text-shadow:rgba(0,0,0,0.7) 0 -1px 0}
#iHeader a{text-decoration:none;color:inherit}
#iHeader > div{margin-top:-22px}
#iHeader > div,#waHeadTitle{display:none;-webkit-transform:translate(0,0);position:absolute;width:100%;top:0;bottom:0;left:0}
.__ani #iGroup .iLayer{position:absolute;top:0}
.__ani #iGroup .iLayer,.__ani #iHeader #waHeadTitle{-webkit-transition-property:-webkit-transform;-webkit-transition-duration:0.35s}
.__ani #iHeader > div{-webkit-transition-property:-webkit-transform,opacity;-webkit-transition-duration: 0.35s,0.35s}


.plemibar #date_range select
{
height:40px;
margin:-5px 0 0 -5px;
opacity:0;
position:relative;
width:100%;
}
position:relative;
position:absolute;
width:50%;
opacity:100;    
}

/* Ajout Mounir ˆ trier */

#btnsearch{
  color:#FFFFFF;
  font-size:12pt;
  font-weight:bold;
  background:#7A88A5;
  display:block;
  height:40px;
  left:0;
  line-height:40px;
  top:6px;
  width:10%;
  position:relative;
}