* {
    padding: 0;
    margin: 0;
    border: 0;
}

html, body {
    color: #666;
    font-family: 'Raleway', sans-serif;
    /*font-size: 12px;*/
    background-color: #fff;
}

/*body, html {*/
/*height: 100%;*/
/*margin-bottom: 1px;*/
/*}*/

/*border-box*/
html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

#colorbox, #colorbox * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

img, div, span {
    margin: 0;
    padding: 0;
    border: 0 none;
}

img {
    vertical-align: bottom;
}

a, a:link, a:active, a:visited {
    color: #bbb;
    text-decoration: none;
}

a:hover {
    color: #666;
}

h1 {
    font-weight: 400;
    font-size: 24px;
    margin-bottom: 4px;
}

h2 {
    /*font-size: 14px;*/
    font-weight: 100;
    margin: 4px 0 20px 0;
}

p {
    padding-bottom: 2em;
    line-height: 1.4em;
}

/* --- grid-styles --- */
#container {
    max-width: 100%;
    /*width: calc(100% - 80px);*/
    /*max-height: auto;*/
    margin: 20px 10px;
    position: relative;
    overflow: visible;
}

header {
    /*height: 210px;*/
}

#header {
    display: none;
    /*width: 980px;*/
    /*max-width: 1140px;*/
    /*margin: 0 auto;*/
    /*min-width: 1600px;*/
}

#header #logo {
    position: relative;
    width: 100%;
    height: 134px;
}

#header #logo img {
    /*float: right;*/
    position: absolute;
    right: 0;
    max-width: 440px;
    width: 100%;
    height: auto;
}

/* --- layouts --- */
.left { float: left; }

.right { float: right; }

#header #navigation {
    width: 100%;
    font-family: 'Raleway', sans-serif;
    margin-left: 5px;
}

#header #navigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#header #navigation ul.right {
    padding-right: 0;
}

#header #navigation li {
    /*display: inline-block;*/
    list-style: none;
    float: left;
    padding: 0;
    margin: 0;
    border: 0;
    text-transform: uppercase;
}

#header #navigation ul.left li a {
    display: block;
    font-size: 14px;
    line-height: 16px;
    text-align: left;
    margin-right: 20px;
    font-weight: 400;
}

#header #navigation li.current a,
#header #navigation li a:hover {
    color: #333;
    /*font-weight: 400;*/
}

#header #navigation ul.right li {
    display: block;
    font-size: 14px;
    line-height: 16px;
    text-align: left;
    font-weight: 400;
    padding: 0;
}

#header #navigation ul.right li a {
    margin-left: 10px;
    margin-right: 10px;
}

#header #viewmode {
    height: 60px;
    padding: 20px 5px 0 0;
}

#header #viewmode a {
    display: block;
    float: right;
    height: 15px;
    margin-left: 10px;
}

#header #viewmode a.big {
    width: 21px;
    background: transparent url(../img/design/viewmode_big_0.png) no-repeat 0 0;
}

#header #viewmode a.big.current,
#header #viewmode a.big:hover { background-image: url(../img/design/viewmode_big_1.png); }

#header #viewmode a.small {
    width: 21px;
    background: transparent url(../img/design/viewmode_small_0.png) no-repeat 0 0;
}

#header #viewmode a.small.current,
#header #viewmode a.small:hover { background-image: url(../img/design/viewmode_small_1.png); }

#content {
    clear: both;
    overflow: visible;
}

/* --- grid-items --- */

#grid {
    float: left;
    width: 100%;
}

#grid.small {
    /*position: absolute;*/
    /*left: 0;*/
    /*overflow: visible;*/
    /*width: auto;*/
    /*min-width: 110%;*/
}

#grid div.item {
    float: left;
    /*background-color: #eee;*/
    /*display: table;*/
    /*position: relative;*/
}

#grid.big div.item {
    /*width: auto;*/
    /*height: auto;*/
    /*margin-bottom: 44px;*/
}


/*#grid.big div.item img {*/
    /*width: 100%;*/
    /*height: auto;*/
/*}*/

.homepage #grid.big div.item {
    /*margin-bottom: 0px;*/
    width: 320px;
    /*min-height: 204px;*/
    /*height: 204px;*/
}


#grid.small div.item {
    width: 260px;
    height: 166px;
}

#grid.small div.item.endOfDir {
    display: table;
    background-color: #eee;
    width: 260px;
    height: 166px;
    border: 5px solid #fff;
}

