@font-face
{
font-family: 'Greta Arabic';
src: url('fonts/Greta_Arabic_Light.eot');
src: url('fonts/Greta_Arabic_Light.eot?#iefix') format('embedded-opentype'),
url('fonts/Greta_Arabic_Light.woff') format('woff'),
url('fonts/Greta_Arabic_Light.ttf') format('truetype'),
url('fonts/Greta_Arabic_Light.svg#Greta Arabic') format('svg');
}
* {
margin: 0;
padding: 0;
}
*,:before,:after {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
html, body {
height: 100%;
width: 100%;
}
body {
background:#fff;
direction: rtl;
font-family: 'Greta Arabic';
font-size: 14pt;
margin: 0;
padding: 0;
overflow-x: hidden;
}
:focus {
outline: 0 none;
}
a, a:link, a:active, a:visited, a:hover {
text-decoration: none;
}
img {
border: medium none;
max-width: 100%;
}
.clear {
clear: both;
}
.header {
background: none repeat scroll 0 0 #F0F0F0;
height: 118px;
text-align: center;
width: 100%;
}
.header .logo {
background-image: url("images/logo_ramadhan.png");
background-position: center center;
background-size: 150px 48px;
background-repeat: no-repeat;
display: inline-block;
height: 48px;
margin: 14px auto 0;
width: 150px;
}
.header .logo a {
display: block;
height: 48px;
width: 150px;
}
/***************/
.navigation {
width: 200px;
height: 100%;
position: fixed;
top: 0;
right: -200px;
bottom: 0;
z-index: 999;
list-style: none;
background: #223d99;
}
.nav-item {
width: 200px;
border-bottom: 1px solid #3a5cd1;
}
.nav-item:hover {
background-color:#3333cc;
}
.nav-item a {
display: block;
padding: 10px 15px;
color: white;
font-size: 12pt;
text-decoration: none;
}
.site-wrap {
min-height: 100%;
min-width: 100%;
background-color: white;
position: relative;
top: 0;
bottom: 100%;
right: 0;
z-index: 1;
}
.nav-trigger {
position: absolute;
clip: rect(0, 0, 0, 0);
}
label[for="nav-trigger"] {
position: absolute;
right: 15px; top: 15px;
z-index: 2;
height: 64px;
width: 64px;
cursor: pointer;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAXCAYAAABqBU3hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAA8SURBVHjaYozSSvrPMICAiWGAwagDWBgYGBhHo2DUASM+F4yWhKNpYLQkHHXAaEE0mgYGFAAAAAD//wMAwyEEGyRH+CIAAAAASUVORK5CYII=');
background-repeat: no-repeat;
background-position:right top;
}
.nav-trigger + label, .navigation {
-webkit-transition: right 0.2s;
-moz-transition: right 0.2s;
-o-transition : right 0.2s;
transition: right 0.2s;
}
.nav-trigger:checked + label {
right: 200px;
position:fixed;
}
.nav-trigger:checked ~ .site-wrap {
//right: 200px;
}
.nav-trigger:checked ~ .navigation{
right:0;
}
/****************/
.menubar {
background: none repeat scroll 0 0 #5a2a62;
color: #fff;
height: 42px;
line-height: 42px;
margin-top: 6px;
overflow: hidden;
text-align: center;
}
.menu {
display: inline-block;
list-style: outside none none;
margin-right: 10px;
}
.menu li {
display: block;
float: right;
padding: 0 10px;
border-width:0 1px;
border-style:solid;
border-color:transparent;
}
.menu li a, .menu li a:link, .menu li a:active, .menu li a:visited {
color: #fff;
display: block;
font-size: 15pt;
height: 42px;
position: relative;
white-space: nowrap;
}
.menu li:hover {
background: #223d99;
border-color:#7c8ecb;
}
/******************/
.main_news {
box-shadow: 0 4px 2px -2px #ccc;
display: inline-block;
font-size: 20px;
height: 355px;
line-height: 120%;
position: relative;
width: 100%;
overflow:hidden;
text-align: center;
}
.main_news .main_story img {
height: 255px;
width: 300px;
}
.main_news a {
display: block;
margin: 0 5%;
padding: 0 0 11px;
width: 90%;
}
.main_story {
display: none;
}
.selected_main_story img {
}
.main_title {
padding: 1px 5px;
position: absolute;
right: 0;
top: 270px;
}
.main_title a {
color: #18285f;
font-size: 20px;
text-align: right;
}
.story_bullets {
float: right;
height: 42px;
line-height: 42px;
position: absolute;
text-align: center;
top: 200px;
width: 100%;
}
.bullets {
display: inline-block;
height: 25px;
margin: 12px auto 0;
}
.normal_bullet {
background-image: url("images/bullet.png");
background-position: center -23px;
background-repeat: no-repeat;
cursor: pointer;
float: right;
height: 23px;
margin: 0 0 0 5px;
width: 24px;
}
.selected_bullet {
background-image: url("images/bullet.png");
background-position: center top;
background-repeat: no-repeat;
cursor: pointer;
float: right;
height: 23px;
margin: 0 0 0 5px;
width: 24px;
}
/******************/
.news_body {
padding: 15px 20px;
}
.news_body_img {
margin: 0 auto;
width: 100%;
}
.news_body .title ,.news_body .title2{
color: #18285f;
font-size: 14.5pt;
font-weight:bold;
line-height: 140%;
margin-bottom:10px;
}
.news_body .title{
}
.news_body .title2 {
}
.story_date, .story_source {
color: #727272;
float: right;
font-size: 16px;
margin: 0 0 5px;
width: 100%;
}
.story_text {
color: #000;
line-height: 30px;
margin: 0 0 20px;
}
.story_text img {
margin: 5px 5%;
width: 90%;
}
.cat_news_list .story_date{
color: #727272;
float: right;
font-family: tahoma;
font-size: 12px;
margin: 5px 0 0 5px;
width: 100%;
}
/**************/
.news_list, .arts_list, .cat_news_list {
margin: 15px 0;
}
.news_list p.title, .arts_list p.title, .cat_name {
background-color: #213064;
background-image: url("images/cat.png");
background-position: left center;
background-repeat: no-repeat;
color: #fff;
float: right;
font-size: 14pt;
height: 31px;
line-height: 31px;
margin: 0;
padding-left: 50px;
padding-right: 15px;
text-align: center;
}
.news_list p.title a{
color:#fff;
}
.news_list div, .arts_list div {
background: none repeat scroll 0 0 #f8f8f8;
box-shadow: 0 4px 2px -2px #ccc;
clear: both;
display: inline-block;
margin-bottom: 4px;
padding: 0;
width: 100%;
}
.news_list div:hover, .arts_list div:hover {
background-color:#f0f0f0;
border-color:#e1e1e1;
}
.news_list div a{
background:url("images/li.png") no-repeat scroll right 10px transparent;
}
.news_list div a, .arts_list div a {
color: #18285f;
display: block;
font-size: 14pt;
margin: 15px 10px 15px 10px;
padding-right:15px
}
.arts_list div a {
padding-bottom:0;
margin-bottom:0;
}
.writer_name {
color: #5368AD;
margin: 0 28px 15px 10px;
font-size:14pt;
}
.writer_name2{
color: #000;
margin: 0 0 0 10px;
font-size:14pt;
}
.cat_news_list{
}
.cat_news_list div{
border-bottom:1px #ccc solid;
clear: both;
display: inline-block;
padding: 15px 0;
width: 100%;
}
.cat_news_list div a{
color: #18285f;
display: block;
margin: 0 0 0 10px;
font-size:14pt;
}
.cat_news_list div a:hover{
color:#5368ad;
}
/***************/
.contact_form {
margin: -15px 0 0;
width: 100%;
}
.contact_form form{
display:inline-block;
width:100%;
}
.contact_form p {
//background-color: #fee9ef;
color: #00192f;
font-size: 15pt;
margin: 0 auto 20px;
padding: 50px 20px;
text-align: center;
width: 200px;
}
.contact_form .field_name {
font-family: tahoma;
font-size: 12px;
line-height: 32px;
margin-right: 3px;
}
.contact_form input[type="text"] {
border: 1px solid #e1e1e1;
float: right;
font-size: 14px;
height: 24px;
margin-bottom: 10px;
padding: 0 2%;
width: 95%;
}
.contact_form textarea {
border: 1px solid #e1e1e1;
float: right;
font-size: 14px;
height: 190px;
margin-bottom: 20px;
padding: 5px 2%;
resize: none;
width: 95%;
}
.contact_form .contact_submit {
background-color: #ed1c24;
border: 0 none;
color: #fff;
cursor: pointer;
font-family: tahoma;
font-size: 13pt;
height: 32px;
line-height: 100%;
text-align: center;
width: 80px;
}
.contact_form .contact_submit_btn{
display: inline-block;
position: relative;
}
.contact_form .contact_submit_btn:after{
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-right-color: #ed1c24;
border-width: 16px;
margin-top: -16px;
}
/***************************/
.footer{
background-color: #6d276a;
color: #fff;
font-family: tahoma;
font-size: 11px;
min-height: 75px;
padding: 20px;
text-align:center;
}
.footer a{
color:#fff;
}
.copy_right, .full_edition{
display: inline-block;
margin-bottom: 5px;
}
.takamul{
float: left;
//margin: 5px 5px 0 0;
}
.pages
{
margin: 25px 10px 0px;
text-align: center;
height:45px;
line-height:45px;
}
.page_number_body
{
color: #1e2842;
display: inline-block;
font-family: arial;
font-size: 22px;
font-weight: bold;
line-height: 35px;
margin: 0 2px;
text-align: center;
width: 45px;
}
.selected_page_number_body
{
color: #fff;
display: inline-block;
font-family: arial;
font-size: 22px;
font-weight: bold;
line-height: 35px;
margin: 0 2px;
text-align: center;
width: 45px;
background: #1e2842 none repeat scroll 0 0;
}
.pdf_items {
margin-top:30px;
}
.date_pdf {
color: #223d99;
font-size: 16px;
margin-bottom: 5px;
text-align: center;
}
.pdf_item {
background: #e6e6e6 none repeat scroll 0 0;
box-shadow: 0 0 2px 2px #eaeaea;
margin: 0 auto 30px;
width: 320px;
}
.pdf_items a {
display: block;
}
.pdf_item img {
margin-bottom: 5px;
width: 320px;
}
.issue_header {
color: #2d5ba7;
font-size: 26px;
margin-bottom: 20px;
text-align: center;
}
.issue_img {
box-shadow: 0 0 2px 2px #eaeaea;
display: block;
margin: 0 auto;
width: 320px;
}
.pages_header {
background-color: #73337d;
color: #fff;
font-size: 26px;
height: 50px;
line-height: 50px;
margin: 30px auto 15px;
text-align: center;
width: 320px;
}
.page_item {
background-color: #c6c6c6;
color: #000;
font-size: 26px;
height: 50px;
line-height: 50px;
margin: 0 auto 5px;
text-indent: 20px;
width: 320px;
}
.page_item a {
color: #000;
}
.page_item:hover {
background: #ff9c00 url("../images/page_item.jpg") repeat-x scroll center center;
}
.page_content .page_item:last-child {
margin-bottom: 70px;
}