/**
 * css/44rdcMobile.css
 *
 * style for 44rueducanada.net
 * rules for mobile
 *
 * @author jcpe <weld@free.fr>
 * @copyright Copyright (C) 2011 jcpe <weld@free.fr> All rights reserved.
 * @package 44rueducanada.net
 * @version 3
 * @subpackage CSS
 */

/******************************************************************************
CSS for mobile
must be run after all others CSS rules
******************************************************************************/
@media screen and (max-width: 640px)
{
	/**************************************************************************
	CSS reset for mobile
	**************************************************************************/
	/* fixer une largeur maximale  de 100 % aux éléments potentiellement problématiques */
	table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video
	{
		max-width: 100% !important;
	}

	td
	{
		display: block!important;
		width: auto!important;
	}

	textarea, input
	{
		max-width: 95% !important;
	}

	textarea, .longText
	{
		width: 95% !important;
	}

	/* gestion des mots longs */
	textarea, table, td, th, code, pre, samp
	{
		word-wrap: break-word;
		white-space: pre-line;
	}

	code, pre, samp
	{
		white-space: pre-line;
	}

	/**************************************************************************
	main rules
	**************************************************************************/
	body
	{
		background: #F1F1F1;
	}

	#global
	{
		width: auto;
		height: auto;
	}

	/**************************************************************************
	header and footer
	**************************************************************************/
	.headerlogin, .header
	{
		height: 40px;
		background: url(../images/44rdcLogoMobileV3.png) no-repeat;
		background-position: right;
	}

	.header a
	{
		margin: 5px 0 5px 5px;
		color: #FFFFFF;
		font-size: 14px;
		font-weight: bold;
		line-height: 30px;
		text-decoration: none;
		width: 90px;
		display: block;
		float: left;
		background: url(../images/menuBackground.png) repeat-x;
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		border-radius: 7px;
	}

	/**************************************************************************
	login
	**************************************************************************/
	#login
	{
		width: auto;
		margin: 40px 10px;
	}

	/**************************************************************************
	no float & with auto to avoid columns
	**************************************************************************/
	#navbarmobile, #contents, #left_3of5, #right_2of5, #footer, #familyList, #familyMember
	{
		float:none !important;
		width:auto !important;
		height: auto !important;
		margin: 0 !important;
	}

	/**************************************************************************
	navbar
	**************************************************************************/
	#navbarmobile ul li
	{
		margin: 0;
	}

	#navbarmobile ul li a
	{
		font-size: 14px;
		width: auto;
		margin: 10px;
		line-height: 40px;

		background: #000000; /* Old browsers */
		background: -moz-linear-gradient(top, #d4d4d4 0%, #000000 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d4d4d4), color-stop(100%,#000000)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #d4d4d4 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #d4d4d4 0%,#000000 100%); /* Opera11.10+ */
		background: -ms-linear-gradient(top, #d4d4d4 0%,#000000 100%); /* IE10+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4d4d4', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
		-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4d4d4', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
		background: linear-gradient(top, #d4d4d4 0%,#000000 100%); /* W3C */
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;

		text-align: left;
		padding-left: 40px;
	}

	#navbarmobile ul li a img
	{
		position: relative;
		float: left;
		top: 4px;
		padding-right: 40px;
	}

	#navbarmobile ul li.mobilecurrent a
	{
		background: #70B808; /* Old browsers */
		background: -moz-linear-gradient(top, #D4FFD4 0%, #70B808 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D4FFD4), color-stop(100%,#70B808)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #D4FFD4 0%,#70B808 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #D4FFD4 0%,#70B808 100%); /* Opera11.10+ */
		background: -ms-linear-gradient(top, #D4FFD4 0%,#70B808 100%); /* IE10+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D4FFD4', endColorstr='#70B808',GradientType=0 ); /* IE6-9 */
		-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D4FFD4', endColorstr='#70B808',GradientType=0 ); /* IE6-9 */
		background: linear-gradient(top, #D4FFD4 0%,#70B808 100%); /* W3C */
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
	}

	/* DO NOT DISPLAY normal navbar, calendier & arbre for mobile */
	#navbar, #navbarbox, #navbarmobile ul li#mobilecalendrier, #navbarmobile ul li#mobilearbre
	{
		display: none;
	}

	/**************************************************************************
	adminmessage
	**************************************************************************/
	#adminmessage
	{
		margin: 0 10px 0 10px;
	}

	/**************************************************************************
	hello user
	**************************************************************************/
	#hellobox
	{
		margin: 16px 0;
	}

	/**************************************************************************
	subject
	**************************************************************************/
	.subjectbox, .alertbox
	{
		margin: 8px 5px 24px 5px;
	}

	/**************************************************************************
	commande
	**************************************************************************/
	#commande ul li a
	{
		margin: 14px 5px;
	}

	/**************************************************************************
	form
	**************************************************************************/
	label
	{
		padding-left: 5px;
		text-align: left;
	}

	fieldset
	{
		padding: 10px 5px 15px 5px;
	}

	/**************************************************************************
	pagination
	**************************************************************************/
	.paginationbox
	{
		padding: 24px 0;
	}

	.paginationtext a
	{
		margin: 0 0 0 20px;
		padding: 0 0 0 3px;
	}

	.paginationbox a img
	{
		vertical-align: middle;
	}

	/**************************************************************************
	photo
	**************************************************************************/
	#photopicture
	{
		width: 100% !important;
		height: 100% !important;
		text-align: center;
		background: #000000;
	}

	/**************************************************************************
	tooltip
	**************************************************************************/
	a.tooltip:hover span
	{
		left: auto;
		right: 15px;
	}

/******************************************************************************
generic rules supersed others
MUST BE the LAST
******************************************************************************/
	.screenblock, .screeninlineblock
	{
		display: none;
	}

	.mobileblock
	{
		display: block;
	}

	.mobileinline
	{
		display: inline;
	}

	.mobileinlineblock
	{
		display: inline-block;
	}
}

@media screen and (max-width:640px) and (orientation: landscape)
{
	#navbarmobile ul li a
	{
		padding-left: 110px;
	}

}