قالب:بوابة تصفح/styles.css

/*  الأنماط الموجودة هنا تؤثر على عناصر صفحة [[بوابة:تصفح]] فقط */
/* المقدمة */
#intro {
	border: solid 1px #000000;
	padding: 0.3em;
	background: #e5efff;

}

/* تنسيق أساسي */
#main {
	display: flex;
	width: 100%;
	max-width: 100%;
}

/* العمود الأيمن والأيسر*/
#rightCol,
#leftCol {
	display: flex;
	flex-direction: column;
	flex: 50%;
	max-width: 50%;
}

#rightCol {
	float: right; /*  للتنسيق على الإصدارات القديمة  */
}

#leftCol {
	float: left; /*  للتنسيق على الإصدارات القديمة  */
}

#main .geo {
	clear: both; /*  للتنسيق على الإصدارات القديمة  */
}

/* الأقسام */
.sec {
	border: solid 1px #000000;
	margin: 0.1em;
	padding: 0.2em;
}

.secTitle {
	margin: 0;
	background: #e5efff;
	text-align: center;
    font-weight: bold;
}

/*  تنسيق الأقسام */
#rightCol .sec:nth-child(1) {
	flex-grow: 1;
}

#rightCol .sec:nth-child(2) {
	flex-grow: 2;
}

#rightCol .sec:nth-child(3) {
	flex-grow: 3;
}

#rightCol .sec:nth-child(4) {
	flex-grow: 4;
}
#rightCol .sec:nth-child(5) {
	flex-grow: 5;
}

#leftCol .sec:nth-child(1) {
	flex-grow: 1;
}

#leftCol .sec:nth-child(2) {
	flex-grow: 2;
}

#leftCol .sec:nth-child(3) {
	flex-grow: 3;
}

#leftCol .sec:nth-child(4) {
	flex-grow: 4;
}

/* التنسيق على الشاشات الأقل من 720 بكسل */
@media screen and (max-width: 720px) {
	#intro .floatright {
		float: none;
		clear: none;
	}
	
	#intro .floatleft {
		display: none;
	}
	
	#main {
    	flex-direction: column;
    	min-width: 100%;
	}
	#rightCol,
	#leftCol {
		float: none;
		min-width: 100%;
	}
	
	body.skin-minerva table,
	body.skin-minerva tbody,
	body.skin-minerva tr,
    body.skin-minerva td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* تنسيق المقدمة على باقي الواجهات */
    body table,
	body tbody,
	body tr,
    body td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
}