@import url(qommon.css);

html {
	background: white;
	color: black;
}

html, body, ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: sans-serif;
	font-size: 15px;
}

div#top {
	position: relative;
	height: 50px;
	border-bottom: 1px solid #777;
	background: #222;
	background: linear-gradient(to bottom, #666, #222);
}

div#top h1 {
	font-size: 20px;
}

a#menu {
	position: absolute;
	top: 0;
	left: 0;
}

a#gear {
	position: absolute;
	top: 0;
	right: 0;
}

#top h1 {
	margin: 0;
	text-align: center;
	line-height: 50px;
}

#top h1 a {
	text-decoration: none;
	color: white;
}

#nav-site h3 { display: none; }

ul.catforms li a,
#nav-site li a,
#nav-user li a {
	padding: 2ex;
	display: block;
	border-bottom: 1px solid #888;
	text-decoration: none;
}

#nav-site li a:hover,
#nav-user li a:hover {
	background: #eee;
}

ul#categories {
	margin-top: 1ex;
}

ul#categories li {
	width: 50%;
	float: left;
	height: 100px;
	text-align: center;
	vertical-align: bottom;
	display: table;
	background: transparent center center no-repeat;
}

ul#categories li a {
	padding: 1ex;
}

ul#categories li a {
	display: table-cell;
	vertical-align: bottom;
}

div#main-content {
	padding: 0 5px;
}

div#login form {
	text-align: center;
}

div#login form input {
	width: 80%;
}

form div.buttons {
	clear: both;
	margin-top: 1em;
}

form div.buttons input {
	padding: 1ex;
	font-family: sans-serif; /* makes sure buttons all go through the same code path in firefox */
	width: 45%;
}

form div.buttons div.savedraft-button input {
	width: 93%;
}

div.back-home-button a {
	width: 90%;
	display: block;
	padding: 1ex;
	text-align: center;
}

div.TextWidget textarea,
div.RankedItemsWidget input,
div.StringWidget input,
div.IntWidget input,
div.DateWidget input,
div.WcsExtraStringWidget input,
div.RegexStringWidget input,
div.EmailWidget input,
div.PasswordWidget input,
div.PrefillSelectionWidget input[type=text] {
	width: 90%;
}

div.category h3 {
	font-size: 150%;
}

#content > h2, div.category h3 {
	margin: 0 -5px 1em -5px;
	border-bottom: 1px solid black;
	padding: 1ex;
	text-align: center;
}

div.error {
	text-align: left;
}

div#services h3 {
	display: none;
}

div#services > ul > li {
	width: 50%;
	float: left;
	height: 100px;
	background: white;
	text-align: center;
	vertical-align: bottom;
	display: table;
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
}

@media screen and (min-width: 361px) {
	div#services > ul > li {
		width: 33%;
	}
}

@media screen and (min-width: 960px) {
	div#services > ul > li {
		width: 25%;
	}
}

div#services > ul strong a {
	text-decoration: none;
	color: black;
}

div#services > ul strong a:focus {
	outline: none;
}

div#services ul p, div#services ul ul {
	display: none;
}

div#droite {
	display: none;
}

li.required-authentication a {
    background: url(../images/mobile/lock.png) no-repeat 20px;
}

li.required-authentication span {
	display: none;
}

ul#categories {
	margin: 0 -1ex;
}


div#services > ul > li,
ul#categories li {
	background-color: #eee;
}

div#services > ul strong {
	cursor: pointer;
}

div#services > ul strong a {
	color: #008;
}

div#services ul strong {
	display: table-cell;
	vertical-align: bottom;
	padding-bottom: 1ex;
	border: 1px solid white;
	background: transparent center center no-repeat;
}

div#services #category-emploi strong,
div#services #category-commerces-et-entreprises strong,
div#services #category-formalites-pour-les-entreprises strong {
	background-image: url(../images/categories/icon_businessperson_1673.png);
}

