/* @override http://www.feeling-tattoo-piercing.com/style.css */

/*********************************************************
	FEELING TATTOO - V3 (Février 2010)
	SCREEN VERSION
	http://www.feeling-tattoo-piercing.com
	Made by Sébastien Mégraud
**********************************************************
-> Common Elements
-> Pages
	-> Accueil
	-> Tarifs
	-> Tattoo Studio
	-> Piercing Galeries
	-> Piercing Studio
	-> Sterilisation
	-> Equipe
	-> Livre Or
	-> Liens
	-> Plan
	-> Contact
	-> Accessibilite
	-> Remerciements
*********************************************************/

/* @group COMMON */

/****************************************
	COMMON ELEMENTS
****************************************/

html {
	background: #FFF url(images/background-top.png) repeat-x;
}

body {
	margin: 0;
	padding: 0;
	font: 90% "Comic Sans MS", Trebuchet MS, Arial, sans-serif;
}

.left {
	float: left;
}

#container {
	position: relative;
	display: block;
	width: 1024px;
	height: auto;
	padding: 0;
	margin: 0 auto;
}

#bgcontainer {
	width: 1024px;
	height: auto;
	padding: 0;
	margin: 0 auto;
	background: transparent url(images/background-inside.png) center top no-repeat;
}

#insidecontainer {
	width: 855px;
	height: auto;
	padding: 0;
	margin: 0 auto;
}

/* @group Banner */

#header {
	height: 170px;
	padding: 0;
	margin: 0;
}

#header h1 {
	display: none;
}

#gohome {
	float: left;
	width: 99%;
	height: 170px;
	margin: 0;
	padding: 0;
	cursor: pointer;
}



/* @end */

/* @group Menu */
#menu {
	float: left;
	width: 180px;
	margin: 0 0 30px 5px;
	padding: 5px 15px 5px 5px;
}

/* IE 6 Hack */
* html #menu {
	float: left;
	width: 180px;
	margin: 0 0 30px 5px;
	padding: 0 15px 0 5px;
}

* html #menu ol li {
	display: block;
	width: 90%;
	line-height: 23px;
	border-bottom: 1px dotted #333;
	font-weight: bold;
	text-transform: uppercase;
}

/* IE 7 Hack */
*+html #menu {
	float: left;
	width: 180px;
	margin: 0 0 30px 5px;
	padding: 0 15px 0 5px;
}

*+html #menu ol li {
	display: block;
	width: 90%;
	line-height: 23px;
	border-bottom: 1px dotted #333;
	font-weight: 700;
	text-transform: uppercase;
}

#menu ol {
	padding: 0;
	margin: 0;
	text-indent: 15px;
	list-style: none;
}

#menu ol li {
	display: block;
	width: 90%;
	line-height: 26px;
	border-bottom: 1px dotted #333;
	font-weight: 700;
	text-transform: uppercase;
}

#menu ol li a {
	display: block;
	color: #333;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
}

#menu ol li a:hover {
	text-decoration: underline;
}

#menu ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

#menu ol li ul li {
	padding: 0 0 0 15px;
	margin: 0;
	border: 0;
}

#menu ul li a {
	display: block;
	text-decoration: none;
	text-transform: none;
}

#menu ul li a:hover {
	text-decoration: underline;
}
/* @end */

/* @group MainText */
#maintext {
	float: right;
	width: 580px;
	padding: 20px;
	text-align: justify;
}

#maintext h1 {
	font-size: 110%;
	color: #333;
}

#maintext h2 {
	font-size: 100%;
	color: #666;
	text-align: center;
	border-bottom: 1px solid #666;
}

#maintext p {
	padding: 5px;
}

#maintext a {
	color: #000;
}

#maintext ol {
	padding: 5px 0 15px 10px;
	margin: 0 0 0 25px;
}

img {
	border: 0;
}
/* @end */

/* @group Galeries */
#galeriemenu {
	width: 100%;
	padding: 25px 0 15px;
	margin: 0 auto;
	text-align: center;
}

#galeriemenu ol {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#galeriemenu ol li {
	display: inline;
	margin: 0 2px;
	padding: 50px 0 0;
}

#galeriemenu li a {
	padding: 5px 7px;
	background: #E1E1E1;
	border: 1px solid #CCC;
	text-decoration: none;
	font-size: 95%;
}

#galeriemenu li a:hover {
	background: #CCC;
	border: 1px solid #CCC;
}

.galerie ul {
	list-style-type: none;
	padding: 20px 0 10px;
	margin: 0 auto;
	text-align: center;
}

.galerie ul li {
	display: inline;
	padding: 0 8px;
}

.galerie img {
	border: 3px solid #CCC;
}

.galerie img:hover {
	border: 3px solid #333;
}
/* @end */

