/* Main CSS theme Style */
/* 
********************************************
Arabic style for Subsite  [RTL]
Author: Surajit Kayal (skayal.c@ksu.edu.sa);
http://pd.ksu.ed.sa;
********************************************
*/

/* =Responsive Structure
----------------------------------------------- */
@media (max-width: 800px) {
#ksu-bar-close {display: none !important;}

	#header {background: #fff;}
	.logo span {
		margin-top: 0;
		font-size: 12px;
	}
	#header .inner .sociale { 
		max-width: auto;
		float: right;
		clear: both;
	}

	#header .inner .head-bar {
		margin-top: 10px;
	}
	/*.head-bar .top-nav {background: #11408E; max-width: 100%}	*/

	#menu-icon {
    background: none repeat scroll 0 0 #11408E;
    color: #FFFFFF;
    display: inline-block;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    width: 100%;
	}

	.top-nav ul, .top-nav:active ul { 
		display: none;
		position: absolute;
		padding: 0px;
		background: #11408E;
		z-index: 999;
		width: 100%;
	}

	.top-nav li {
    float: right;
    margin: 0;
    padding: 2px 10px;
    text-align: left;
    width: 100%;
	}

	.top-nav:hover ul {
		display: block;
	}


	.head-bar .search {display: none;}

	#slider { max-width: 99%; max-height: 99%;}

	#blocks .right {max-width: 100%; float: none;  margin-right: 0;}
	#blocks .left {max-width: 100%; float: none;  margin-right: 0;}

	.left .row-1 {width: 100%; float: none;}
	.left .row-2 .col-main {max-width: 100%; float: none;}
	.left .row-2 .col-main.last {margin: 0; margin-top: 10px;}

	#tabs ul li {float: none; text-align: center;}
	#tabs .tab-box {width: 100%}
	.tab-box .cont .item {float: none; max-width: 100%; min-width: 100%; margin: 0px;}
	.tab-box .cont .item .box h2 {border-bottom: 0; min-height: 10px;}
	.tab-box .cont .item .box h3 {display: none;}
	.tab-box .cont .item .box {
		margin-bottom: 10px;
		height: auto;
	}
	.tab-box .cont .item .box:hover {
		margin-top: 0;
		height: auto;
		min-height: auto;
	}
	#tabs ul li {
	    float: right;
	    max-width: 150px;
	    text-align: center;
	}
	.tab-box .cont .item img {max-width: 100%; width: 100%;}

	#footer .cont .col-1 {
		width: 100%;
		margin: 10px !important;
	}
	
	.col-1 p {
		padding: 5px 0 5px 10px;
	}

}

@media (max-width: 650px) {
#ksu-bar-close {display: none !important;}

	#header {background: #fff;}

	.head-bar .search {display: none;}

	#slider { max-width: 99%; max-height: 99%;}

	#blocks .right {max-width: 100%; float: none;  margin-right: 0;}

	#blocks .left {max-width: 100%; float: none;  margin-right: 0;}

	.left .row-1 {width: 100%; float: none;}
	.left .row-2 .col-main {max-width: 100%; float: none;}
	.left .row-2 .col-main.last {margin: 0; margin-top: 10px;}

	#tabs ul li {float: none; text-align: center;}
	#tabs .tab-box {width: 100%}
	.tab-box .cont .item {float: none; max-width: 100%; min-width: 100%; margin: 0px;}
	.tab-box .cont .item .box h2 {border-bottom: 0; min-height: 10px;}
	.tab-box .cont .item .box h3 {display: none;}
	.tab-box .cont .item .box {
		margin-bottom: 10px;
		height: auto;
	}
	.tab-box .cont .item .box:hover {
		margin-top: 0;
		height: auto;
		min-height: auto;
	}
	#tabs ul li {
	    float: right;
	    max-width: 150px;
	    text-align: center;
	}
	#footer .cont .col-1 {
		width: 100%;
		margin: 10px !important;
	}
	.col-1 p {
		padding: 5px 0 5px 10px;
	}
}

