/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Made by GREG.CH, developer Greg Lemmenmeier, May 2012.
PHP-generated CSS -3- file: auto-adapting, site-elements coloring, GZIP-compressed, UTF-8.
Incl. Media Queries for Responsive Design (auto-adapts to PC, iPad, phones, netbooks etc.)
Superb trick to make Internet Explorer 6,7,8 also display CSS3: behavior:url(ie-css3.htc);
*/


/* R E S E T __________________________________________________________________________ */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}


/* B A S I C S ________________________________________________________________________ */

html,
body {
font:15px/1.5 'Coda',Arial,sans-serif;
color:#000;
width:100%;
}

body {
background:#E5E5E5 0 0 repeat;
padding:0;
margin:0 auto;
margin-top:1.6em;
}
        @media screen and (max-width: 800px) {
        body {
        margin-top:0;
        }}

        @media screen and (min-width: 1024px) {
        body:before {
        content:"";
        position:fixed;
        top:-10px;
        left:0;
        width:100%;
        height:10px;
        z-index:100;
        -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,1);
        -moz-box-shadow: 0px 0px 10px rgba(0,0,0,1);
        box-shadow: 0px 0px 10px rgba(0,0,0,1);
        }}

#sitewrapper {
position:relative;
z-index:5;
background:#FFFFFF;
width:85%;
max-width:1010px;
margin-right:auto;
margin-left:auto;
padding-right:20px;
padding-left:20px;
border:6px double #EEDDCC;
box-shadow:2px 2px 4px #BBB;
-moz-border-radius:24px;
-webkit-border-radius:24px;
border-radius:30px;
behavior:url(ie-css3.htc); /* makes IE 6,7,8 display CSS3 styles */
margin-bottom:44px;
}
        @media screen and (max-width: 1024px) {
        #sitewrapper {
        width:93%;
        padding-right:0;
        padding-left:0;
        margin:auto;
        margin-top:27px;
        border:0;
        }}

        @media screen and (max-width: 600px) {
        #sitewrapper {
        width:100%;
        padding:0px;
        margin:0;
        margin-top:39px;
        border:0;
        border-radius:26px;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        behavior:url(ie-css3.htc); /* makes IE 6,7,8 display CSS3 styles */
        }}


#main
{
clear:both;
width:100%;
display:table;
table-layout:fixed;
}
        @media screen and (max-width: 480px) {
        #main {
        width:100%;
        padding:0;
        margin:0;
        background:none;
        }}

        /* bodytext gets side-margins on smartphones */
        @media only screen and (max-width: 600px) {
        p {
        margin:0;
        padding:0 20px 0 20px;
        }}

.contentblock {
clear:left;
min-height:148px;
border-top:2px solid #888;
margin-top:29px;
}
        @media only screen and (max-width: 768px) {
        .contentblock {
        float:left;
        width:100%;
        padding-left:0;
        }}


.contentblock .toplegend {
float:left;
color:#888;
font-size:0.8em;
letter-spacing:1px;
padding-left:10px;
padding-bottom:14px;
margin-top:-11px;
}
.contentblock .toplegend span {
padding:5px;
background-color:#FFFFFF;
}

.contentblock .references-picture-rwdbefore {
clear:left;
display:block;
float:left;
width:193px;
height:138px;
background:transparent url(bg_portfolio_screenshot.gif) no-repeat;
padding:11px 0 0 5px;
margin-top:1px;
margin-right:22px;
}
        @media only screen and (max-width: 768px) {
        .contentblock .references-picture-rwdbefore {
        display:none;
        }}

.contentblock .references-picture-rwdafter {
display:none;
}
        @media only screen and (max-width: 768px) {
        .contentblock .references-picture-rwdafter {
        display:block;
        clear:left;
        width:193px;
        height:138px;
        background:transparent url(bg_portfolio_screenshot.png) no-repeat;
        padding:11px 0 0 5px;
        margin-bottom:-5px;
        }}

.contentblock .skills-picture-rwdbefore {
display:block;
float:left;
width:193px;
height:148px;
margin-right:23px;
}
        @media only screen and (max-width: 768px) {
        .contentblock .skills-picture-rwdbefore {
        display:none;
        }}

.contentblock .skills-picture-rwdafter {
display:none;
}
        @media only screen and (max-width: 768px) {
        .contentblock .skills-picture-rwdafter {
        display:block;
        clear:left;
        width:193px;
        height:148px;
        margin-bottom:8px;
        }}


.contentblock .infosector {
display:block;
float:left;
width:32%;
background:#F2F2F2;
font-size:13px;
padding:2px;
border:1px solid #DDD;
border-bottom:0;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
box-shadow:2px 3px 3px #DDD;
behavior:url(ie-css3.htc); /* makes IE 6,7,8 display CSS3 styles */
}
        @media only screen and (max-width: 1200px) {
        .contentblock .infosector {
        width:99%;
        }}

        @media only screen and (max-width: 768px) {
        .contentblock .infosector {
        width:98%;
        margin-bottom:14px;
        }}

.contentblock .l1 {
        color:#FFF;
        background:#FF5A00;
        padding:0 5px 0 5px;
        margin-right:2px;
}

.contentblock .l2 {
color:#FFF;
background:#6B7678;
}

.contentblock .description {
display:block;
float:left;
width:38%;
min-height:98px;
font-size:13px;
color:#444444;
line-height:170%;
text-align:justify;
-moz-hyphens:auto;
hyphens:auto;
padding-left:20px;
margin-top:-4px;
margin-bottom:20px;
}

        @media only screen and (max-width: 1200px) {
        .contentblock .description {
        width:auto;
        padding-left:0;
        margin-top:10px;
        }}

        @media only screen and (max-width: 768px) {
        .contentblock .description {
        width:auto;
        font-size:14px;
        text-align:left;
        padding:0 25px 0 0;
        margin:-8px 0 0 0;
        }}

.contentblock:hover {
color:#000;
border-top:2px solid #000;
text-shadow:0 1px 1px #777777;
}

h1
{
font:1.7em 'Anton',sans-serif;
color:#6B7678;
letter-spacing:0px;
text-transform:uppercase;
margin-top:23px;
margin-bottom:15px;
animation:pulse1 3.7s;
}
@keyframes pulse1 {
0% { color: #DDDDDD; }
100% { color: #6B7678; }
}
        @media only screen and (max-width:768px) {
        h1 {
        font:1.5em/1.1 'Anton',sans-serif;
        animation:none;
        }
        }

        @media only screen and (max-width:497px) {
        h1 {
        font:1.6em/1.3 'Anton',sans-serif;
        color:#B6C2C0;
        padding-left:15px;
        margin-top:5px;
        margin-bottom:10px;
        }}

h2
{
font:17px/1 'Anton',sans-serif;
color:#666;
margin-bottom:0.5em;
}

.reactions_title {
font-size:11px;
font-weight:bold;
line-height:30px;
margin-top:5px;
}

h3
{
font:26px/1 'Anton',sans-serif;
color:#FFF;
letter-spacing:4px;
margin-bottom:0.8em;
text-shadow:0 2px 2px #000000;
}
        @media screen and (max-width: 497px) {
        h3 {
        margin-top:20px;
        }}

h4
{
margin-bottom:15px;
}

h4 a, h4 a:visited {
background:#222244;
}


p, ul {margin-bottom:0.8em}


hr {width:96%;margin-bottom:0.8em;border:none;border-top:1px solid #6B7678}


.clear
{
clear:both;
width:0;
height:0;
display:block;
overflow:hidden;
visibility:hidden;
}


.primarycolor {color:#FF5A00}
.secondarycolor {color:#6B7678}


#ticker {
width:260px;
height:222px;
background:#6B7678;
font-family:'Coda';
font-style:italic;
font-size:14px;
line-height:145%;
color:#FFF;
text-shadow:5px 1px 10px #333;
-moz-hyphens:auto;
hyphens:auto;
padding:15px 22px 20px 17px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border:2px dotted #FFF;
border-radius:8px;
cursor:pointer;
}
        @media screen and (max-width: 497px) {
        #ticker {
        width:86%;
        }}

#ticker:hover {
background:#FF6600;
color:#000;
}


#slideout {
}
        @media screen and (max-width: 480px) {
        #slideout {
        line-height:140%;
        margin-left:13px;
        margin-bottom:50px;
        }}

