Primefaces Mobile calendar looks like primefaces calendar component - primefaces-mobile

Question

I m new at primefaces mobile. I made a simple page and have a few problem about p:calendar. My calendar look like primefaces calendar, not like primefaces mobile.
Here is my code:
<f:view xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pm="http://primefaces.org/mobile"
contentType="text/html"
renderKitId="PRIMEFACES_MOBILE">
<pm:page title="EDMS">
<f:facet name="postinit">
<link rel="stylesheet"
href="#{request.contextPath}/javax.faces.resource/calendar/calendar.css.jsf?ln=primefaces-mobile" />
<h:outputStylesheet library="primefaces-mobile" name="calendar/calendar.css" />
<h:outputScript library="primefaces-mobile" name="calendar/calendar.js" />
<style>
.th-groups th {
text-align: center;
background-color: rgba(0,0,0,.1);
border-right: 1px solid #fff;
}
.ui-li-custom .ui-li-count {
right: 10px !important;
}
</style>
</f:facet>
<!-- Main View -->
<pm:view id="main">
<pm:header title="eDMS Mobile" swatch="b"/>
<pm:content>
<p:outputPanel layout="block" style="padding-right: 15px">
<h:form>
<p:dataList type="inset" styleClass="ui-li-custom">
<f:facet name="header">Ana Menü</f:facet>
<f:attribute name="icon" value="false" />
<h:outputLink value="#dateView">Date</h:outputLink>
</p:dataList>
</h:form>
</p:outputPanel>
</pm:content>
</pm:view>
<pm:view id="dateView">
<pm:header title="Randevu Alma" swatch="b">
<f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
</pm:header>
<pm:content>
<p:calendar value="#{myBean.date}"/>
</pm:content>
</pm:view>
</pm:page>
And its look like:
http://imgur.com/4t68wlL
(i cant paste image because of my reputation)
Also i looked at primefaces mobile forum and saw a few suggestions and tried this:
<f:view xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pm="http://primefaces.org/mobile"
contentType="text/html"
renderKitId="PRIMEFACES_MOBILE">
<h:head>
<f:facet name="postinit">
<link rel="stylesheet"
href="#{request.contextPath}/javax.faces.resource/calendar/calendar.css.jsf?ln=primefaces-mobile" />
<h:outputStylesheet library="primefaces-mobile" name="calendar/calendar.css" />
<h:outputScript library="primefaces-mobile" name="calendar/calendar.js" />
<style>
.th-groups th {
text-align: center;
background-color: rgba(0,0,0,.1);
border-right: 1px solid #fff;
}
.ui-li-custom .ui-li-count {
right: 10px !important;
}
</style>
</f:facet>
</h:head>
<pm:page title="EDMS">
<!-- Main View -->
<pm:view id="main">
But it didnt work too. I use primefaces 3.5 and primefaces mobile 1.0 snapshot. I add libraries with maven. Here my dependencies:
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>${org.primefaces-version}</version>
</dependency>
<dependency>
<groupId>org.primefaces.extensions</groupId>
<artifactId>primefaces-extensions</artifactId>
<version>${org.primefaces.extensions-version}</version>
</dependency>
<dependency>
<groupId>org.primefaces.themes</groupId>
<artifactId>bluesky</artifactId>
<version>${org.primefaces.themes-version}</version>
</dependency>
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces-mobile</artifactId>
<version>1.0.0-SNAPSHOT</version>
</dependency>
My opinion is, this problem is about the css files but i cant figure how to fix it so i need your help. By the way, sorry about my bad english :D.