body { background: white; margin: 0; padding: 0; text-align: center; height: 100%; width: 100%; font: 12px/17px Arial, Helvetica, sans-serif; }
 img { max-width: 100%; }

 #uberbase { max-width: 931px; margin: 85px auto 25px auto; text-align: left; }
 #logo { float: right; margin: 0 20px 0 0; max-width: 386px; }
 #timeline { float: left; margin: 0 auto; max-width: 917px; }
 #menu { height: 20px; margin: 25px 0 25px 5px; text-align: left; }
       #menu img {margin-right: 35px; }

      #fader { height: 343px; margin-bottom: 343px; }
             .faderitem { height: 343px; width: 100%; }
      .homemore { float: left; max-width: 237px; margin: 15px 16px 0 0; text-align: left; }
      .homemorelast { float: left; max-width: 220px; margin: 15px 0 0 0; text-align: left; }
      
 #footer { margin: 65px 0 0 5px; text-align: left; }
         .copyright { float: right; color: #999; }
         #footer img { margin: -5px 5px 0 0; }
         #footer a { color: #999; }
         #footer a:hover { color: #006990; }

 .breaker { clear: both; font: 1px/1px Arial; height: 1px; }


 .infoblock { width: 230px; float: left; margin: 50px 0 10px 5px;  }
 .infoblocklast { width: 220px; float: left; margin: 50px 0 10px 5px; }
 
 .extraprogrammeer { width: 340px; float: left; margin: 50px 0  10px 5px; }
 .extradesign { width: 310px; float: left; margin: 50px 0 10px 5px; }
 .extralast { width: 250px; float: left; margin: 50px 0 10px 5px; }
 
 .infoblockcontact { width: 400px; float: left; margin: 50px 0 50px 5px;  }
 .contactinfo { width: 300px; float: left; margin: 50px 0 50px 5px; }
 .contactinfolast { width: 200px; float: left; margin: 50px 0 50px 5px; }
                  .socialmedia { margin: 0 0 3px 0; width: 250px; }
                  .socialmedia img { margin: 5px 10px 0 5px; vertical-align: -5px; }
                  .socialmedia a { text-decoration: none; color: #000; }
                  .socialmedia a:hover { color: #00CFF0; }
                .infotext { width: 200px; margin-left: 0px; }
				.infotext ol { margin: 0; padding: 0; }
                .contactform { width: 335px; }

  .smallinput { margin: 0 0 10px 0; border: 1px solid #CCC; font: 12px/17px Arial, Helvetica, sans-serif; width: 315px; height: 20px; padding: 5px; }
  .largeinput { margin: 0 0 10px 0; border: 1px solid #CCC; font: 12px/17px Arial, Helvetica, sans-serif; width: 315px; height: 130px; padding: 5px; }

  .workbase { margin: 50px 0; }
  .work { float: left; width: 232px; margin: 25px 0 0 0; text-align: left; }

  .bloghdr { float: left; width: 255px; min-height: 350px; background: #BFF2FF; }
  .blogtext { float: left; width: 375px; margin: 20px 50px 20px 20px; }
            .blogtext a { text-decoration: none; color: #333; border-bottom: 1px dotted #00BFF0; }
            .blogtext a:hover { color: #00BFF0; border-bottom: 1px solid black; }
  .bloglinks { float: left; width: 220px; margin-top: 20px; }
             .bloglinks img { margin-bottom: 10px; }
             .bloglinks a, .bloglinks a:visited { text-decoration: none; color: #333; border: 0px; }
             .bloglinks a:hover { color: #00BFF0; border-bottom: 1px solid black; }


  .showcasehdr { min-width: 540px; min-height: 300px; float: left; background: #FFFFFF; }
  .showcasetext { float: left; margin: 20px 0px 20px 20px; width: 350px;  }
  #showcasegallerybutton { float: right; clear:both;  margin: 50px 0 0 0; }
  #gallery { position: absolute; display: none; top: 0; left: 0; width: 100%; height: 100%; background: url('/img/showcases/gallery_bg.png'); text-align: center; }
  #gallerycase { margin: 0 auto; width: 900px; color: white; text-align: left; }
  #gallerymain { width: 875px; height: 400px; border: 1px solid #00BFF0; margin: 00; }
  .gallerythumbs { width: 200px; height: 100px; float: left; border: 1px solid white; margin: 20px 23px 0 0; }
  #close { width: 855px; text-align: right; margin: 155px auto 10px auto;}

  ul { list-style: circle url("../img/bullet.gif"); margin: 0 0 25px 0; padding: 0;}
  li { margin: 5px 0 0 20px; padding: 0; }
              li a { text-decoration: none; color: #333; border: 0px; }
             li a:hover { color: #00BFF0; border-bottom: 1px solid black; }
  .sharethis { clear: both; margin: 50px 0 0 0; }












     /* Smartphones 480 x 800 */
     @media screen and (max-width: 800px) {
            body{  }
            * { max-width: 100%; }
            #uberbase { max-width: 931px; margin: 25px auto 25px auto; text-align: left; }
            #logo { float: right; margin: 0 20px 0 0; max-width: 245px; }
            #fader{ display: none; }

            #menu { height: 20px; margin: 25px 0 25px 10px; text-align: left; }
                   #menu img {margin-right: 5px; }
            .homemore { float: left; max-width: 220px; margin: 15px 0px 0 10px; text-align: left; }
            .homemorelast { display: block; float: left; max-width: 220px; margin: 15px 0 0 10px; text-align: left; }
             #footer { margin: 45px 10px 0 10px; text-align: left; }
             .copyright { display: none; }

             .infoblock { width: 95%; float: left; margin: 20px 0 10px 10px;  }
             .infoblocklast { width: 95%; float: left; margin: 20px 0 10px 10px; }
             .infotext { width: 90%; margin: 0; }

             .workbase { margin-top: 20px; }
             .work { float: left; max-width: 200px; margin: 25px 0 0 10px; text-align: left; }

             .bloghdr { display: none; }
             .blogtext { float: left; width: 90%; margin: 20px 50px 20px 10px; }
            .blogtext a { text-decoration: none; color: #333; border-bottom: 1px dotted #00BFF0; }
            .blogtext a:hover { color: #00BFF0; border-bottom: 1px solid black; }
            .bloglinks { float: left; width: 90%; margin: 20px 0 0 10px; }
             .bloglinks img { margin-bottom: 10px; }
             .bloglinks a { text-decoration: none; color: #333; border: 0px; }
             .bloglinks a:hover { color: #00BFF0; border-bottom: 1px solid black; }

             .infoblockcontact { width: 95%; float: left; margin: 50px 0 50px 10px;  }
             .contactinfo { width: 40%; float: left; margin: 10px 0 50px 10px; }
             .contactinfolast { display: block; float: left; margin: 10px 0 0 50px; }
                  .socialmedia { margin: 0 0 3px 0; }
                  .socialmedia img { margin: 5px 10px 0 5px; vertical-align: -5px; }
                  .socialmedia a { text-decoration: none; color: #000; }
                  .socialmedia a:hover { color: #00CFF0; }

                .contactform { width: 90%; }

                .smallinput { margin: 0 0 10px 0; border: 1px solid #CCC; font: 12px/17px Arial, Helvetica, sans-serif; width: 100%; height: 20px; padding: 5px; }
                .largeinput { margin: 0 0 10px 0; border: 1px solid #CCC; font: 12px/17px Arial, Helvetica, sans-serif; width: 100%; height: 90px; padding: 5px; }

                .showcasehdr { width: 100%; min-width: 200px; display: block;  float: left; background: #FFFFFF; }
                .showcasehdr img { width: 100%; min-width: 200px;  }
  .showcasetext { float: left; margin: 20px 0px 20px 20px; width: 85%;  }
  #showcasegallerybutton { float: right; display: none; clear:both;  margin: 50px 0 0 0; }
  #gallery { display: block; position: relative; background: none;  text-align: left; }
  #gallerycase { margin: 0 auto; display: block; width: 900px; color: white; text-align: left; }
  #gallerymain { width: 875px; display: none; height: 400px; border: 1px solid #00BFF0; margin: 00; }
  .gallerythumbs { width: 200px; height: 100px; float: left; border: 1px solid #ccc; margin: 20px 0px 0 20px; }
  #close { width: 855px; display: none; text-align: right; margin: 155px auto 10px auto;}

     }




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

           .showcasehdr { display: none; }
           .contactinfo { width: 200px; float: left; margin: 10px 0 50px 10px; }
           .contactinfolast { display: none; float: left; margin: 10px 0 0 50px; }


     }