#grid.small div.item.endOfDir .center {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
    padding: 0 20px;
    font-family: 'Raleway', sans-serif;
    font-weight: 100;
    font-size: 20px;
    line-height: 26px;
    color: #888;
    letter-spacing: 0.02em;
}

#grid.small div.item div.column {
    display: block;
    position: relative;
    overflow: visible;
}

#grid div.item.hover {
    /*background-color:#eee;*/
    /*cursor: pointer;*/
}

#grid div.item div.itemNumber {
    z-index: 10;
    position: absolute;
    display: table;
    /* left: 2px;
      top: 0px; */
    font-size: 40px;
    font-weight: bold;
    color: #ddd;
    font-family: helvetica, arial, tahoma, verdana, sans-serif;
}

#grid div.item div.itemLink {
    z-index: 20;
    position: relative;
    padding: 0;
    width: 100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

#grid div.item div.itemLink img {
    border: 1px solid #666;
    box-shadow: 4px 4px 4px #aaa;
    -moz-box-shadow: 4px 4px 4px #aaa;
    -webkit-box-shadow: 4px 4px 4px #aaa;
    /*
    border-radius:4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    */
}

#grid div.item div.image a {
    outline: none;
}

#grid div.item div.image img {
    /* border: 2px solid #fff; */
    /*
    box-shadow: 4px 4px 4px #aaa;
    -moz-box-shadow: 4px 4px 4px #aaa;
    -webkit-box-shadow:4px 4px 4px #aaa;
    */
    /*
    border-radius:4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    */
}

#grid div.item div.itemLink a {
    display: block;
    padding: 10px;
    z-index: 30;
    position: relative;
}

#grid div.hiddenShadowbox {
    display: none;
    visibility: hidden;
}

/* --- login --- */

#container_login {
    margin: 40px auto 0;
}

div#login_logo {
    padding: 30px 0;
    margin: 0 0 0 -220px;
    text-align: center;
}

table.table_border_login {
    width: 360px;
    background: none repeat scroll 0 0 #fff;
    font-weight: normal;
    padding: 16px 16px 20px;
    margin: 10px auto;
    color: #999;
    border-radius: 11px;
    box-shadow: 10px 10px 10px #333;
    -moz-border-radius: 11px;
    -moz-box-shadow: 10px 10px 10px #333;
    -webkit-border-radius: 11px;
    -webkit-box-shadow: 10px 10px 10px #333;
    border: 1px solid #E5E5E5;
}

#message {
    padding: 20px;
    text-align: center;
    color: #999;
}

input.loginform {
    background: none repeat scroll 0 0 #FBFBFB;
    border: 1px solid #E5E5E5;
    font-size: 24px;
    margin-bottom: 16px;
    margin-right: 6px;
    margin-top: 2px;
    padding: 3px;
    width: 97%;
}

.button {
    border: 1px solid #aaa;
    padding: 5px 10px;
    background-color: #ccc;
    margin-right: 10px;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 0 4px 10px #C8C8C8;
    -moz-border-radius: 4px;
    -moz-box-shadow: 0 4px 10px #C8C8C8;
    -webkit-border-radius: 4px;
    -webkit-box-shadow: 0 4px 10px #C8C8C8;
}

.button:hover {
    border: 1px solid #000;
    background-color: #666;
    color: #FFFFFF;
}

#gallery .wrapper {
    max-width: 960px;
    margin: 0 auto;
}

#gallery .wrapper img {
    outline: none;
    width: 100%;
    height: auto;
}

/* --- floatclear --- */
.floatclear:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

/*--- old --- */

/*
body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  margin-left: 0px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  overflow:auto;
  background-color: #FFFFFF;
  color: #333333;
}
*/

div.monitor {
    /*max-width: 90px;*/
    /*margin: 0 auto;*/
    min-height: 475px;
    padding: 40px 24px 40px 0;
    border-top: 1px solid #eee;
    /*border-bottom: 1px solid #eee;*/
    margin-bottom: 40px;
}

div.monitor .wrapper {
    width: 100%;
    max-width: 960px;
    /*margin: 0 auto;*/
}

div.half {
    width: 45%;
    float: left;
}

div.copyright {
    color: #aaa;
}

/* download */
div.downloads {
    /*background-color: #f3f3f3; /!* if needed *!/*/
    /*border: 1px solid #ddd; /!* if needed *!/*/
    /*border-radius: 4px; /!* modern css *!/*/
    /*-webkit-border-radius: 10px; /!* for Safari *!/*/
    /*-moz-border-radius: 10px; /!* for Firefox *!/*/
    /*box-shadow: 0px 0px 6px rgba(0,0,0,0.5);*/
}