@media (max-width: 540px) {
#ksu-bar-close {display: none !important;}

	#header {background: #fff;}

	.head-bar .search {display: none;}

	#slider { max-width: 99%; max-height: 99%;}

	#blocks .right {max-width: 100%; float: none;  margin-right: 0;}

	#blocks .left {max-width: 100%; float: none; margin-right: 0;}

	.left .row-1 {width: 100%; float: none;}
	.left .row-2 .col-main {max-width: 100%; float: none;}
	.left .row-2 .col-main.last {margin: 0; margin-top: 10px;}

	#tabs ul li {float: none; text-align: center;}
	#tabs .tab-box {width: 100%}
	.tab-box .cont .item {float: none; max-width: 100%; min-width: 100%; margin: 0px;}
	.tab-box .cont .item .box h2 {border-bottom: 0; min-height: 10px;}
	.tab-box .cont .item .box h3 {display: none;}
	.tab-box .cont .item .box {
		margin-bottom: 10px;
		height: auto;
	}
	.tab-box .cont .item .box:hover {
		margin-top: 0;
		height: auto;
		min-height: auto;
	}

	#tabs ul li {
	    float: right;
	    max-width: 150px;
	    text-align: center;
	}

	#footer .cont .col-1 {
		color: #fff;
		width: 100%;
		margin: 10px !important;
	}
	.col-1 p {
		padding: 5px 0 5px 10px;
	}
}
@media (max-width: 320px) {
	.logo a img {display: none;}
	.logo span {
		margin-top: 0;
		font-size: 15px;
	}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
	body {
		padding: 0;
	}
#ksu-bar-close {display: none !important;}
	#page {
		margin-top: 0;
	}
	.head-bar .search {display: none;}

	#header {background: #fff;}

	#slider { max-width: 99%; max-height: 99%;}

	#blocks .right {max-width: 100%; float: none;  margin-right: 0;}

	#blocks .left {max-width: 100%; float: none; margin-right: 0;}

	.left .row-1 {width: 100%; float: none;}
	.left .row-2 .col-main {max-width: 100%; float: none;}
	.left .row-2 .col-main.last {margin: 0; margin-top: 10px;}

	#tabs ul li {float: none; text-align: center;}
	#tabs .tab-box {width: 100%}
	.tab-box .cont .item {float: none; max-width: 100%; min-width: 100%; margin: 0px;}
	.tab-box .cont .item .box h2 {border-bottom: 0; min-height: 10px;}
	.tab-box .cont .item .box h3 {display: none;}
	.tab-box .cont .item .box {
		margin-bottom: 10px;
		height: auto;
	}
	.tab-box .cont .item .box:hover {
		margin-top: 0;
		height: auto;
		min-height: auto;
	}


	#tabs ul li {
	    float: right;
	    max-width: 150px;
	    text-align: center;
	}

	#footer .cont .col-1 {
		width: 100%;
		margin: 10px !important;
	}
	.col-1 p {
		padding: 5px 0 5px 10px;
	}

}

@media only screen and (min-width: 320px) and (max-width: 960px) {
	#blocks .right {
		width:98%;
		float:left;
	}

.news-block, .statistics-block, .features-block {
    margin-left: 2%;
    margin-right: 0;
    width: 98%;
	padding-left: 10px;
	}
	#blocks .left {
		width:98%;
		float:left;
		margin: 0;
	}
	#page-wrapper {
		width:90%;
	}
	.statistics-block {
	margin: 0;
    padding: 0;
	}
	.head-bar .top-nav{
		width:100%;
	}
	.top-nav ul li {
		border-bottom: 1px dotted #0072B8;
	}
	.top-nav li:hover {
		margin:0;
	}
	#header .inner .logo {
	background-position: 50% 0;
    width: 100% !important;
	}
	.view-fatures-groups {
	    margin: 10px;
    width: 100%;
	}
	.left #page-title {
	    margin-left: 10px;
    width: 100% !important;
	}
}