<div id="content"><br /><h5>أتصل بنا</h5><br /><div class="form"><form name="contact-form"><!-- مربع الاسم --><input class="contact-form-name" id="ContactForm1_contact-form-name" name="الأسم" onblur="if (this.value == "") {this.value = "الأسم";}" onfocus="if (this.value == "الأسم") {this.value = "";}" size="30" type="text" value="الأسم" /> <br /><br /><!-- مربع الاميل --><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" onblur="if (this.value == "") {this.value = "البريد الألكتروني";}" onfocus="if (this.value == "البريد الألكتروني") {this.value = "";}" size="30" type="text" value="البريد الألكتروني" /> <br /><br /><!-- مربع الرسالة --><textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" onblur="if (this.value == "") {this.value = "أدخل نص الرسالة..";}" onfocus="if (this.value == "أدخل نص الرسالة..") {this.value = "";}" value="أدخل نص الرسالة.."></textarea> <br /><br /><!-- تفريغ --><input class="contact-form-button contact-form-button-submit MBT-button-color" type="reset" value="تفريغ" /> <!-- إرسال --> <input class="contact-form-button contact-form-button-submit MBT-button-color" id="ContactForm1_contact-form-submit" type="button" value="إرسال" /> <br /><!-- نهاية -->
<br /><div style="max-width: 222px; text-align: center; width: 100%;"><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></div></form><!-- تعديل مدونة مداد الجليد -->
</div></div>
<style>
h5 {
font-family: 'Questrial', Verdana, sans-serif;
text-align: left;
font-size: 30px;
padding: 0;
margin: 0 0 20px 0;
position: relative;
color: #8C8C8C;
}
#content {
position: relative;
margin: 20px auto;
width: 420px;
z-index: 100;
padding: 30px;
border: 1px solid #383838;
font-size:14px;
color:#666;
/* My stipped background */
background: #D1D1D1; /* Old browsers */
background: -moz-repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */
background: -webkit-repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */
background: -o-repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */
background: repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */
/*border-radius*/
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/*box-shadow*/
-webkit-box-shadow: 0px 1px 6px #3F3F3F;
-moz-box-shadow: 0px 1px 6px #3F3F3F;
box-shadow: 0px 1px 6px #3F3F3F;
}
#content:after {
background: #fff;
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;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
max-width: 220px;
width: 100%;
font-weight:bold;
}
.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9QNsi3O-O7rIS-gShVSptxkFOIKOKPZszvtMVB_2Kl_YPkdVxBtkP_1YWg-i7oa3IuEBywSn31OsyMvZi-UJWS2DOrAkMK1MdFjfLuyCD0jITYF7Rmvt4ABkuAWedvOK2_-ZA0-szZAQ/s320/name.png) no-repeat 7px 8px;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;
}
.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZg0k2z8IdXB9XvSKTzvuBuyqvKAZAra1_8-qU_kzeGIzLqjcpfmow0iuISFnRHe7Il7aRn57clm7kaqLCNYZIFz-LJTdBXKq67zcSe0Ax29k8-0Ovk8mCPphyl2C622vQfTbqYyXS69I/s320/email.png) no-repeat 7px 10px;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;
}
.contact-form-email:hover, .contact-form-name:hover{
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 5px 15px 5px 28px;
}
.contact-form-email-message:hover {
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 10px;
}
.contact-form-email-message {
background: #FFF;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: arial;
font-size: 12px;
margin: 0;
margin-top: 5px;
padding: 10px;
vertical-align: top;
max-width: 430px!important;
height: 150px;
border-radius:4px;
}
.contact-form-button {
cursor:pointer;
height: 32px;
line-height: 28px;
font-weight:bold;
border:none;
}
.contact-form-button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.contact-form-button:hover {
text-decoration: none;
}
.contact-form-button:active {
position: relative;
top: 1px;
}
.MBT-button-color {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.MBT-button-color:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
border-color: #F47C20!important;
}
.MBT-button-color:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
</style>
<!--[if IE 9]>
<style>
.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9QNsi3O-O7rIS-gShVSptxkFOIKOKPZszvtMVB_2Kl_YPkdVxBtkP_1YWg-i7oa3IuEBywSn31OsyMvZi-UJWS2DOrAkMK1MdFjfLuyCD0jITYF7Rmvt4ABkuAWedvOK2_-ZA0-szZAQ/s320/name.png) no-repeat 7px 0px;
}
.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZg0k2z8IdXB9XvSKTzvuBuyqvKAZAra1_8-qU_kzeGIzLqjcpfmow0iuISFnRHe7Il7aRn57clm7kaqLCNYZIFz-LJTdBXKq67zcSe0Ax29k8-0Ovk8mCPphyl2C622vQfTbqYyXS69I/s320/email.png) no-repeat 7px 6px;
}
</style>
<![endif]-->
<style>
@media screen and (-webkit-min-device-pixel-ratio:0) {
.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9QNsi3O-O7rIS-gShVSptxkFOIKOKPZszvtMVB_2Kl_YPkdVxBtkP_1YWg-i7oa3IuEBywSn31OsyMvZi-UJWS2DOrAkMK1MdFjfLuyCD0jITYF7Rmvt4ABkuAWedvOK2_-ZA0-szZAQ/s320/name.png) no-repeat 7px 6px;
padding: 15px 15px 15px 28px;
}
.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZg0k2z8IdXB9XvSKTzvuBuyqvKAZAra1_8-qU_kzeGIzLqjcpfmow0iuISFnRHe7Il7aRn57clm7kaqLCNYZIFz-LJTdBXKq67zcSe0Ax29k8-0Ovk8mCPphyl2C622vQfTbqYyXS69I/s320/email.png) no-repeat 7px 8px;
padding: 15px 15px 15px 28px;
}
.contact-form-email:hover, .contact-form-name:hover{
padding: 15px 15px 15px 28px;
}
.contact-form-button {
height: 28px;
}
}
</style>