div.downloads ul {
    margin: 0;
    padding: 0 0 2em 0;
    list-style-type: none;
}

div.downloads ul li {
    margin: 0 0 0.5em 0;
    padding: 0 0 0 2em;
    background: transparent url(../img/acrobat.gif) no-repeat 0 0;
}

/* responsive navigation */
nav {
    width: 300px;
    position: absolute;
    font-size: 0.9em;
    z-index: 999;
    zoom: 1;

    /* performance issues */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    /* transition */
    -webkit-transform: translate3d(-330px, 0, 0);
    transform: translate3d(-330px, 0, 0);
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
}

nav.open {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

#toggleMenu {
    display: none;
    position: relative;
    z-index: 1000;
    margin-left: 25px;
    width: 30px;
    height: 20px;
    padding: 10px;
    /*width: 21px;*/
    /*height: 15px;*/
    background: transparent url("../img/design/responsive_menu_0.png") no-repeat 0 0;
    cursor: pointer;
}

#toggleMenu.open {
    background-image: url("../img/design/responsive_menu_1.png");
}

/*********************
LARGER MOBILE DEVICES
This is for devices like the Galaxy Note or something that's
larger than an iPhone but smaller than a tablet. Let's call them
tweeners.
*********************/

@media only screen and (max-width: 480px) {
    /*styles in 481up.scss*/
    #grid div.item div.image img {
        width: 100%;
        height: auto;
    }

    .homepage #grid.big div.item,
    .homepage #grid.small div.item,
    #grid.big div.item,
    #grid.small div.item {
        width: 100%;
        height: auto
    }

    #grid.small div.item.endOfDir {
        width: 100%;
        height: 166px;
    }

    #colorbox { font-size: 12px; }

    #colorbox #cboxClose,
    #colorbox #cboxTitle,
    #colorbox #cboxPrevious,
    #colorbox #cboxNext {
        display: none !important;
    }

    #colorbox #cboxTopCenter {
        height: 125px;
        background: #fff url("../img/design/tombeuers-logo-zoom.png") no-repeat calc(100% - 14px) top;
        background-size: contain;
        cursor: pointer;
         /*background:url(images/border1.png) repeat-x 0 -50px;*/
    }
}

@media only screen and (min-width: 481px) {
    #colorbox { font-size: 12px; }
}

/*********************
TABLET & SMALLER LAPTOPS
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*********************/
@media only screen and (min-width: 768px) {

    /* styles in 768up.scss*/
    #container { margin: 20px 30px; }

    #colorbox { font-size: 16px; }
}

/*********************
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*********************/
@media only screen and (min-width: 1030px) {

    /*styles in 1030up.scss*/
    nav {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        position: static;
        width: 100%;
    }

    header {
        height: 210px;
    }

}

@media only screen and (max-width: 1029px) {

    nav {
        background-color: #000;
        font-size: 16px;
    }

    #toggleMenu {
        display: block;
    }

    header {
        height: 194px;
    }

    #header #navigation ul.left,
    #header #navigation ul.right {
        display: block;
        float: none;
        margin: 20px 0 20px 19px;
    }

    #header #navigation ul.left {
        margin-top: 50px;
    }

    #header #navigation ul.left li,
    #header #navigation ul.right li {
        float: none;
        padding: 10px 10px 10px 0;
    }

    #header #navigation ul.right li a {
        margin: 0;
    }

    #header #navigation li.current a,
    #header #navigation li a:hover {
        color: #fff;
    }

    div.half {
        width: 100%;
        float: none;
    }

    div.monitor .wrapper {
        padding-left: 24px
    }
}

/*********************
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*********************/
@media only screen and (min-width: 1240px) {

    /*styles in 1240up.scss*/

}

/*********************
RETINA (2x RESOLUTION DEVICES)
This applies to the retina iPhone (4s) and iPad (2,3) along with
other displays with a 2x resolution. You can also create a media
query for retina AND a certain size if you want. Go Nuts.
*********************/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {

    /*styles in 2x.scss*/

}

/*********************
PRINT STYLESHEET
Feel free to customize this. Remember to add things that won't make
sense to print at the bottom. Things like nav, ads, and forms should
be set to display none.
*********************/
@media print {

    /*styles in print.scss*/

}