/* =============================================================================
   Base
   ========================================================================== */

html {font-size: 100%;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%
}
html, button, input, select, textarea {font-family: "Helvetica", sans-serif; color: #222}
body {margin: 0}

html,
body {height: 100%; width: 100%; margin: 0}

/* =============================================================================
   Links
   ========================================================================== */

a {color: #0090D9}
a:visited {color: #0090D9}
a:hover {color: #00a1f2 !important}
a:focus {outline: 0 none}

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover,
a:active {outline: 0}

/* =============================================================================
   Embedded content
   ========================================================================== */

img {border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle}
svg:not(:root) {overflow: hidden}

/* =============================================================================
   Forms
   ========================================================================== */

button, 
input, 
select, 
textarea {font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle}
button, 
input {line-height: normal}
button,
input[type="reset"],
input[type="button"],
input[type="submit"] {cursor: pointer; -webkit-appearance: button; *overflow: visible}
input[disabled],
button[disabled] {cursor: default}
button::-moz-focus-inner,
input::-moz-focus-inner {border: 0; padding: 0}
textarea {overflow: auto; vertical-align: top; resize: vertical}

/* =============================================================================
   Tables
   ========================================================================== */

table {border-collapse: collapse; border-spacing: 0}
td {vertical-align: top}

/* =============================================================================
   Chrome Frame Prompt 
   ========================================================================== */

.chromeframe {margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0}

/* ==|== primary styles =====================================================
   Author: Mohamed Alaa
   ========================================================================== */








































/* ==|== media queries ======================================================
   EXAMPLE Media Query for Responsive Design.
   This example overrides the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {

}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {

}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {

}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {

}

/* iPhone 4 and high pixel ratio devices ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {

}



/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }



/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

/* ==|== aural styles =======================================================
   aural styles.
   aural styles for accessibility: http://paste.nn-d.de/992
   ========================================================================== */
@media aural {
    html {
      a:active        {voice-family: betty, female; pitch-range: 80; pitch: x-high}
      a:link          {voice-family: harry, male}
      a:visited       {voice-family: betty, female}
      abbr,acronym    {content: attr(title);}
      b,strong        {pitch: medium; pitch-range: 60; stress: 90; richness: 90}
      dfn             {pitch: high; pitch-range: 60; stress: 60}
      dt              {stress: 80}
      em              {pitch: medium; pitch-range: 60; stress: 60; richness: 50}
      h1              {pitch: x-low; pitch-range: 90; pause: 20ms}
      h1              {voice-family: announcer, old male}
      h1, h2, h3,h2   {pitch: x-low; pitch-range: 80; pause: 30ms 40ms}
      h3              {pitch: low; pitch-range: 70; pause-after: 10ms}
      h4              {pitch: medium; pitch-range: 60}
      h4, h5, h6      {voice-family: paul, male; stress: 20; richness: 90}
      h5              {pitch: medium; pitch-range: 50}
      h6              {pitch: medium; pitch-range: 40}
      img:after       {content: attr(alt)}
      img:before      {content: attr(alt)}
      li, dt, dd      {pitch: medium; richness: 60}
      li::before      {content: "List item: "}
      p.part.juliet   {voice-family: juliet, female}
      p.part.mercutio {voice-family: male 2}
      p.part.nurse    {voice-family: child female}
      p.part.romeo    {voice-family: romeo, young male}
      p.part.tybalt   {voice-family: male 3}
      pre, code, tt   {pitch: medium; pitch-range: 0; stress: 0; richness: 80}
      strong          {pitch: medium; pitch-range: 60; stress: 90; richness: 90}
      strike,del,ins  {richness: 0}
      ul::after       {content: "List end. "}
      ul::before      {content: "Start list: "}
      /*[accesskey]:after { content: "[" attr(accesskey) "]" }*/
    }
}

/* ==|== print styles =======================================================
   Clear Styles
   ========================================================================== */
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
} 

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
 
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }