@font-face {
    font-family: 'arimo';
    src: url('font/arimo-regular-webfont.eot');
    src: url('font/arimo-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/arimo-regular-webfont.woff2') format('woff2'),
         url('font/arimo-regular-webfont.woff') format('woff'),
         url('font/arimo-regular-webfont.ttf') format('truetype'),
         url('font/arimo-regular-webfont.svg#arimoregular') format('svg');
}


@font-face {
    font-family: 'arimo';
    src: url('font/arimo-bold-webfont.eot');
    src: url('font/arimo-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/arimo-bold-webfont.woff2') format('woff2'),
         url('font/arimo-bold-webfont.woff') format('woff'),
         url('font/arimo-bold-webfont.ttf') format('truetype'),
         url('font/arimo-bold-webfont.svg#arimobold') format('svg');
    font-weight: 700;
    font-style: bold;
}


@font-face {
    font-family: 'arimo';
    src: url('font/arimo-italic-webfont.eot');
    src: url('font/arimo-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/arimo-italic-webfont.woff2') format('woff2'),
         url('font/arimo-italic-webfont.woff') format('woff'),
         url('font/arimo-italic-webfont.ttf') format('truetype'),
         url('font/arimo-italic-webfont.svg#arimoitalic') format('svg');
    font-style: italic;
}



/* Variables */
/* CSS reset + html5shiv.js + respond.js */

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, pre, code,
em, img, strong, dl, dt, dd, ol, ul, li,
article, figcaption, figure, 
footer, header, menu, nav, section,  {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
  margin: 0;
  line-height:1.3;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}


nav ul {
    list-style:none;
}

a {
  margin:0;
  padding:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
  text-decoration: none;
  outline: none;
  border: none;
  color: inherit;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  transition: .3s;
}
a:hover,
a:focus {
  color: #ccc;
  opacity: 0.8;
}
:focus {
  outline: none;
}
::-moz-focus-inner {
  border: 0;
}
img {
  height: auto;
  border: 0;
}

/* SVG scale - Images */

figure {
  width: 100%;
  margin: 0 auto;
  display: block;
  text-align: center;
  margin: 20px 0 20px 0;
}
figure > a, img, svg {
  width: inherit;
  height: auto;
  background: #f5f5f5;
  border:4px double #e8e8e8;
  padding: 30px;
  max-width: 500px;
  background-color: white;
  }

.map > img { padding:10px;}

.wwwwiew { max-width: 900px; }

.logo { padding: 0 40px 0 10px; }

figcaption {  font-weight: 400; font-weight: 700; letter-spacing: 1px; max-width: 500px; margin: 0 auto; }

/* Main styles */

body {
  font-family: 'arimo', sans-serif;
  line-height: 27px;
  font-size:19px;
  color: #444;
  font-style: normal;
  background: url(snow.png) repeat;
}