/* @group Footer */
#footer {
	clear: both;
	margin: 0;
	padding: 8px 5px;
	background: transparent;
	border-top: 1px dotted #CCC;
	text-align: center;
	font-size: 85%;
	color: #999;
}

#footer ul li {
	display: inline;
	padding: 0 5px 0 0;
}

#footer a, a:visited {
	color: #999;
}

#footer a:hover {
	color: #333;
}

.blue {
	color: #333 !important;
	font-size: 120%;	
}

#socialmedia {
	clear: both;
	width: 90%;
	height: 25px;
	margin: 0 auto;
	text-align: center;
	color: #666;
	font-size: 90%;
}

#socialmedia ul li {
	display: inline !important;
	float: left !important;
	margin: 0 10px 0;
}

#socialmedia a, .socialmedia a:visited {
	color: #333 !important;	
	text-decoration: none;
}

#socialmedia a:hover, #socialmedia a:focus {
	text-decoration: underline;
}

#socialmedia ul li img {
	margin: 0 5px 0 0;
}


/* @end */

#xiti-logo {
	width: 100px;
	padding: 50px 0 0;
	margin: 0 auto;
}

/* @group Fieldzone */

.required {
	color: red;
	cursor: text;
}

input {
	background: #FFF; 
	border: 1px solid #000;
	color: #333;
	cursor: text;
}

input:focus {
	background: #E1E1E1;
	border: 1px solid #CCC;
}

textarea {
	background: #FFF; 
	border: 1px solid #000;
	color: #333;
	cursor: text;
}

textarea:focus {
	background: #E1E1E1;
	border: 1px solid #CCC;
}

.button {
	width: 100px; 
	height: 26px;
	margin: 10px 0 0;
	border: 1px solid #000;
	color: #333;
	cursor: pointer;
	background: #E1E1E1;
}

.button:hover, .button:focus  {
	background: #999;
	border: 1px solid #000;
	color: #000;
}



/* @end */



/* @end */

/* @group PAGES */

/****************************************
	PAGES
****************************************/

/* @group ACCUEIL */
#fermeture {
	width: 100%;
	padding: 10px 0;
	margin: 0 auto 10px;
	border-top: 1px solid red;
	border-bottom: 1px solid red;
	font-weight: 600;
	color: red;
	text-align: center;
}

#imageContainer {
	margin: 0 auto 10px;
	width: 300px;
	height: 200px;
	border: 3px solid #999;
}

#imageContainer img {
	display: none;
	position: absolute;
}

/* @end */

/* @group TARIFS */
.table_tarifs {
	width: 540px;
	margin: 20px auto 0;
	border-collapse: collapse;
	background: #FFF;
}

.table_header {
	background: #666;
	color: #FFF;
	text-align: center;
}

.th_type {
	background: #E1E1E1;
	text-align: left;
	text-indent: 5px;
}

th {
	padding: 5px 0;
	font-size: 90%;
	color: #333;
	text-decoration: none;
	text-align: left;
	text-indent: 5px;
	border: 1px solid #666;
}

td {
	width: 120px;
	padding: 5px 0;
	background: #FFF;
	font-size: 90%;
	color: #333;
	text-align: center;
	border: 1px solid #666;
}
/* @end */

/* @group TATTOO STUDIO */
#tattoo_studio {
	text-align: center;
	padding: 50px 0 0;
}

#tattoo_studio ul {
	list-style-type: none;
	padding: 5px 0 20px;
}

#tattoo_studio ul li {
	display: inline;
	padding: 0 10px;
}

#tattoo_studio img {
	border: 3px solid #CCC;
}

#tattoo_studio img:hover {
	border: 3px solid #333;
}
/* @end */

/* @group PIERCING MAIN */
#infosppf {
	padding: 0;
	margin: 0 0 15px;
	font-size: 105%;
	font-weight: 700;
	color: #333;
}

#infosppf a {
	color: #333;
}
/* @end */

/* @group PIERCING GALERIES */
#piercing_galerie_1, #piercing_galerie_2 {
	clear: both;
	width: 450px;
	height: 180px;
	padding: 10px 0 0;
	margin: 0 auto;
	text-align: center;
}

.piercing_left {
	float: left;
	margin: 0 0 0 20px;
	width: 120px;
	text-align: center;
}

.piercing_middle {
	float: left;
	margin: 0 0 0 20px;
	width: 120px;
	text-align: center;
}

.piercing_right {
	float: left;
	margin: 0 0 0 20px;
	width: 120px;
	text-align: center;
}

.piercing_left h3, .piercing_middle h3, .piercing_right h3 {
	padding: 0;
	font: 100% "Comic Sans MS", Trebuchet MS, Arial, sans-serif;
	font-weight: 600;
	text-transform: none;
	color: #333;
}

#piercing_galerie ul {
	list-style-type: none;
	padding: 20px 0 10px;
	margin: 0 auto;
	text-align: center;
}

#piercing_galerie ul li {
	display: inline;
	padding: 0 8px;
}

