import url ('demo.css') ؛

/  GLOBALS  /

 ،
:بعد،
: قبل {-webkit-box-sizing: border-box؛
    -moz-box-sizing: مربع الحدود ؛
    تحجيم مربع: مربع الحدود ؛
    حشوة: 0 ؛
    الهامش: 0 ؛

}}

#شعار{
	الهامش: 2 بكسل ؛
	تعويم: مركز
	العرض: 315 بكسل ؛
	الارتفاع: 220 بكسل ؛
	الخلفية: url (../ images / logo.png) مركز عدم التكرار ؛
	العرض محجوب؛
	}}
	
:: الاختيار {
    الخلفية: شفاف ؛ 
}}

:: - موز موزير {
    الخلفية: شفاف ؛ 
}}

.wrapper-demo {
    الهامش: 60 بكسل 0 0 0 ؛
     التكبير: 1 ؛
    وزن الخط: 400 ؛
}}

.wrapper-demo: بعد {
    واضحة على حد سواء؛
    المحتوى: ""؛
    جدول العرض؛
}}


/  DEMO 2  /

.wrapper-dropdown-2 {
    /  الحجم والموضع  /
    الموقف: قريب ؛ /  تمكين التموضع المطلق للأطفال والعناصر الزائفة  /
    العرض: 200 بكسل ؛
    الهامش: 0 تلقائي
    المساحة المتروكة: 4 بكسل 15 بكسل ؛
    أعلى: -50px ؛
    /  الأنماط  /
    الخلفية: #fff؛
    حد يسار: 5 بكسل بلون رمادي مصمت ؛
    المؤشر: المؤشر ؛
    مخطط: لا شيء ؛
}}

.wrapper-dropdown-2: بعد {
    المحتوى: ""؛
    العرض: 0 ؛
    الارتفاع: 0 ؛
    الموقف: مطلق.
    يمين: 16 بكسل ؛
    أعلى: 50٪ ؛
    الهامش العلوي: -3 بكسل ؛
    عرض الحد: 6 بكسل 6 بكسل 0 6 بكسل ؛
    نمط الحدود: صلب ؛
    لون الحد: رمادي شفاف ؛
}}

.wrapper-dropdown-2 .dropdown {
  /  الحجم والموضع  /
    الموقف: مطلق.
    أفضل 100٪؛
    اليسار: -5 بكسل ؛
    يمين: 0 بكسل ؛

    /  الأنماط  /
    الخلفية: أبيض ؛
    -webkit- انتقال: جميع 0.3s سهولة.
    -موز-انتقال: جميع 0.3s خففت ؛
    -ms- انتقال: جميع 0.3s سهولة.
    - الانتقال: كل 0.3s خففت ؛
    الانتقال: تخفيف جميع 0.3s ؛
    نمط القائمة: لا شيء ؛

    /  إخفاء  /
    التعتيم: 0 ؛
    مؤشر الأحداث: لا شيء؛
}}

.wrapper-dropdown-2 .dropdown li a {
    العرض محجوب؛
    زخرفة النص: لا شيء ؛
    اللون: # 333 ؛
    الحد الأيسر: 5 بكسل صلب ؛
    الحشو: 3 بكسل ؛
    -webkit- انتقال: جميع 0.3s سهولة.
    -موز-انتقال: جميع 0.3s خففت ؛
    -ms- انتقال: جميع 0.3s سهولة.
    - الانتقال: كل 0.3s خففت ؛
    الانتقال: تخفيف جميع 0.3s ؛
}}

.wrapper-dropdown-2 .dropdown li: nth-child (1) a { 
    حد يمين اللون: # 00ACED ؛
}}

.wrapper-dropdown-2 .dropdown li: nth-child (2) a {
    حد يمين اللون: # 4183C4 ؛
}}

.wrapper-dropdown-2 .dropdown li: nth-child (3) a {
    حد يمين اللون: # 3B5998 ؛
}}

.wrapper-dropdown-2 .dropdown li i {
    الهامش الأيمن: 5 بكسل ؛
    اللون: يرث ؛
    محاذاة عمودية: وسط ؛
}}

/  حالة التحويم  /

.wrapper-dropdown-2 .dropdown li: تحوم عن {
    اللون: رمادي ؛
}}

/  الحالة النشطة  /

.wrapper-dropdown-2.active: بعد {
    عرض الحد: 0 6 بكسل 6 بكسل 6 بكسل ؛
}}

.wrapper-dropdown-2.active .dropdown {
    التعتيم: 1 ؛
    مؤشر الأحداث: السيارات ؛
}}

/  لا يوجد دعم CSS3  /

.لا يوجد عتامة .wrapper-dropdown-2. dropdown ،
.no-pointerevents .wrapper-dropdown-2 .dropdown {
    عرض لا شيء؛
    التعتيم: 1 ؛ /  إذا كان دعم التعتيم ولكن لا يوجد دعم لأحداث المؤشر  /
    مؤشر الأحداث: السيارات ؛ /  إذا كان دعم أحداث المؤشر لا يدعم أحداث المؤشر  /
}}

.لا يوجد عتامة .wrapper-dropdown-2.active .dropdown ،
.no-pointerevents .wrapper-dropdown-2.active .dropdown {
    العرض محجوب؛
}}

/  العرض التوضيحي 3  /

.wrapper-dropdown-3 {
    /  الحجم والموضع  /
    الموقف: قريب ؛
    العرض: 200 بكسل ؛
    الهامش: 0 تلقائي
    الحشو: 10 بكسل ؛

    /  الأنماط  /
    الخلفية: #fff؛
    نصف قطر الحد: 7 بكسل ؛
    الحد: 1 بكسل صلب rgba (0،0،0،0.15) ؛
    box-shadow: 0 1px 1px rgba (50،50،50،0.1) ؛
    المؤشر: المؤشر ؛
    مخطط: لا شيء ؛

    /  إعدادات الخط  /
    وزن الخط: غامق ؛
    اللون: # 8AA8BD ؛
}}

