مطور Mtwer

@import url('reset.css');
@import url('typography.css');

body {
	background-color: #f8f8f8;
	margin: auto;
	width: 100%;
}

/* البار العلوى من خلفية وعمل حد سفلى وتحديد طوله وعرضة بكامل عرض الشاشة */

div#status-bar {
	background: url('../img/status-bar-bg.png') repeat-x;
	border-bottom: 2px groove #ffffff;
	height: 40px;
	width: 100%;
}
/*تحديد حوف مابداخل البار العلوى من البحث واللنكات والترحيب وتحديد عرضهم*/

div#status-bar-content { margin: 10px auto 0px auto; width: 800px; }

/*تحديد عرض عبارة الترحيب واللنكات من العرض للكلى للبار العلوى */

div#status-bar-commands { width: 400px; }


/* عمل فلوت لمستطيل البحث لليمين وتحديد عرضه*/

form#search-form { float: right; width: 200px; }

/*عمل فلوت لعبارة الترحيب باليسار وتحديد عرضه والمحاذاة العلوية  */

p#welcome { float:left; padding-top: 7px; width: 150px; }

/*تحديد مستطيل اللنكات من خلفية وطول وحافة ومحاذاة وعرض*/
p#action-bar {
	background: url('../img/action-bar-bg.png') no-repeat;
	height: 14px;
	margin-left:200px;
	padding: 8px 28px;
	width: 168px;
}

/*القيام باضافة علامة | قبل كل لنك وبعده */
p#action-bar a:before { content: '  |  '; }

p#action-bar a[title="اتفاقية"]:after { content: '  |'; }


/*لاستبدل مستطيل البحث العادى بالصورة اللى سوينها وهذا الكود مهم جدا*/
form#search-form input[type="text"] {
	background: url(../img/search-field.png) no-repeat;
	border:none;
	height:20px;
	padding: 5px 0px 0px 30px;
	width:170px;
}
/*كود مهم جدا لالغاء ظهور زر بحث القديم الاعتيادى ليظهر بدله مستطيل البحث فقط*/
form#search-form input[type="submit"] { display: none; }



/* Header */
/*كود الهيدر من خلفية ولونه فى حاله عدم ظهور الصورة والحافة السفلية وارتفاعه وعرضه */

div#header {
	background: url('../img/header-image.png') no-repeat center;
	background-color: #6eb9cc;
	border-bottom: 2px ridge #ffffff;
	height: 250px;
	width: 100%;
}



/*هذا الكود مهم جدا وخاص باللوجو النصى للموقع ولاحظ شىء مهم جدا ان عرض هذا اللوجو هو محدد كجزء من عرض الصورة ككل
وليس من عرض الشاشة التى ترى من خلالها الموقع
اى ان
800
هى 
800
 من 
1600 اللى هو عرض الصورة الاصلية للهيدر
 
*/

div#logo {
	margin: auto;
	padding-top: 35px;
	width: 800px;
}


/* الجزء الخاص بالمحتوى من اللنكات والمقدمة والسلايد شو */
div#content {
	margin: auto;
	padding-bottom: 50px;
	position: relative;
	width: 800px;
}

/*تحديد صورة الظل العلوى  اضافة من عندى*/
div#content-top-shadow {
	background: url('../img/content-top-shadow.png') repeat-x;
	height: 20px;
	width: 100%;
}


/*تحديد اضافة الظل السفلى */
div#content-bottom-shadow {	
	background: url('../img/content-bottom-shadow.png') repeat-x;
	clear: both;
	height: 20px;
	width: 100%;
}

/* الراب الذى يحيط السلايدشو واللنكات والمقدمة ولاحظ شىء مهم وهو 
overflow
width
لابد ان تكون دقيقة حسب مقاس تصميمك
والا سوف يخرب تصميمك

 */

div#page-wrapper {
	background-color: #ffffff;
	border: 1px solid #bababa;
	clear: both;
	height: 233px;
	margin-top: 75px;
	overflow: hidden;
	padding: 15px;
	width: 768px;
}

/* السلايد شو وسوينا فولت له داخل الراب لليسار وحددنا عرضه  */

div#slideshow {
	border-right: 1px solid #b2b2b2;
	float: left;
	padding-right: 15px;
	width: 375px;
}

/*خصائص الصور التى تعرض بداخل السلايد ولاحظ ان عرضها هو نفس عرض الصورة*/
div#slides {
	border: 1px solid #a7a7a7;
	height: 200px;
	width: 370px;
}