#slideout h2 a {
font-family: Anton;
font-size:16px;
color:#FF5A00;
line-height:220%;
border-bottom:1px solid #CCC;
}
        @media screen and (max-width: 800px) {
        #slideout h2 a {
        }}

#slideout h2,
#options h2 {
padding-left:18px;
background: url("arrows.png") no-repeat -4px -24px;
text-decoration:none;
}

#options h2 {
color:#FF0000;
border-bottom:1px solid #CCC;
padding-bottom:4px;
}

#options h2 a {
text-decoration:none;
}
        @media screen and (max-width: 600px) {
        h2 a {
        font-size:15px;
        }}

#slideout h2.active {
padding-left:19px;
background: url("arrows.png") no-repeat 0 16px;
text-decoration:none;
}

.slideout-img {
float:left;
width:120px;
padding-right:12px;
}

#slideout div p {
width:279px;
font-size:13px;
color:#6B7678;
text-align:justify;
-moz-hyphens:auto;
hyphens:auto;
margin-top:-5px;
margin-left:12px;
}
        @media only screen and (max-width:497px) {
        #slideout div p {
        width:auto;
        padding-right:7px;
        line-height:120%;
        text-shadow:none;
        }}


#fadehover {
position:relative;
padding-top:130px;
cursor:pointer;
}
img.a {
position:absolute;
left:0;
top:0;
z-index:10
}
img.b {
position:absolute;
left:0;
top:0;
}

        @media only screen and (max-width:497px) {
        #goodlinks {
        display:none;
        }}


.gregpics img {
background:#BBB;
display:block;
float:left;
margin-right:3%;
margin-bottom:20px;
border:4px double #EEDDCC;
box-shadow:10px 15px 12px #BBB;
-moz-border-radius:24px;
-webkit-border-radius:24px;
border-radius:24px;
}


@media screen {
.onlywhenprinting {
display:none;
}}


#gregmap { height: 100% }

#gregmap div span, #gregmap div a, a.gmnoprint {
visibility:hidden
}

.iwin {
width:320px;
font-family:'Coda',Arial,sans-serif;
font-size:11px !important;
color:#000;
text-align:left;
padding:5px;
overflow:hidden;
}

.iwintit {
width:320px;
font-size:14px !important;
color:#555;
text-align:center;
border-bottom:1px solid #FF5A00;
margin-bottom:-4px;
overflow:hidden;
}

.iwinimg {
float:left;
width:120px;
height:70px;
margin-right:7px;
border:3px double #777;
}


.decolink-eye a {
background-image: url("icon_eye.gif");
background-position:0 4px;
background-repeat:no-repeat;
padding-left:16px;
}


.decolink-eye a:hover {
background-image: url("icon_eye.gif");
background-position:0 -12px;
background-repeat:no-repeat;
padding-left:16px;
}


.decolink-screen a {
background-image: url("icon_screen.gif");
background-position:0 7px;
background-repeat:no-repeat;
padding-left:16px;
font-weight:bold;
}
.decolink-screen a:hover {
background-image: url("icon_screen.gif");
background-position:0 -12px;
background-repeat:no-repeat;
padding-left:16px;
}

.label1 {
background:#FF5A00;
color:#FFF;
padding:0 5px 0 5px;
}

.label2 {
background:#6B7678;
color:#FFF;
padding:0 5px 0 5px;
}

.justify {
text-align:justify;
}
        @media only screen and (max-width:497px) {
        .justify {
        padding:0 15px 0 15px;
        }}

.fontsize17 {
font-size:17px;
}


.u {
text-decoration:underline;
}


.nobreak {
white-space:pre;
}