a { color: #666; font-weight: 400; text-decoration: underline; }
a:hover { text-decoration: none; color: #000; }

header {background-color: #efefef; padding: 60px 0 60px 0;}
footer { background-color: #efefef; padding: 15px 30px 15px 5px; text-align: right; }
footer h1 { font-size: 19px; margin: 0px; padding: 0px; border:none; font-weight: 400; font-style: italic; }

h1, h2, h3, h4 { font-weight: 700;  }

h1 {font-size: 31px; padding: 50px 0 3px 10px;  border-bottom: double 4px #ccc;}
h2 {font-size: 31px; padding: 40px 0 3px 20px;  border-bottom: double 3px #ccc;}
h3 {font-size: 26px; padding: 30px 0 3px 30px;  border-bottom: double 1px #ccc;}
h4 {font-size: 20px; padding: 30px 0 3px 30px;  border-bottom: double 1px #ccc;}

h3 a { text-decoration: none;}

p { margin-bottom: 10px; }


/* Author */

.author-cont { text-align: center; }
.author-cont h1 { font-weight: 700; letter-spacing: 5px; font-size: 12pt; margin-bottom: 5px; padding: 0px; border:0; }
.author-cont h2 { font-weight: 400; font-style: italic; letter-spacing: 5px; font-size: 10pt; padding: 0px; margin: 0px; border:0px; }
.author-cont p { text-align: left; padding: 40px 0 0 0; font-style: italic; }
.author {
      margin: 0 auto;
      border: 3px solid #FFF;
      border-radius: 130px;
      -moz-border-radius: 130px;
      -khtml-border-radius: 130px;
      -webkit-border-radius: 130px;
      width: 130px;
      height: 130px;
      background: url('../images/andrasjenei.png');
      -webkit-box-shadow: 0px 0px 0px 6px rgba(102, 102, 102, 1);
      -moz-box-shadow: 0px 0px 0px 6px rgba(102, 102, 102, 1);
      box-shadow: 0px 0px 0px 6px rgba(102, 102, 102, 1);
}


/* UI – UX styles List Styles */

.ux, .ui { margin: 20px 0 20px 20px; padding-left: 20px; }
.ux { border-left: 3px #d7df23 double; }
.ui { border-left: 3px #a7d2dd double; }

.ux a, .ui a { font-weight: 400; }

ul {  margin: 0 0 20px 10px;}
ul>li { padding: 5px 0 5px 0; list-style-type: none; }
ul>li:before {
    content: "■";
    padding-right:20px;
    color: #999;
}

.uxul li:before { color:#d7df23; }
.uxinformul li:before { color:#b9d97c; }
.uxvisualul li:before { color:#f49ac2; }
.uxinteractionul li:before { color:#d5ad97; }
.uiul li:before { color:#a7d2dd; };


/* Custom content styles */

pre { background: #f5f5f5; border-top:1px; border:none; border-radius: 0; }

.videoWrapper {
  margin: 10px 20px 10px 20px; 
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border:none;
}


/* MENU styles */

/* sidebar */
.bs-docs-sidebar {
    padding-left: 15px;
    margin-top: 30px;
 }

/* all links */
.bs-docs-sidebar .nav>li>a {
    color: #666;
    border-left: 2px solid transparent;
    padding: 0 20px;
    font-size: 20px;
    font-weight: 700;
    margin: 5px 0 5px 0;
}

/* nested links */
.bs-docs-sidebar .nav .nav>li>a {
    margin-left: 10px;
    font-size: 16px;
    display:inline;
    font-weight: 700;

}

/* nested third links */
.bs-docs-sidebar .nav .nav>li>ul>li>a {
    color: #666;
    margin-left: 40px;
    font-size: 14px;
    display:inline;
    font-weight: 400;
}


/* active & hover links */
.bs-docs-sidebar .nav>.active>a, 
.bs-docs-sidebar .nav>li>a:hover, 
.bs-docs-sidebar .nav>li>a:focus {                
    text-decoration: none;           
    border-left-color: #555;
    font-weight: 700;
}

.bs-docs-sidebar .nav>.active>a, 
.bs-docs-sidebar .nav>li>ul>li>a:hover, 
.bs-docs-sidebar .nav>li>ul>li>a:focus {                
    text-decoration: none;           
    border-left-color: #555;
    background-color: #ededed;
}


/* all active links */
.bs-docs-sidebar .nav>.active>a, 
.bs-docs-sidebar .nav>.active:hover>a,
.bs-docs-sidebar .nav>.active:focus>a {
    color: #222;
    font-weight: 700; 
}
/* nested active links */
.bs-docs-sidebar .nav .nav>.active>a, 
.bs-docs-sidebar .nav .nav>.active:hover>a,
.bs-docs-sidebar .nav .nav>.active:focus>a {
    font-weight: 700;
    color: #444;
}



/* hide inactive nested list */
.bs-docs-sidebar .nav ul.nav {
    display: none;        
}
/* show active nested list */
.bs-docs-sidebar .nav>.active>ul.nav {
    display: inline;         
}



#sidebar > li { display:block; }

.cloak li { display: block; }

.menu {   
  position:absolute;
  z-index:1;
  width: 100%;
  max-width: 160px;
}

.menu li:before {
    content: " ";
    color: transparent; 
    padding-right:0px;
}

.menu ul {   
padding: 0px;
margin: 0px;
}

.menu ul>li {   
padding: 0px 0 0px 0;
margin: 0px;
}

.menu a {border:none; text-decoration: none;}


.menu-padding {
    padding-top:40px;
}

.sticky {
    position:fixed;
    top:0;

}


/* Media Queries */

@media only screen and (min-width: 1200px) {  }

@media only screen and (min-width: 992px) and (max-width: 1199px) { }

@media only screen and (min-width: 768px) and (max-width: 991px) {  

body { font-size:18px; }

#sidebar > li { display:inline-block; } 

.cloak li { display:none; }

.menu { display: none; z-index:0; }

ul {  margin: 0 0 20px 5px;}

}

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

body { font-size:17px; }

ul {  margin: 0 0 20px 5px;}

.ux {  margin: 20px 0 20px 0px;  }

.ui {  margin: 20px 0 20px 0px;  }

#sidebar > li { display:inline-block; } 

.cloak li { display:none; } 

.menu {  display: none;  z-index:0;  }


}