@charset "utf-8";
/* CSS Document */

img { border-style:none;}



html, body, div, span, canvas { margin:0; padding:0;}
@font-face {
    font-family: "BYekan"; 
    src: url("BYekan.eot") format("eot"), url("BYekan.woff") format("woff"), url("BYekan.ttf") format("truetype");
}

#top{ position:relative;width:100%; height:397px; margin:0 auto; background-image:url(images/top2.jpg); background-position:center;}



div.a {
position:absolute;}
    		.nudge2			{ display:block;width:130;height:130px; }
		.move  		{ display:block; float: right;padding:10px 1% 0; width:10%;height:30px; }
		a#menu-link{text-align: center;text-decoration:none;color:#fff; font-family:byekan; size:100%;text-shadow: 2px 2px 5px rgba(0, 0, 0, 1);}
		.menuel {background-image:url(images/menu.png); background-position:top; width:107px; height:57px;}






/* rounded image styles */
.rounded-img {
	display: inline-block;
	border: solid 1px #000;
	overflow: hidden;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.rounded-img2 {
	display: inline-block;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.NAV {
  width: 100%;
  height: 50px;
  border-top: 0px solid #52596c;
  background: #3e465a;
  background-image: -moz-linear-gradient(top, #3e465a, #333b4b);
  background-image: -ms-linear-gradient(top, #3e465a, #333b4b);
  background-image: -o-linear-gradient(top, #3e465a, #333b4b);
  background-image: -webkit-gradient(linear, center top, center bottom, from(#3e465a), to(#333b4b));
  background-image: -webkit-linear-gradient(top, #3e465a, #333b4b);
  background-image: linear-gradient(top, #3e465a, #333b4b);
position:relative;margin-top: 45px;color:#fff; font-family:byekan; font-size:18px; text-align:center;
  
  left: 0;
  
  z-index: 999;

}


.downmenu {
  height: 450px;
  background-image: url(images/tbg.png); background-repeat:repeat-x;
  background-image: -moz-linear-gradient(top, white, #d4e9ee);
  background-image: -ms-linear-gradient(top, white, #d4e9ee);
  background-image: -o-linear-gradient(top, white, #d4e9ee);
  background-image: -webkit-gradient(linear, center top, center bottom, from(white), to(#d4e9ee));
  background-image: -webkit-linear-gradient(top, white, #d4e9ee);
  background-image: linear-gradient(top, #ffffff, #d4e9ee);
}


.info, .success, .warning, .alert, .validation {
	font-family:Tahoma, Geneva, sans-serif;
	font-weight:normal;
	font-size:12px;
	-webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
    border: 1px solid;
    padding:9px 50px;
    background-repeat: no-repeat;
    background-position: 99.95% center;
	margin:10px auto;
	width:70%;
}
.info {
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('images/info.png');
}
.success {
    color: #4F8A10;
    background-color: #DFF2BF;
    background-image:url('images/success.png');
}
.warning {
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url('images/warning.png');
}
.alert {
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url('images/alert.png');
}



#belowheaderwrapper {
	margin:-18px 0 0 30px;
	background: url(images/bottomshadow.png) center top repeat-x;
	overflow:hidden;
	clear:both;
	z-index: 1000;
	position: relative;
}
#belowheader {
	margin:2px auto 0;
	max-width: 960px;
}
#belowheader li {
	font-family:byekan;
	width:20%;
	margin:0 2%;
	float:left;
	list-style:none;
	height:165px;
	text-align:center;
	font-size:15px;
	line-height:1;
	text-shadow: -1px 2px 1px rgba(0,0,0,.15);
	direction:rtl;
}
.home #belowheader li {
	height:165px;
}
#belowheader li span {
	background-repeat: no-repeat;
}
#belowheader li .bottom a {
	text-decoration:none;
	color:#FFF;
	display:block;
	margin:0 auto;
	width:90%;
	max-width:130px;
	height:125px;
	padding-top: 4px;
}
.home #belowheader li .bottom a {
	height:135px;
	padding-top:0;
}
#belowheader li .top {
	background-position:center top;
	display:block;
	height:15px;
	-moz-transition: all 0.25s ease;
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
#belowheader li:hover .top {
	height:25px;
}
#belowheader li .bottom {
	display:block;
	background-position:center bottom;
}
#belowheader li.orange {
	margin: 0 3.5%;
}
#belowheader li.teal span.top, #belowheader li.teal span.bottom {
	background-image: url(images/ribbon-teal.png);
}
#belowheader li.pink span.top, #belowheader li.pink span.bottom {
	background-image: url(images/ribbon-pink.png);
}
#belowheader li.green span.top, #belowheader li.green span.bottom {
	background-image: url(images/ribbon-green.png);
}
#belowheader li.orange span.top, #belowheader li.orange span.bottom {
	background-image: url(images/ribbon-orange.png);
}
#belowheader li img {
	display:block;
	margin:0 auto 5px;
	
}
.fancy_list li  { list-style-image:url(images/list.png); font-family:Tahoma, Geneva, sans-serif; font-size:12px; float:right; margin:5px 1%; width:48%;}
.fancy li { list-style-image:url(images/star.png); font-family:Tahoma, Geneva, sans-serif; font-size:12px;  margin:5px 2px;}

#menurast ul.fancy {

        padding: 0;
        margin: 30px ;
        
    }
 #menuchap ul.fancy {

        padding: 0;
        margin: 30px ;
        
    }