::selection {
background:#FFF2A8;
}
::-moz-selection {
background:#FFF2A8;
}


a.tooltip {text-decoration:none}
a.tooltip span {display:none;text-decoration:none}
a.tooltip:hover span {display:block;position:absolute;bottom:20px;left:-20px;width:250px;z-index:20;font-size:12px;font-weight:normal;color:#000000;text-decoration:none;text-align:left;line-height:120%;background:#EEEEDD;padding:4px;border:8px solid #6B7678;border-bottom:0;border-radius:5px}


/* T O O L B A R ________________________________________________________________________ */

#toolbar {
z-index:2;
position:absolute;
top:-5px;
left:0;
right:0;
height:110px;
background-image:url(bg.jpg);
font:15px/1.5 'Coda',Arial,sans-serif;
font-size:0.8em;
color:#FFF;
padding:6px 10% 100px 3%;
text-align:right;
letter-spacing:1px;
}
        @media only screen and (min-width: 1300px) {
        #toolbar {
        padding-right:22%;
        }}

        @media only screen and (min-width: 1500px) {
        #toolbar {
        padding-right:32%;
        }}

        @media only screen and (max-width:800px) {
        #toolbar {
        height:81px;
        border-bottom:1px solid #6B7678;
        }}

        @media only screen and (max-width:497px) {
        #toolbar {
        padding:10px 13px 0 0;
        }}


#toolbar a {
display:inline-block;
color:#FFF;
text-decoration:none;
padding-top:3px;
padding-bottom:1px;
}

#toolbar .raised {
padding-top:3px;
display:inline-block;
color:#DDDDDD;
font-weight:bold;
text-decoration:none;
text-shadow:1px 1px 3px #000000;
}
        @media only screen and (min-width: 600px) {
        #toolbar-contentwide {
        display:block;
        }
        #toolbar-contentnarrow {
        display:none;
        }}

        @media only screen and (max-width: 600px) {
        #toolbar-contentwide {
        display:none;
        }
        #toolbar-contentnarrow {
        display:block;
        font-size:13px;
        text-align:center;
        padding-top:3px;
        }}

        @media only screen and (max-width: 600px) {
        .colorselector {
        visibility:hidden;
        }}



/* H E A D E R ______________________________________________________________________ */

#header
{
position:relative;
padding-top:30px;
margin-bottom:40px;
}


#greglogo
{
width:204px;
height:83px;
margin-top:13px;
margin-bottom:-2px;
}
        @media screen and (max-width: 1060px) {
        #greglogo {
        margin-left:10px;
        }}

        @media screen and (max-width: 800px) {
        #greglogo {
        margin:20px 0 15px 28px;
        }}

        @media screen and (max-width: 600px) {
        #greglogo {
        margin:-12px 0 0px 10px;
        }}

/* N A V I G A T I O N  (TOP)_________________________________________________________ */

#topnavigation {
position:absolute;
right:0;
bottom:0;
font:1.4em 'Anton',sans-serif;
}
        @media screen and (max-width: 768px) {
        #topnavigation {
        width:100%;
        margin:auto;
        font-size:1.1em;
        position:relative;
        background:#FAFAFA;
        margin-bottom:-12px;
        }}

        @media screen and (max-width: 480px) {
        #topnavigation {
        width:100%;
        padding:0;
        margin:0;
        }}


#topnavigation ul {
float:right;
}
        @media screen and (max-width: 1010px) {
        #topnavigation ul {
        padding-bottom:10px;
        }}

        @media screen and (max-width: 768px) {
        #topnavigation ul {
        float:none;
        width:96%;
        display:table;
        table-layout:fixed;
        font-size:14px;
        padding-bottom:0;
        margin-bottom:0px;
        }
        #topnavigation ul li.current {
        border:1px solid #6B7678        }}

        @media screen and (max-width: 480px) {
        #topnavigation ul {
        float:none;
        width:96%;
        display:table;
        table-layout:fixed;
        font-size:12px;
        }}