#piercing_galerie img {
	border: 3px solid #CCC;
}

#piercing_galerie img:hover {
	border: 3px solid #333;
}
/* @end */

/* @group PIERCING STUDIO */
#piercing_studio {
	text-align: center;
	padding: 50px 0 0;
}

#piercing_studio ul {
	list-style-type: none;
	padding: 5px 0 20px;
}

#piercing_studio ul li {
	display: inline;
	padding: 0;
	margin: 0;
	font-size: 80%;
}

#piercing_studio img {
	border: 3px solid #CCC;
}

#piercing_studio img:hover {
	border: 3px solid #333;
}

/* @end */

/* @group STERILISATION */
#sterilisation {
	float: right;
	margin: 15px 0 0 8px;
	text-align: center;
}

#sterilisation ol li {
	margin: 0;
	padding: 10px 0 0;
	font-size: 80%;
}

#sterilisation img {
	border: 3px solid #CCC;
}

#sterilisation img:hover {
	border: 3px solid #333;
}

#salle_sterilisation {
	clear: both;
	margin: 10px 0 0;
}

#salle_sterilisation ul {
	list-style-type: none;
	padding: 10px 0 0;
}

#salle_sterilisation ul li {
	display: inline;
}

#salle_sterilisation img {
	border: 3px solid #CCC;
}

#salle_sterilisation img:hover {
	border: 3px solid #333;
}
/* @end */

/* @group EQUIPE */
#equipe ul {
	list-style-type: none;
}

#equipe ul li {
	clear: both;
	padding: 8px 0;
}

#equipe li a {
	float: left;
	margin: 0 20px 10px 0;
	padding: 0 0 10px;
}

#equipe img {
	border: 3px solid #CCC;
}

#equipe img:hover {
	border: 3px solid #333;
}
/* @end */

/* @group LIVRE OR */
.infoslivreor {
	padding: 0;
	margin: 5px 0;
	border-bottom: 1px solid #000;
}

.listecommentaires {
	list-style: none;
	margin: 0;
	padding: 0;
}

.detailscommentaires {
	list-style: none;
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid #666;
}

.detailscommentaires li {
	padding: 3px 5px;
}


/* @group Pagination */

#nber_resultpage {
	padding: 15px 0;
	margin: 0;
	text-align: center;
}

#nber_resultpage ol {
	padding: 0;
	margin: 10px 0;
	list-style-type: none;
}

#nber_resultpage ol li {
	display: inline;
}

#nber_resultpage li a, #nber_resultpage li a:visited {
	padding: 5px 10px;
	border: 2px solid #999;
	font-size: 80%;
	color: #999;
	text-decoration: none;
}

#nber_resultpage li a:hover, #nber_resultpage li a:focus {
	border: 2px solid #333;
	color: #333;
}

#nber_resultpage li a.current {
	border: 2px solid #333;
	color: #333;
}

/* @end */

/* @end */

/* @group LIENS */
#liens ul {
	list-style-type: none;
}

#liens ul li {
	clear: both;
	padding: 8px 0;
}

#liens img {
	float: left;
	margin: 0 20px 10px 0;
	padding: 0;
	border: 3px solid #CCC;
}

#liens img:hover {
	border: 3px solid #333;
}

#liens a {
	color: #333;
}

#liens a:hover, a:visited {
	color: #333;
}
/* @end */

/* @group PLAN */
#plan {
	padding: 20px 0 0 50px;
}

#map {
	margin: 15px auto;
	width: 450px;
	height: 300px;
}
/* @end */

/* @group CONTACT */
fieldset {
	width: 500px;
	margin: 10px auto 0;
	padding: 10px 20px 20px;
	border: 1px solid #000;
}

/* IE Hack !!! :-( */
* html fieldset { 
	width: 400px;
	margin: 0;
	padding: 10px 20px 20px;
	border: 1px solid #000;
}

fieldset legend {
	font: 125% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
	color: #000;
}

label {
	padding-top: 5px;
	text-align: left;
	display: block;
	font-size: 110%;
	color: #333;
	cursor: default;
}

.label_message {
	text-align: center;
}

.alerte {
	font-weight: 700;
	color: red;
}

.focus {
	border: 1px solid red;
}
/* @end */

/* @group ACCESSIBILITE */
.keyboard {
	padding: 0 5px;
	border: 1px solid #333;
	text-decoration: none;
}
/* @end */

/* @group REMERCIEMENTS */

.photoborder {
	margin: 5px auto;
	width: 140px;
}

.photoborder img {
	border: 3px solid #CCC;	
}

#flickrslideshow {
	border: 3px solid #CCC;
	margin: 20px auto;
	width: 400px;
	height: 300px;
}

/* @end */

/* @group VIDEOS */

.iframedaily {
	margin: 0 0 0 20px;
}

/* @end */

/* @end */