div#slides a.thumb {
	display:none;
}

div#slides a.default-slide {
	display:block;
}

/*خاص بالمستطيل اسفل السلايد شو الذى يظهر به كل كلمة */
div#slideshow-commands {
	background: url('../img/commands-bg.png') no-repeat;
	height: 19px;
	left: 15px;
	padding: 3px 25px;
	position: relative;
	width: 290px;	
}

/*خاص بزر السابق ولاخظ هذا الكود لابد ان يكون دقيق جدا حتى يكون الزر مفعل بمجرد مرور الماوس عليه*/
a#previous-slide {
	background: url('../img/commands-previous-slide.png') no-repeat;
	display: block;
	float: left;
	height: 12px;
	margin-top: 2px;
	text-indent: -9000px;
	width: 9px;
}

/*نفس السابق ولكن التالى*/

a#next-slide {
	background: url('../img/commands-next-slide.png') no-repeat;
	display: block;
	float: right;
	height: 12px;
	margin-top: 2px;
	text-indent: -9000px;
	width: 9px;
}

div#slideshow-commands h4
{
	margin-top:1px;
	width:100%;
}

/* اللنكات الرئيسية والمقدمة  */

div#message {
	margin-left: 410px;
	width: 350px;
}

div#message h3 {
	margin-bottom: 20px;
}

p#contact-info span {
	display: block;
}

span#phone {
	background: url('../img/phone-icon.png') no-repeat 0px 1px;
	float: left;
	margin-top: 25px;
	padding-left: 35px;
	width: 125px;
}

span#address {
	background:url('../img/address-icon.png') no-repeat 160px 30px;
	padding:5px 0px 0px 195px;
}



/*  اللنكات الرئيسية (الازرار)مهم جدااااااا هذا الكود ولابد ان اشرحه بالتفصيل) */


ul#tabs {
	margin-top: 30px;
	position: absolute;
	right: 0px;
	top: -65px;
}

ul#tabs li {
	background: url('../img/tabs-sprite.png') no-repeat;
	float: left;
	height: 35px;
	margin-right: 1px;
	width: 70px;
}

ul#tabs li a {
	display: block;
	height: 100%;
	text-indent: -9000px;
	width: 100%;
}

ul#tabs li#previous {
	background-position: 0px 0px;
	width:80px;
}

ul#tabs li#previous:hover {
	background-position: 0px -40px;
}

ul#tabs li#previous.current, ul#tabs li#previous:active {
	background-position: 0px -80px;
}

/*العادية الحالة فى الزر*/
ul#tabs li#home {
	background-position: -80px 0px;
}

/*عليه الماوس مرور عند الزر*/

ul#tabs li#home:hover {
	background-position: -80px -40px;
}

/*عليه الضغط عند الزر*/
ul#tabs li#home.current, ul#tabs li#home:active {
	background-position: -80px -80px;
}

ul#tabs li#portfolio {
	background-position: -150px 0px;
}

ul#tabs li#portfolio:hover {
	background-position: -150px -40px;
}

ul#tabs li#portfolio.current, ul#tabs li#portfolio:active {
	background-position: -150px -80px;
}

ul#tabs li#about {
	background-position: -220px 0px;
}

ul#tabs li#about:hover {
	background-position: -220px -40px;
}

ul#tabs li#about.current, ul#tabs li#about:active {
	background-position: -220px -80px;
}

ul#tabs li#contact {
	background-position: -290px 0px;
}

ul#tabs li#contact:hover {
	background-position: -290px -40px;
}

ul#tabs li#contact.current, ul#tabs li#contact:active {
	background-position: -290px -80px;
}

ul#tabs li#next {
	background-position: -360px 0px;
	width: 65px;
}

ul#tabs li#next:hover {
	background-position: -360px -40px;
}

ul#tabs li#next.current, ul#tabs li#next:active {
	background-position: -360px -80px;
}



/* الفوتر */

div#footer-image {
	background: url('../img/footer-image.png') no-repeat center #6eb9cc;
	border-top: 2px groove #ffffff;
	border-bottom:2px ridge #ffffff;
	height:50px;
	width:100%;
}

p#footer-text {
	background: url('../img/content-top-shadow.png') repeat-x;
	height: 37px;
	padding-top: 13px;
	width: 100%;
}