#topnavigation ul li {
float:left;
display:inline-block;
}


        @media screen and (max-width: 768px) {
        #topnavigation ul li {
        float:none;
        width:100%;
        overflow:hidden;
        display:table-cell;
        text-align:center;
        background:#F7F7F7;
        font-size:1.5em;
        letter-spacing:1px;
        border-right:1px solid #999;
        border-left:none;
        }}

        @media screen and (max-width: 768px) {
        #topnavigation ul.menu li.last {
        border-left:1px solid #ddd;
        }}

#topnavigation ul li a {
display:block;
padding:0.4em 0.9em;
text-decoration:none;
color:#FF5A00;
}
        @media screen and (max-width: 768px) {
        #topnavigation ul li a {
        font-size:0.9em;
        color:#FF6600;
        text-transform:uppercase;
        padding:1em 0 1em 0;
        }}

#topnavigation ul li a .sub {
display:block;
font-size:0.8em;
color:#6B7678;
}
        @media screen and (max-width: 1010px) {
        #topnavigation ul li a .sub {
        display:none;
        }}

#topnavigation ul li a:hover,
#topnavigation ul li.current a {
color:#fff;
background-color:#6B7678;
}

#topnavigation ul li.current a {
}
        @media screen and (max-width: 768px) {
        #topnavigation ul li.current a {
        border:0;
        }}

#topnavigation ul li a:hover .sub,
#topnavigation ul li.current .sub {
color:#CCC;
}


/* M A I N  +  IF A PAGE WITH SUBNAV ________________________________________________ */

#main.ifsubnavigation .subnav,
#main.ifsubnavigation .content {
        display:table-cell;
        vertical-align:top;
}
#main.ifsubnavigation .subnav {
        width:160px;
        font-size:14px;
        padding-right:22px;d
}
#main.ifsubnavigation .content {
        padding-top:6px;
        padding-left:20px;
}
#main.ifsubnavigation .subnav select.menu {
        display:none;
}
#main.ifsubnavigation .subnav ul.menu li {
        border-bottom:2px solid #6B7678;
        font-family:Anton;
        white-space:pre;
}
#main.ifsubnavigation .subnav ul.menu li a,
.subnav .back {
        text-decoration:none;
        display:block;
        padding:15px 0.3em 0.3em 0.5em;
        margin-top:13px;
}
#main.ifsubnavigation .subnav ul.menu li.current a,
#main.ifsubnavigation .subnav ul.menu li a:hover,
.subnav .back {
        color:#FFF;
        background-color:#6B7678;
}

        @media screen and (max-width: 768px) {
        #main.ifsubnavigation .subnav,
        #main.ifsubnavigation .content {
        display:block;
        }
        #main.ifsubnavigation .subnav {
                width:auto;
                background-color:#6B7678;
                padding:10px;
                margin-top:-40px;
        }
        #main.ifsubnavigation .subnav ul.menu {
                display:none;
        }
        #main.ifsubnavigation .subnav select.menu {
                width:95%;
                display:block;
                padding:0;
                color:#6B7678;
                font-size:1.1em;
                background:#EFEFEF;
                border-color:#FF5A00;
                margin-top:10px;
        }}



/* L I N K S __________________________________________________________________________ */

a:link, a:visited {
color:#555555;
text-decoration:none;
outline:none;
-moz-transition:border-color 910ms ease 0s;
-webkit-transition:border-color 910ms ease 0s;
border-bottom:1px solid transparent;
}
a:hover {
position:relative;
bottom:1px;
border-color:#000000;
-moz-transition:all 0.2s linear 0s;
-moz-transition:border-color 0ms ease 0s;
-webkit-transition:all 0.2s linear 0s;
-webkit-transition:border-color 0ms ease 0s;
}
a:active {
bottom:0;
position:relative;
outline:none;
}
a img {
border:none
}
        @media screen and (max-width: 800px) {
        a:active {
        color:#000000;
        background:#FFFF00;
        }}

.linknewtab {
background-image:url(icon_newtab.png);
padding: 0 0 0 26px;
margin-left:5px;
background-position: 0 0;
background-repeat: no-repeat;
}



