@font-face {
 	font-family: 'Dorian CLM';
 		src: url('fonts/DorianCLM-Book.woff') format('woff'),
 		url('fonts/DorianCLM-Book.eot'),
 		url('fonts/DorianCLM-Book.eot?#iefix') format('embedded-opentype');
 	font-weight: normal;
 	font-style: normal;
}

body, p { margin: 0 }

body {
 color:#000000 ;
 background: #a9c3c3 url(bg1.jpg) no-repeat ; background-position: center top ;
}

p, li, td, th { color: #000000; text-align: right ; direction: rtl ; font-family: Verdana, Arial, sans-serif }
.subt { font-family: "Dorian CLM", "Verdana", "Arial", "sans-serif" ; font-size: 150% }
#main { max-width: 960px ; margin: 0 auto }
#main .sec { margin: 0 auto }
/* #main nav * { margin: 0 } */

.mb { background:#546161; color:white; font-size: 24px ;width: 30px ;
 height: 30px ;
 text-align: center ;
}
nav .mb { display: none }

nav ul {
list-style: none ;
-webkit-padding-start: 0;
}

nav ul li {
padding: 0.4em;
margin: 0.2em;
background: url(75a.png);
}
nav ul li a, nav ul li a:hover, nav ul li a:active, nav ul li a:focus, nav ul li a:link, nav ul li a:focus {
	text-decoration:none ;
	color: inherit ;
}

/*todo: center #main in the body */

/* paragraph margins */
#tagl { margin: 10px }

.sec, .secr { width: 100% }
.simg { width: 52% ; overflow: visible}
.stxt { width: 47% ; overflow: visible}
.fl, .fl p { text-align: right }
.fr, .fr p { text-align: left }

.stxt, .simg { position: relative }

/*test backgrounds */
/*
.sec { background: #7f0000 }
.stxt { background: #ff8000 }
.simg { background: #0080ff ; min-height: 100px }
*/

.savedtmp {width:200px; position:absolute; left:0; border: solid 2px white; border-radius:2px; z-index:-1; }
.iimg {border: solid 2px white; border-radius:2px;}
.iimg2 { width:300px; float:left; }
.iimg { width:240px; margin: 0 auto; }

/* narrow - e.g., mobile in portrait orientation */
@media	only screen and (max-width:479px) {
.stxt, .simg { width: 100% }
.fl, .fr, .fr p, .fl p { text-align: center }
.simg img { width: 100% }
#tagl img { height: 62px }
#tagl { margin: 5px 38px 5px 5px }
.subt { font-size: 120% }
/*special nav menu styles in narrow view*/
nav .mb { display: block }
nav.navi {
 width: 30px ;
 height: 30px ;
 overflow: hidden ;
}
nav {position: absolute; top:0; right:0; width:50%;}
nav ul {  background: #a9c3c3 url(bg1.jpg) no-repeat ; background-position: center top ; }
}

/* stuff that applies to all but the narrow view */
@media	only screen and (min-width:480px) {
.stxt p { margin: auto 0px ; position: absolute ; top: 0 ; bottom: 0 ; height: 0; overflow: visible }
/*.fl { float: left }
.fr { float: right }*/
.fl, .fr { display: inline-block  }
.sec { direction: ltr }
.secr { direction: rtl }
nav ul li { display: inline-block ; }
}

/* med - tablet, mobile in landscape */
@media	only screen and (min-width:480px) and (max-width:639px) {
.stxt { width: 27% ; height: 414px }
.simg { width: 71% }
.simg img { width: 320px }
.sec { height: 370px ; overflow: visible }
.iimg { float: left; width:220px; }
}

/* normal */
@media	only screen and (min-width:640px) and (max-width:959px) {
.stxt { height: 414px }
.simg img { width: 320px }
.sec { height: 320px ; overflow: visible }
.iimg { float: left; width:240px; }
}

/* wide - desktop/large tablet */
@media	only screen and (min-width:960px) {
.stxt { height: 518px }
.simg img { width: 400px }
.sec { height: 340px ; overflow: visible }
.iimg { float: left; width:240px; }
}