<!DOCTYPE html>
<html lang="fr">
	<head>
		<link rel="stylesheet" href="styles.css" type="text/css" />
		<title>LIVEACL - REMONTE DE FICHE</title>
		<style type="text/css">
		body {
    color: white;
    font-family: 'Droid Sans',Tahoma,Arial,Verdana sans-serif;
    font-size: 16px;
    background: white;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }

@font-face {
    font-family: 'IconicStroke';
    src: url('http://www.onextrapixel.com/examples/html5-css3-contact-form/font/iconic_stroke-webfont.eot');
    src: url('http://www.onextrapixel.com/examples/html5-css3-contact-form/font/iconic_stroke-webfont.eot?#iefix') format('embedded-opentype'), url('http://www.onextrapixel.com/examples/html5-css3-contact-form/font/iconic_stroke-webfont.woff') format('woff'), url('http://www.onextrapixel.com/examples/html5-css3-contact-form/font/iconic_stroke-webfont.ttf') format('truetype'), url('http://www.onextrapixel.com/examples/html5-css3-contact-form/font/iconic_stroke-webfont.svg#IconicStrokeRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-family: 'Questrial', Verdana, sans-serif;
    text-align: center;
    font-size: 40px;
    padding: 0;
    margin: 0 0 20px 0;
    position: relative;
    color: #8C8C8C;
}

/* * have a nice ampersand *
   ================================================== */

h1:after {
    font-size: 25px;
    color: #D6CFCB;
    content: '&';
    text-align: center;
    display: block;
    width: 100%;
    font-family: 'Alice', Verdana, serif;
    text-shadow: 0px 1px 0px #fff;
}

/* * create the gradient bottom *
   ================================================== */

/* ===[ Here comes to good stuff : content styling ]=== */


/* * my "fake" background that will hover the stripes *
   ================================================== */

#content:after {
    background: #F9F9F9;
    margin: 10px;
    position: absolute;
    content : " ";
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;
    border: 1px #E5E5E5 solid;
    /*border-radius*/
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

/* ** form styling *
   ================================================== */

/* * we remove the red glow around required fields since we are already using the red star
   ================================================== */

input:required, textarea:required {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}

/* * inputs and textarea*
   ================================================== */

input:not([type="submit"]), textarea {
    outline: none;
    display: block;
    width: 380px;
    padding: 4px 8px;
    border: 1px dashed #DBDBDB;
    color: #3F3F3F;
    font-family: 'Droid Sans',Tahoma,Arial,Verdana sans-serif;
    font-size: 14px;
    /*border-radius*/
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    /*transition*/
    -webkit-transition: background 0.2s linear, box-shadow 0.6s linear;
    -moz-transition: background 0.2s linear, box-shadow 0.6s linear;
    -o-transition: background 0.2s linear, box-shadow 0.6s linear;
    transition: background 0.2s linear, box-shadow 0.6s linear;
}

input:not([type="submit"]):active, textarea:active, input:not([type="submit"]):focus, textarea:focus {
    background: #F7F7F7;
    border: dashed 1px #969696;
    /*box-shadow*/
    -webkit-box-shadow: 2px 2px 7px #E8E8E8 inset;
    -moz-box-shadow: 2px 2px 7px #E8E8E8 inset;
    box-shadow: 2px 2px 7px #E8E8E8 inset;
}

input:not([type="submit"]) { height: 20px }

/* placeholder  */

::-webkit-input-placeholder {
    color: #BABABA;
    font-style: italic;
}

input:-moz-placeholder, textarea:-moz-placeholder {
    color: #BABABA;
    font-style: italic;
}

textarea {
    min-height: 150px;
    resize: vertical;
}

/* * labels*
   ================================================== */

/* * adding our icon font !!
   ================================================== */

.iconic:before {
    font-size: 25px;
    font-family: "IconicStroke";
}

label {
    color: #7F7E7E;
    -webkit-transition: color 1s ease;
    -moz-transition: color 1s ease;
    transition: color 1s ease;
}

label:hover { color: #191919 }

label:before {
    color: #C1BFBD;
    -webkit-transition: color 1s ease;
    -moz-transition: color 1s ease;
    transition: color 1s ease;
}

label:hover:before {
    color: #969696;
    -webkit-transition: color 1s ease;
    -moz-transition: color 1s ease;
    transition: color 1s ease;
}

p { margin-bottom: 20px }

.indication {
    color: #878787;
    font-size: 12px;
    font-style: italic;
    text-align: right;
    padding-right: 10px;
}

.required { color: #E5224C }

/* * Styling the send button *
   ================================================== */

input[type=submit] {
    margin-left: 235px;
    cursor: pointer;
    background: none;
    border: none;
    font-family: 'Alice',serif;
    color: #767676;
    font-size: 18px;
    padding: 10px 4px;
    border: 1px solid #E0E0E0;
    text-shadow: 0px 1px  1px #E8E8E8;
    background: rgb(247,247,247);
    background: -moz-linear-gradient(top,  rgba(247,247,247,1) 1%, rgba(242,242,242,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(247,247,247,1)), color-stop(100%,rgba(242,242,242,1)));
    background: -webkit-linear-gradient(top,  rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
    background: -o-linear-gradient(top,  rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
    background: -ms-linear-gradient(top,  rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
    background: linear-gradient(top,  rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
    /*border-radius*/
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    /*box-shadow*/
    -webkit-box-shadow: 0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
    -moz-box-shadow: 0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
    box-shadow: 0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
    /*transition*/
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}


</style>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
	</head>
	<body>
		<center><h2><b>Contactez nous !</b></h2></center>
		<br><br>
		<div id="content">
			<center><div style="width: 100%; float:left">
			    <div id="content">        
			        <form action="api_ticket.php" method="post"  autocomplete="on">
						<p> <label for="username" class="iconic user" > Votre nom : </label> <input type="text" name="username" id="Fullname"   placeholder="nom"  /> </p>

						<p> <label for="usermail" class="iconic mail-alt"> Votre email : <span class="required"></span></label> <input type="email" name="usermail" id="Email" placeholder="email"  /> </p>

						<p> <label for="phonename" class="iconic phone"> Téléphone : </span></label> <input type="text" name="phonename" id="Phone" placeholder="Phone" /> </p>

						<p> <label for="subject" class="iconic quote-alt">Votre Sujet : </label> <input type="text" name="subject" id="Subject"  placeholder="Subject" /> </p>

                        <p> <label class="required" for="message"  class="iconic comment"> Votre message :<span class="required" id="Text"></span></label> <textarea required name="texte" placeholder="Merci d'écrire votre message ici." ></textarea> </p>
						
						<input type="submit" value="Créer le ticket !" />		
					</form>		
			    </div> 
			</div></center>
	</body>
</html>