/* F O R M S __________________________________________________________________________ */

input,
textarea,
select
{
font:100% 'Coda',Arial,sans-serif;
color:#FFFFFF;
}


input[type=text],
input[type=search],
input[type=email],
input[type=url],
textarea
{
background:#6B7678;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
padding:6px;
border:5px solid #999;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
margin:auto;
margin-bottom:8px;
}


input:focus,
textarea:focus
{
-webkit-box-shadow:0 0 5px #FFF;
-moz-box-shadow:0 0 5px #FFF;
box-shadow:0 0 5px #FFF;
-webkit-transform: scale(1.01);
-moz-transform: scale(1.01);
transform: scale(1.01);
letter-spacing:1px;
text-shadow: 0px 1px 1px #000000;
}


input[type=submit]
{
width:148px;
height:27px;
background:#FFDD66;
color:#000;
cursor:pointer;
}


input[disabled]
{
color:#999;
}

/* PAGE: HOME --------------------------------------------------------------------------------- */

.home-column-1 {
float:left;
width:320px;
margin-right:23px;
}
        @media screen and (max-width: 497px) {
        .home-column-1 {
        padding-bottom:30px;
        }}

        @media screen and (min-width: 400px) {
        .home-column-1 {
        float:none;
        margin:-9px 0 0 8%;
        }}

        @media screen and (min-width: 768px) and (max-width: 768px){
        .home-column-1 {
        float:left;
        margin:0 4% 0 4%; padding-left:5px;
        }}

        @media screen and (min-width: 1024px) {
        .home-column-1 {
        clear:both;
        float:left;
        margin:0 38px 0 0;
        }}



.home-column-2 {
float:left;
width:317px;
margin-right:23px;
}
        @media screen and (min-width: 400px) {
        .home-column-2 {
        float:none;
        margin:2px 0 0 8%;
        }}

        @media screen and (min-width: 768px) {
        .home-column-2 {
        float:left;
        margin:0;
        }}

        @media screen and (min-width: 1024px) {
        .home-column-2 {
        float:left;
        margin:0 13px 0 0;
        }}


.home-column-3 {
float:left;
width:320px;
margin-right:0;
}
        @media screen and (max-width: 1200px) {
        .home-column-3 {
        width:100%;
        }}

        @media screen and (max-width: 768px) {
        .home-column-3 {
        width:95%;
        margin:13px;
        padding-top:15px;
        }}

        @media screen and (max-width: 497px) {
        .home-column-3 {
        float:none;
        width:100%;
        margin:10px 0 0 0;
        }}



/* PAGE: ABOUT ---------------------------------------------------------------------------- */

#timeline {
width:861px;
height:158px;
margin:auto;
margin-top:8px;
margin-left:-13px;
}
        @media only screen and (max-width: 1209px) {
        #timeline {
        display:none;
        }}

#timeline-vertical {
width:320px;
height:861px;
margin:20px 0 40px 0;
}
        @media only screen and (min-width: 1210px) {
        #timeline-vertical {
        display:none;
        }}



/* PAGE: REACTIONS -------------------------------------------------------------------------- */

#tiles {
list-style-type:none;
position:relative;
margin-top:-2px;
}

#tiles li {
display:none;
}
        @media only screen and (max-width: 768px) {
        #tiles li {
        margin-top:20px;
        margin-bottom:0;
        }}

.reactions-gridbox {
float:left;
width:230px;
background:#E8EDF0;
font-size:13px;
text-align:justify;
-moz-hyphens:auto;
hyphens:auto;
padding:5px;
padding-bottom:3px;
border:1px solid #BBB;
border-bottom:8px solid #6B7678;
-webkit-border-radius:3px;
-moz-border-radius:4px;
border-radius:6px;
margin:4px;
margin-bottom:18px;
}
        @media only screen and (max-width: 768px) {
        .reactions-gridbox {
        width:300px;
        font-size:16px;
        text-align:left;
        }}

        @media only screen and (max-width: 500px) {
        .reactions-gridbox {
        width:340px;
        font-size:15px;
        text-align:left;
        margin:0 0 60px -2px;
        }}

