nav {   
    /* height: 40px;   */
    width: 100%;   
    background: #FF7F5C; /* #FF6128; #455868; */
	color: #121212; /* for contrast */
    font-size: 11pt;   
    font-family: 'PT Sans', Arial, sans-serif;   
    font-weight: bold;   
    position: relative;   
    border-bottom: 2px solid #283744;   
} 

/*  אם סוג המדיה שאנחנו נמצאים בה היא מסוג Screen (ולא Print – מדיית הדפסה) וגם רוחב המסך בו אנחנו נמצאים מגיע למקסימום – 480 פיקסלים (שזה הרוחב של מסך המכשיר), תתייחס לכל הסטיילים שכתובים בתוך הסוגריים המסולסלות. מה יקרה למסכים שהרוחב שלהם הוא מעבר ל480 פיקסלים? הם יקבלו את העיצוב של הMedia Querie הבא בתור (במקרה שלנו – השורה השניה שמתייחסת ל758 פיקסלים). */
@media screen and (max-width: 960px){
    #wrapper {
        width: 758px;
        overflow: hidden;
    }
    section {
        width: 420px;
    }
    aside {
        width: 230px;
    }
} 
@media screen and (max-width: 600px) {
    #wrapper {
        width: 474px;
    }
  #header {  
	background: url('images/img02.png') no-repeat left -2em; 
	margin-right:2px;
    background-size: 75%;
   }
    section, aside {
        float: none;
        width: 434px;
    }
}
/* נקטין את הרוחב של הDIV העוטף ל480 פיקסלים ושימו לב שבמקרה כזה אני כבר מעביר את המיקום של איזור הווידג'טים אל מתחת לאיזור התוכן הראשי (הSection) – אני עושה את זה ע"י ביטול ההצפה (הFloat) של שני האלמנטים. חוץ מזה אני גם נותן להם רוחב קבוע של 440px. */


@media screen and (max-width: 758px){
    #wrapper {
        width: 480px;
    }
  #header {  
	background: url('images/img02.png') no-repeat left -2em; 
	margin-right:2px;
    background-size: 70%;
   }
    section, aside {
        float: none;
        width: 440px;
    }
} 

/* סמארטפונס  במקרה כזה צריך לנסות להיות כמה שיותר דינאמיים. לכן אגדיר בCSS שהWrapper יקבל רוחב מקסימלי של 480px כאשר הוא ידע להתאים את עצמו גם לפחות מזה. חוץ מזה, אני נותן לאיזורי התוכן Section וAside רוחב באחוזים כדי שידעו להתאים את עצמם בצורה אופטימלית למסך. */

@media screen and (max-width: 480px){
    #wrapper {
        max-width: 480px;
        width: auto;
        margin: 20px;
    }
  #header {  
	background: url('images/img02-phones2.png') no-repeat left -2em; 
	margin-right:2px;
    background-size: 80%;
   }


    section, aside {
        float: none;
        width: 92%;
        padding: 4%;
    }
    	nav {
		border-bottom: 0;
	}
	nav ul {
		display: none;
		height: auto;
	}
	nav a#pull {
		display: block;
		background-color: #FF6128; /* #283744; */
		width: 100%;
		position: relative;
	}
	nav a#pull:after {
		content:"";
		background: url('images/nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		left: 15px;
		top: 10px;
	}
} 

@media only screen and (max-width : 320px) {
  #header {  
	background: url('images/img02-phones2.png') no-repeat left -2em; 
	margin-right:2px;
    background-size: 70%;
   }

	nav li {
		display: block;
		float: none;
		width: 100%;
	}
	nav li a {
		border-bottom: 1px solid #576979;
	}
}
/* ניתן לעצב את האתר עבור אוריינטציה שונה עבור המשתמשים שמעדיפים לגלוש כאשר המכשיר שלהם נוטה בתשעים מעלות בצורה אופקית (הצורה האנכית הרגילה היא portrait */
@media only screen and (Orientation:landscape)

/* טכניקה פשוטה אחרת היא להפוך תמונות לגמישות, כך שלא משנה באיזה גודל תצוגה נהיה, התמונה לעולם לא תחרוג מגבולות המסך  */
@media screen and (orientation: portrait) {
  img { max-width: 90%;}
}

@media screen and (orientation: landscape) {
  img { max-height: 90%; }
}


/* אם האתר המקורי שלנו הוא ברוחב של 988 פיקסלים והכותרת H1 היא ברוחב של 700 פיקסלים, עלינו לחלק 700 ב - 988 על מנת למצוא את הרוחב היחסי של הכותרת באחוזים. השטח שנשאר הוא למעשה המרווח הימני או השמאלי מהשוליים */
h1 (width:70.85%; margin-right:14.575%;) {
				
}


/* for android */
.gotowaze
{
   String url = "waze://?zoom=&lat=32.06661&lon=34.79048";
    Intent intent = new Intent( Intent.ACTION_VIEW, Uri.parse( url ) );
   startActivity( intent );
}
catch ( ActivityNotFoundException ex  )
{
  Intent intent =
    new Intent( Intent.ACTION_VIEW, Uri.parse( "market://details?id=com.waze" ) );
  startActivity(intent);
}

/* for Iphone */
- (void) navigateToLatitude:(double)latitude
                  longitude:(double)longitude
{
  if ([[UIApplication sharedApplication]
    canOpenURL:[NSURL URLWithString:@"waze://"]]) {

      // Waze is installed. Launch Waze and start navigation
      NSString *urlStr =
        [NSString stringWithFormat:@"waze://?zoom=&lat=32.06661&lon=34.79048",
        latitude, longitude];

      [[UIApplication sharedApplication] openURL:[NSURL URLWithString:urlStr]];

   } else {

      // Waze is not installed. Launch AppStore to install Waze app
      [[UIApplication sharedApplication] openURL:[NSURL
        URLWithString:@"http://itunes.apple.com/us/app/id323229106"]];
   }
}