a.fade {
    color: #fff;
    transition: color 0.4s ease, transform 0.4s ease;text-decoration:none;
}

a.fade:hover {
    color: #ffcc00;   /* رنگ هنگام hover */
    transform: translateY(-2px); /* یه حرکت نرم کوچیک */
}
	#rand{
		bottom:37px;background-position:0 -4px; position:absolute;width:100%; height:4px;  background-image:url(images/ripple_sprite.png); background-repeat:repeat-x; z-index:555
		}










/* ===== TOP INLINE ===== */
#top {
    position: relative;
    width: 100%;
    height: 397px;
    margin: 0 auto;
    background-image: url(images/top2.jpg);
    background-position: center;
}


/* ===== wrapper div (بدون id) ===== */
#container {height:300px;overflow:hidden;width:100%;top:0px;}
#container_inner {
    width:300px; margin:0 auto;position:relative; text-align:right;
}
#container_inner2 {
float:right;width:100px; height:100px; position:relative
}

/* ===== balloon box (بدون id) ===== */
#ball_box {
    float: right;
    width: 100px;
    height: 100px;
    position: relative;
}

/* ===== HEADER INLINE ===== */
#header {
    width: 100%;
    height: 120px;
    position: relative;
    
    
}



/* ===== TITLE INLINE ===== */
#title {
    direction: rtl;
    text-align: center;
    margin: 0 auto;
    width: 50%;
    height: auto;
    text-shadow: 2px 2px 5px rgba(150,150,150,1);
}

/* ===== TITLE SPAN ===== */
#title span {
    font-family: byekan;
    font-size: 25px;
    color: #07487e;
}

/* ===== MENU TOGGLE INLINE ===== */
#menu-toggle {
    display: none;
    text-align: right;
    padding: 10px;
    cursor: pointer;
    font-family: BYekan;
}

/* ===== NAV INLINE ===== */
#nav_main {
    position: relative;
    margin-top: 45px;
    color: #fff;
    font-family: byekan;
    font-size: 18px;
    text-align: center;
}

/* ===== NAV INNER INLINE ===== */
#nav_inner {
    margin: 10px auto 0;
    max-width: 800px;
    padding: 10px 0 0 0;
}

/* ===== SEFID INLINE ===== */
#sefid {
    width: 100%;
    position: relative;
    height: inherit;
    margin: 20px 0;
    direction: rtl;
}

/* ===== MARGIN INLINE ===== */
#margin {
    margin: 0 auto;
    width: 60%;
}