.reactions-gridbox h2 {
font-family:Arial,sans-serif;
color:#FFF999 !important;
background:#000;
text-transform:uppercase;
}

.reactions-gridbox:hover {
color:#000;
background:#FFF3A9;
text-shadow:1px 2px 2px #BBB;
border:1px solid #000;
border-bottom:8px solid #FF5A00;
}

.reactions-icon {
width:16px;
height:21px;
padding-top:5px;
margin-right:2px;
margin-bottom:-1px;
cursor:help;
}


/* PAGE: WEBLOG ------------------------------------------------------------------------- */

.weblog-text {
line-height:150%;
}
        @media only screen and (max-width: 768px) {
        .weblog-text {
        margin:0;
        padding:0 10px 0 10px;
        }}

.img-weblog-thumbnail {
float:right;
width:103px;
width:103px;
margin-left:15px;
border:1px solid #000;
border-right:3px solid #000;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
        @media only screen and (max-width:768px) {
        .img-weblog-thumbnail {
        margin-right:5px;
        margin-left:5px;
        }}


.img-weblog {
float:right;
background:url(bg_img_weblog.png) bottom;
padding-bottom:20px;
margin-top:5px;
margin-left:22px;
border-top:1px solid #DDD;
}
        @media only screen and (max-width:768px) {
        .img-weblog {
        display:block;
        float:none;
        margin:auto;
        }}


.at {
max-width:100%;
margin-bottom:45px;
border:1px dashed #246;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-moz-box-shadow:3px 3px 5px 5px #89A;
-webkit-box-shadow:3px 3px 5px 5px #89A;
box-shadow:3px 3px 5px 5px #89A;
}


.blogpost-date {
background: url("weblog_datecircle.gif") repeat scroll 0 0 transparent;
float:left;
font-size:17px;
height:65px;
text-transform:uppercase;
width:65px;
margin-right:19px;
}
.blogpost-date > div {
float:left;
font-family:'Arial',sans-serif;
position:relative;
}
.blogpost-month {
color:#000000;
left:0;
text-align:right;
top:12px;
width:30px;
}
.blogpost-day {
color:#FFFFFF;
left:8px;
top:26px;
}


        @media only screen and (max-width:800px) {
        .weblog-text {
        font-family:'Coda',Arial;
        font-size:16px;
        color:#004;
        line-height:150%;
        }}


.video-container {
position:relative;
padding-bottom:56.25%;/*16/9ratio*/
height:0;
overflow:hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}


/* F O O T E R __________________________________________________________________________ */

#footer {
background-color:#334452;
font-size:13px;
color:#FFFFFF;
padding:20px;
-webkit-border-radius:12px;
-moz-border-radius:12px;
border-radius:8px;
border:4px dashed #FF5A00;
behavior:url(ie-css3.htc); /* makes IE 6,7,8 display CSS3 styles */
margin-top:30px;
margin-bottom:35px;
}
        @media screen and (max-width: 600px) {
        #footer {
        padding:0;
        margin:0;
        }}


#footer-column-1 {
font-family:Arial;
width:31%;
float:left;
margin-top:15px;
margin-right:20px;
font-size:12px;
font-weight:bold;
color:#CFCCBB;
line-height:180%;
-moz-hyphens:auto;
hyphens:auto;
}
        @media screen and (max-width: 1050px) {
        #footer-column-1 {
        width:50%;
        float:left;
        padding-top:10px;
        border-top:1px solid #CCC;
        border-left:0;
        margin-top:10px;
        }}

        @media screen and (max-width: 600px) {
        #footer-column-1 {
        width:100%;
        float:none;
        line-height:160%;
        margin-bottom:20px;
        margin:0;
        padding-bottom:20px;
        }}