div#services #category-eau-et-assainissement strong,
div#services #category-hygiene-salubrite-environnement strong {
	background-image: url(../images/categories/icon_sanitation_4335.png);
}

div#services #category-vie-pratique strong {
	background-image: url(../images/categories/icon_crosswalk_23557.png);
}

div#services #category-culture strong {
	background-image: url(../images/categories/icon_culture_13644.png);
}

div#services #category-etat-civil strong {
	background-image: url(../images/categories/icon_document_14004.png);
}

div#services #category-formalites-administratives strong {
	background-image: url(../images/categories/icon_document_32231.png);
}

div#services #category-enfance strong,
div#services #category-enfance-et-jeunesse strong,
div#services #category-enfance-jeunesse strong,
div#services #category-vos-enfants strong {
	background-image: url(../images/categories/icon_people_39826.png);
}

div#services #category-sports-et-loisirs strong,
div#services #category-sport strong {
	background-image: url(../images/categories/icon_triathlon_10860.png);
}

div#services #category-telealarme strong {
	background-image: url(../images/categories/icon_mobile-alarm_6412.png);
}

div#services #category-collecte-des-dechets-menagers strong {
	background-image: url(../images/categories/icon_trash_207.png);
}

div#services #category-associations strong {
	background-image: url(../images/categories/icon_association_64055.png);
}

div#services #category-evenementiel strong,
div#services #category-evenements strong,
div#services #category-evenement-et-manifestation strong {
	background-image: url(../images/categories/icon_convention-center_64233.png);
}

div#services #category-tourisme strong {
	background-image: url(../images/categories/icon_tourist_22637.png);
}

div#services #category-contact strong,
div#services #category-contacter-la-mairie strong,
div#services #category-contactez-nous strong,
div#services #category-contacts strong,
div#services #category-contacts-et-rendez-vous strong,
div#services #category-montpellier-mediterranee-metropole-vous-repond strong {
	background-image: url(../images/categories/icon_email_12513.png);
}

div#services #category-consultations strong {
	background-image: url(../images/categories/icon_consultation_40124.png);
}

div#services #category-cadre-de-vie strong {
	background-image: url(../images/categories/icon_park_12246.png);
}

div#services #category-paiement-en-ligne strong {
	background-image: url(../images/categories/icon_payment_168700.png);
}

div#services #category-autres-services-en-ligne strong,
div#services #category-les-services-de-la-metropole strong {
	background-image: url(../images/categories/icon_misc_8686.png);
}

div#services > ul > li.active {
	width: 100%;
}

div#services > ul > li.active > strong {
	display: block;
	height: 50px;
	line-height: 50px;
	background-position: 1ex 50%;
	text-align: left;
	padding-left: 58px;
	font-size: 110%;
	position: relative;
}

div#services > ul > li.active > strong a {
	position: absolute;
	bottom: 10px;
	line-height: 100%;
}

div#services > ul > li.active > ul {
	width: 100%;
	text-align: left;
	background: white;
	display: block;
	margin-top: 3px;
}

div#services > ul > li.active > ul a {
	padding: 1ex;
	padding-left: 55px;
	padding-right: 25px;
	display: block;
	text-decoration: none;
	border-bottom: 1px solid #aaa;
}

div#services > ul > li.active > ul li {
	line-height: 160%;
}

div#services.active > ul {
	height: 50px;
	width: calc(100% - 10px);
}

div#services > ul {
	position: absolute;
	width: 98%;
}

div#services > ul > li.active {
	position: absolute;
	top: 51px;
	display: inline-block;
	left: 0px;
}

div#services.active {
	text-align: center;
	height: 50px;
	overflow: hidden;
}

div#services > ul > li.inactive {
	width: 50px;
	height: 50px;
	display: inline-block;
	float: none;
}

div#services > ul > li.inactive strong {
	width: 100%;
	height: 100%;
	display: block;
	padding: 0;
}

div#services > ul > li.inactive strong {
	text-indent: -10000px;
}