/* ===== MENUCHAP INLINE ===== */
#menuchap { 
    background-image: url(images/noise_shade1.png);
    width: 15%;
    height: inherit;
    position: absolute;
    left: 0;
    top: 30px;
    border-radius: 10px;
}
#menuchap2 {margin:60px auto 30px; width:120px;}
/* ===== MENURAST INLINE ===== */
#menurast {
    
    background-image: url(images/noise_shade1.png);
    width: 15%;
    height: 200px;
    position: absolute;
    right: 0;
    top: 30px;
    border-radius: 10px;
}

menurasttitle2{
    float:right;margin:0 5px;  font-family:Tahoma; font-size:12px; color:#fff}

menurasttitle3{clear:both;margin:60px 5px 0; direction:rtl; text-align:right; color:#FFFFFF }
/* ===== RAND INLINE ===== */
#rand {
    bottom: 37px;
    background-position: 0 -4px;
    position: absolute;
    width: 100%;
    height: 4px;
    background-image: url(images/ripple_sprite.png);
    background-repeat: repeat-x;
    z-index: 555;
}


 #menuchaptitle,
#menurasttitle {width:10%; height:20px; background-color:#39C; border-radius:5px 0px 0px 5px; margin:30px 0; width:80%; position:absolute; top:0;right:0px;float:right;margin:0 20px;  font-family:Tahoma; font-size:12px; color:#fff}












#ide{
background-image:url(../../../template/ide.gif); background-repeat:no-repeat; background-position:center 10px; width:inherit;  position:relative;

}






@media (max-width: 768px) {
#ide{
background-image:url(../../../template/ide.gif); background-repeat:no-repeat; background-position:center 10px; width:inherit;  position:relative;background-size: 100%;

}
    body {
        margin:0;
        direction:rtl;
        overflow-x:hidden;
    }
	
	
	 #menuchap,
    #menurast { display: none;
        position: relative!important;   /* مهم‌ترین تغییر */
        width: 90% !important;
        height: auto !important;
        margin: 10px auto!important;
        border-radius: 20px !important;
        background-repeat: repeat !important;
        clear: both;
    }

	 #menuchaptitle,
    #menurasttitle {
		height: 30px !important;
        position: relative !important; /* مهم */
        width: 30% !important;
        margin: 10px 0 !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
		border-radius:10px !important;
    }
	
	
    /* تیتر بالای هر باکس */
    #menuchap > div:first-child,
    #menurast > div:first-child {
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
    }

    /* محتوای داخل */
    #menuchap div,
    #menurast div {
        margin: 10px auto !important;
        text-align: center !important;
    }

    
    /* لیست */
    #menurast ul.fancy {
        padding: 0;
        margin: 10px 0;
        text-align: center;
    }

    #menurast ul.fancy li {
        display: block;
        margin: 5px 0;
    }
	
	
	
	
#rand {bottom: 50px;}
    img {
        max-width:100%;
        height:auto;
    }

    #margin {
        width:95% !important;
    }

    #header {
        height:auto !important;
    }

    #title {
        width:100% !important;
        font-size:18px !important;
    }

    /* MENU */
    #menu-toggle {
		
        display:block !important;
        background:#07487e;
        color:#fff;
        text-align:center;
        padding:10px;
        cursor:pointer;
    }

      #menu {height: 350px;
		  display: none;
        background: #07487e;
        padding: 5px 0;
    }
	.menuel{
		 background:#07487e;
		width: auto;
	}
    #menu .move {
        width: 100% !important;
        margin: 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    #menu a {
        display: block;
    }

    .menuel {
        text-align: right;
        padding: 12px 15px;
        font-size: 15px;
        color: #fff;
    }

    .menuel:hover {
        background: rgba(255,255,255,0.1);
    }

    /* HEADER */
    #top {
       
        background-repeat: no-repeat;
		height: 397px;
    }

    #container {
        position:relative !important;
        height:auto !important;
            height: 300px;
    overflow: hidden;
    width: 100%;
    top: 0px;
        
    }

    /* BOXES */
    #belowheader li {
        width:48% !important;
        margin:1% !important;
        float:right;
    }

  

    /* CONTENT */
    div[style*="width:68%"] {
        width:100% !important;
        margin:20px auto !important;
    }

    .NAV {
        position:static !important;
        font-size:14px !important;
        height: auto;
    }
	
	
	
	

}