#footer-column-2 {
width:33%;
float:left;
padding-left:35px;
margin-top:15px;
}
        @media screen and (max-width: 1050px) {
        #footer-column-2 {
        width:40%;
        float:left;
        padding-top:10px;
        border-left:0;
        margin-top:10px;
        }}

        @media screen and (max-width: 600px) {
        #footer-column-2 {
        width:100%;
        float:none;
        margin-bottom:20px;
        margin:0;
        padding:0;
        }}

.sitemaplink-active {
padding:1px 4px 1px 5px;
background:#6B7678;
border-left:1px solid #FF5A00;
margin-left:-5px;
}


#footer-column-3 {
width:28%;
float:left;
padding-left:3px;
margin-top:15px;
}
        @media screen and (max-width:1050px) {
        #footer-column-3 {
        clear:left;
        width:100%;
        padding-top:10px;
        border-top:1px solid #CCC;
        border-left:0;
        margin-top:10px;
        }}

        @media screen and (max-width:600px) {
        #footer-column-3 {
        width:95%;
        padding-left:15px;
        padding-left:15px;
        }}

#footer a {
color:#DDDDDD;
z-index:100;
}
        @media screen and (max-width:600px) {
        #footer a {
        font-size:15px;
        line-height:300%;
        border-bottom:1px solid #FFF;
        }}

#sitemap {
letter-spacing:3px;
line-height:170%;
}
        @media screen and (max-width:497px) {
        #sitemap {
        margin-left:15px;
        line-height:100%;
        margin-bottom:15px;
        }}

#sitemap a:hover {
letter-spacing:4px;
}



/* B O T T O M __________________________________________________________________________ */

#bottom {
font-size:13px;
color:#000;
text-align:center;
line-height:120%;
}
        @media screen and (max-width:800px) {
        #bottom {
        display:none;
        }}


#bottomlogo {
display:none;
width:258px;
height:72px;
margin:auto;
margin-bottom:5px;
}
        @media screen and (max-width:800px) {
        #bottomlogo {
        display:none;
        }}

#bottomlogo img {
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
-webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
}

#bottomlogo img:hover
{
-webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
-moz-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
-o-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
}


#bottom a, #bottom a:visited {
color:#FF5A00;
font-weight:bold;
text-decoration:underline;
z-index:50;
}

#bottom a:hover {
color:#000;
}

#backtotop {
position:fixed;
right:8px;
bottom:13px;
font-size:20px;
color:#000000;
}
        @media screen and (max-width:800px) {
        #backtotop {
        display:none !important;
        }}

.x {
display:none;
}


/* F X __________________________________________________________________________ */

.animated {
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1.4s;
-moz-animation-duration:1.4s;
-ms-animation-duration:1.4s;
-o-animation-duration:1.4s;
animation-duration:1.4s;
}

@-webkit-keyframes bounceIn {
0% {
        opacity: 0;
        -webkit-transform: scale(.3);
}

50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
}

70% {
        -webkit-transform: scale(.9);
}

100% {
        -webkit-transform: scale(1);
}
}

@-moz-keyframes bounceIn {
0% {
        opacity: 0;
        -moz-transform: scale(.3);
}

50% {
        opacity: 1;
        -moz-transform: scale(1.05);
}

70% {
        -moz-transform: scale(.9);
}

100% {
        -moz-transform: scale(1);
}
}

@-o-keyframes bounceIn {
0% {
        opacity: 0;
        -o-transform: scale(.3);
}

50% {
        opacity: 1;
        -o-transform: scale(1.05);
}

70% {
        -o-transform: scale(.9);
}

100% {
        -o-transform: scale(1);
}
}

@keyframes bounceIn {
0% {
        opacity: 0;
        transform: scale(.3);
}

50% {
        opacity: 1;
        transform: scale(1.05);
}

70% {
        transform: scale(.9);
}

100% {
        transform: scale(1);
}
}

.bounceIn {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-o-animation-name: bounceIn;
animation-name: bounceIn;
}



/* ________________________________________________________________________ */
/* That was easy. Let me know if I can do something for you. [info@greg.ch] */
/* ________________________________________________________________________ */