.wrapper-dropdown-3: بعد {
    المحتوى: ""؛
    العرض: 0 ؛
    الارتفاع: 0 ؛
    الموقف: مطلق.
    يمين: 15 بكسل ؛
    أعلى: 50٪ ؛
    الهامش العلوي: -3 بكسل ؛
    عرض الحد: 6 بكسل 6 بكسل 0 6 بكسل ؛
    نمط الحدود: صلب ؛
    لون الحدود: # 8aa8bd شفاف ؛
}}

.wrapper-dropdown-3 .dropdown {
  /  الحجم والموضع  /
    الموقف: مطلق.
    القمة: 140٪
    اليسار: 0 ؛
    يمين: 0 ؛

    /  الأنماط  /
    الخلفية: أبيض ؛
    نصف قطر الحد: يرث ؛
    الحد: 1 بكسل صلب rgba (0،0،0،0.17) ؛
    ظل الصندوق: 0 0 5px rgba (0،0،0،0.1) ؛
    وزن الخط: عادي ؛
    -webkit-الانتقالية: جميع 0.5s بسهولة ؛
    -moz- الانتقال: جميع 0.5s سهلة ؛
    -ms- انتقال: جميع 0.5s في سهولة.
    - الانتقال: كل 0.5s سهلة.
    الانتقال: جميع 0.5s بسهولة ؛
    نمط القائمة: لا شيء ؛

    /  إخفاء  /
    التعتيم: 0 ؛
    مؤشر الأحداث: لا شيء؛
}}

.wrapper-dropdown-3. dropdown: بعد {
    المحتوى: ""؛
    العرض: 0 ؛
    الارتفاع: 0 ؛
    الموقف: مطلق.
    أسفل: 100٪
    يمين: 15 بكسل ؛
    عرض الحد: 0 6 بكسل 6 بكسل 6 بكسل ؛
    نمط الحدود: صلب ؛
    لون الحد: #fff شفاف ؛    
}}

.wrapper-dropdown-3. dropdown: قبل {
    المحتوى: ""؛
    الحد الأيسر: 8 بكسل صلب 0.1) ؛ الحد الأيمن: 8 بكسل صلب 0 ؛ الحد العلوي: 0 صلب rgba (0 ؛ الحد السفلي: 8 بكسل صلب 0 ؛ العرض: 0 ؛
    الارتفاع: 0 ؛
    الموقف: مطلق.
    أسفل: 100٪
    يمين: 13 بكسل ؛
        
}}

.wrapper-dropdown-3 .dropdown li a {
    العرض محجوب؛
    الحشو: 10 بكسل ؛
    زخرفة النص: لا شيء ؛
    اللون: # 8aa8bd ؛
    الحد السفلي: 1 بكسل صلب # e6e8ea ؛
    box-shadow: inset 0 1px 0 rgba (255،255،255،1) ؛
    -webkit- انتقال: جميع 0.3s سهولة.
    -موز-انتقال: جميع 0.3s خففت ؛
    -ms- انتقال: جميع 0.3s سهولة.
    - الانتقال: كل 0.3s خففت ؛
    الانتقال: تخفيف جميع 0.3s ؛
}}

.wrapper-dropdown-3 .dropdown li i {
    تعويم: يمين
    اللون: يرث ؛
}}

.wrapper-dropdown-3 .dropdown li: الأول من نوع a {
    نصف قطر الحد: 7 بكسل 7 بكسل 0 0 ؛
}}

.wrapper-dropdown-3 .dropdown li: الأخير من نوع a {
    الحد: لا شيء ؛
    نصف قطر الحد: 0 0 7 بكسل 7 بكسل ؛
}}

/  حالة التحويم  /

.wrapper-dropdown-3 .dropdown li: hover a {
    الخلفية: # f3f8f8 ؛
}}

/  الحالة النشطة  /

.wrapper-dropdown-3.active .dropdown {
    التعتيم: 1 ؛
    مؤشر الأحداث: السيارات ؛
}}

/  لا يوجد دعم CSS3  /

.لا يوجد عتامة .wrapper-dropdown-3. dropdown ،
.no-pointerevents .wrapper-dropdown-3 .dropdown {
    عرض لا شيء؛
    التعتيم: 1 ؛ /  إذا كان دعم التعتيم ولكن لا يوجد دعم لأحداث المؤشر  /
    مؤشر الأحداث: السيارات ؛ /  إذا كان دعم أحداث المؤشر لا يدعم أحداث المؤشر  /
}}

.لا يوجد عتامة .wrapper-dropdown-3.active .dropdown ،
.no-pointerevents .wrapper-dropdown-3.active .dropdown {
    العرض محجوب؛
}}


/  لا يوجد دعم CSS3  /

no-opacity wrapper-dropdown-4. dropdown ،
.no-pointerevents .wrapper-dropdown-4 .dropdown {
    عرض لا شيء؛
    التعتيم: 1 ؛ /  إذا كان دعم التعتيم ولكن لا يوجد دعم لأحداث المؤشر  /
    مؤشر الأحداث: السيارات ؛ /  إذا كان دعم أحداث المؤشر لا يدعم أحداث المؤشر  /
}}

.لا يوجد عتامة .wrapper-dropdown-4.active .dropdown ،
.no-pointerevents .wrapper-dropdown-4.active .dropdown {
    العرض محجوب؛
}}


/  لا يوجد دعم CSS3: لا يوجد  /