@import url(//fonts.googleapis.com/css?family=Open+Sans);

@media screen,projection,print{
  html,input,textarea{font-family:arial,sans-serif}
  html{line-height:1.5}
  h1,h2,h3,h4,h5,h6,label input,#nav li a{font-weight:normal}
  h4,h5,h6,pre,table,input,textarea,code{font-size:1em}
}

@media screen,projection{
  html{color:#333;font-size:13px;}
  body{padding:16px}
  h1,h2{font-size:20px}
  h2,h3,h4,h5,h6{color:#222}
  h2{line-height:1.2;margin:0 0 6px}
  h3{font-size:16px;line-height:1.54;margin:20px 0 13px}
  h4,h6{margin:13px 0 -13px}
  h4{font-size:14px}
  h5,p{margin:13px 0}
  ul,ol{margin-bottom:13px;margin-top:13px}
  a:link{color:#15c;text-decoration:none}
  a:visited{color:#61c}
  a:hover{text-decoration:underline}
  a:focus,a:active{color:#d14836}
  a code{color:inherit}
  #about{clear:both;color:#666;list-style:none;margin:26px 0 0;padding:0}
}






/* CORE STYLESHEET ***********************************************************/
/*****************************************************************************/

@media screen, projection {

/* GENERIC *******************************************************************/

 body {
  margin: auto;
  max-width: 906px;
  position: relative;
  padding-top: 26px;
 }

h2 + h3 {
  margin-top: .85em !important;
}

a img {
  border: 0;
}



/* SITE SPECIFIC *************************************************************/

#language {
  float: right;
}

body.mobile #language {
  float: none;
  margin-top: 1em;
}

#language label {
  float: left;
  margin: 4px 10px 0 0;
}

body.index {
  background: url(images/watermark.png) no-repeat center top;
}


h1 {
  line-height: 100%;
  margin-bottom: 27px;
}

h1 img {
  width: 147px;
}

.index h2 {
  color: #fff;
  font-size: 215%;
}

.index h2 span {
  font-size: 64%;
  display: block;
  padding-top: 9px;
}

.header {
  background: #000;
  background: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  padding: 2.65em 3.1em;
  margin-bottom: 37px;
}

.header p {
  color: #999;
  margin-bottom: 0;
}

.more {
  font-size: 120%;
  text-align: center;
  clear: both;
}

#about {
  margin-top: 60px;
  padding-bottom: 20px;
  padding-top: 5px;
  border-top: 1px solid #efefef;
  float: left;
  width: 100%;
}



/* MENU **********************************************************************/

ul.menu {
  float: left;
  font-weight: bold;
  list-style: none;
  margin-top: 0;
  padding: 0;
  width: 170px;
}

ul.menu a {
  font-weight: normal;
}

ul.menu h3 {
  margin-bottom: .76em;
  margin-top: .15em;
}

ul.menu li.offsite {
  border-top: 1px dashed #ccc;
  margin-top: .8em;
  padding-top: .8em;
}



/* SECTIONS ******************************************************************/

.section {
  margin-left: 200px;
}

.index .section h3 {
  margin-top: 1em;
}

.index .section {
  float: left;
  margin: 0 2.649006622516556% 2.65em 0;
  overflow: hidden;
  width: 31.567328918322296%;
}

.index .section span {
  border: 1px solid #ccc;
  padding: 5.594405594405594%;
  overflow: hidden;
  max-width: 100%;
  background: #fff;
  display: block;
/*  background: rgba(255, 255, 255, 0.9);*/
}

.index .section span span {
  display: block;
  width: 100%;
  height: 184px;
  border: 0;
  padding: 0;
  -webkit-box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, .1);
  -moz-box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, .1);
  box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, .1);
  background-color: #efefef;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.section.circles span span {
  background-image: url(images/thumb_circles.png);
}

.section.name span span {
  background-image: url(images/thumb_name.png);
}

.section.edit span span {
  background-image: url(images/thumb_edit.png);
}

.index .section.edit {
  margin-right: 0;
}



/* BUTTONS *******************************************************************/

.download {
  color: #999;
  float: right;
  line-height: 130%;
  margin: 0 0 0 25px;
  max-width: 240px;
  text-align:center;
}

.download a {
  min-width: 140px;
}

.download span {
  display: block;
}

.index .download span.unsupported,
.index .download span.downloading {
  color: #fff;
}

.download a {
  text-decoration: none;
  border-radius: 2px;
  display: inline-block;
  line-height: 20px;
  padding: 13px 18px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: .5em;

  -moz-text-shadow: 0px 1px 0 rgba(0,0,0,.1);
  -o-text-shadow: 0px 1px 0 rgba(0,0,0,.1);
  -webkit-text-shadow: 0px 1px 0 rgba(0,0,0,.1);
  text-shadow: 0px 1px 0 rgba(0,0,0,.1);

  border: 1px solid #3079ed;
  background: #4787ed;
  background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
  background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
  background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
  background-image: linear-gradient(top,#4d90fe,#4787ed);
}

.download a:hover {
  border-color: #2f5bb7;
  background: #4787ed;
  background: #4787ed -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#357ae8)) 0 0;
  background: #4787ed -moz-linear-gradient(top,#4d90fe,#357ae8) 0 0;
  background: #4787ed -o-linear-gradient(top,#4d90fe,#357ae8) 0 0;
  background: #4787ed -webkit-linear-gradient(top,#4d90fe,#357ae8) 0 0;
  background: #4787ed linear-gradient(top,#4d90fe,#357ae8) 0 0;

  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  -o-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  box-shadow: 0 1px 2px rgba(0,0,0,.2)
}

.download a:active {
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
  -o-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2)
}



/* red action button *********************************************************/

.download.action a {
  border-color: transparent;
  background-color: #d14836;
  background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39),to(#d14836));
  background-image: -webkit-linear-gradient(top,#dd4b39,#d14836);
  background-image: -moz-linear-gradient(top,#dd4b39,#d14836);
  background-image: -ms-linear-gradient(top,#dd4b39,#d14836);
  background-image: -o-linear-gradient(top,#dd4b39,#d14836);
  background-image: linear-gradient(top,#dd4b39,#d14836);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorStr='#dd4b39',EndColorStr='#d14836');
}

.download.action a:hover {
  border-color: #b0281a;
  border-bottom-color: #AF301F;
  background-color: #c53727;
  background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39),to(#c53727));
  background-image: -webkit-linear-gradient(top,#dd4b39,#c53727);
  background-image: -moz-linear-gradient(top,#dd4b39,#c53727);
  background-image: -ms-linear-gradient(top,#dd4b39,#c53727);
  background-image: -o-linear-gradient(top,#dd4b39,#c53727);
  background-image: linear-gradient(top,#dd4b39,#c53727);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorStr='#dd4b39',EndColorStr='#c53727');
}

.download.action a:active,
.download.action a:focus:active {
  border-color: #992A1B;
  background-color: #b0281a;
  background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39),to(#b0281a));
  background-image: -webkit-linear-gradient(top,#dd4b39,#b0281a);
  background-image: -moz-linear-gradient(top,#dd4b39,#b0281a);
  background-image: -ms-linear-gradient(top,#dd4b39,#b0281a);
  background-image: -o-linear-gradient(top,#dd4b39,#b0281a);
  background-image: linear-gradient(top,#dd4b39,#b0281a);
}

/* mac_tools ****************************************************************/

.mac_tools .download {
  float: left;
  margin: 1em 0;
  text-align: left;
}

.terms { /*terms and conditions*/
  font-size: 90%;
  height: 0px;
  overflow-y: hidden;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  border: 1px solid #fff;
  padding: 0 1em;
  clear: both;
}

.approve .terms { /*show terms*/
  height: 300px;
  overflow-y: scroll;
  border: 1px solid #ccc;
}

.approve .download,
.accept { /*accept button*/
  opacity: 0;
  -webkit-transition: all .6s ease-in-out;
  -moz-transition: all .6s ease-in-out;
  -o-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;
  visibility: hidden;
}

.approve .accept { /*fade in accept button*/
  opacity: 1;
  visibility: visible;
}

body.downloading p.download span { /*keep showing system requirements*/
  display: block !important;
}



/* VIDEO *********************************************************************/

iframe.video {
  background: #f5f5f5;
  border-radius: 4px;
  border: 1px solid #e5e5e5;
  display: block;
  float: right;
  height: 329px;
  margin: 0 0 10px 35px;
  max-width: 400px;
  padding: 9px;
  width: 100%;
}

/* IE6 hack ******************************************************************/
* html iframe.video {
  width: 400px;
}



/* FONTS *********************************************************************/

h1,
h2,
h3,
h4,
.more,
.download a {
  font-family: 'Open Sans',arial,sans-serif;
}

html[lang="cs"] .windows h1,
html[lang="cs"] .windows h2,
html[lang="cs"] .windows h3,
html[lang="cs"] .windows h4,
html[lang="cs"] .windows .more,
html[lang="cs"] .windows .download a,
html[lang="lt"] .windows h1,
html[lang="lt"] .windows h2,
html[lang="lt"] .windows h3,
html[lang="lt"] .windows h4,
html[lang="lt"] .windows .more,
html[lang="lt"] .windows .download a,
html[lang="sk"] .windows h1,
html[lang="sk"] .windows h2,
html[lang="sk"] .windows h3,
html[lang="sk"] .windows h4,
html[lang="sk"] .windows .more,
html[lang="sk"] .windows .download a {
  font-family: arial,sans-serif !important;
}



/* TOGGLING CONTENT **********************************************************/

body.mac .windows, /* hide windows download */
body.mobile .windows, /* hide windows download */
body.windows .mac, /* hide mac download */
body.mobile .mac, /* hide mac download */
body.unsupported .windows, /* hide windows download */
body.unsupported .mac, /* hide mac download */
body.unsupported .mobile, /* hide mac download */
body .unsupported, /* hide unsupported message */
body span.downloading, /* hide downloading button */
body.downloading p.download span, /* hide system requirements when downloading toggled */
p.download.mobile { /* hide mobile download */
  display: none;
}

body.mac .mac, /* show mac button */
body.windows .windows, /* show windows button */
body.mobile .mobile, /* show mobile button */
body.unsupported .unsupported, /* show unsupported message */
body.downloading p.download .downloading { /* show downloading button */
  display: block;
}



/* RTL TWEAKS ****************************************************************/

body.index.rtl {
  background-position: -200px top;
}

.rtl #language {
  float: left;
}

.rtl .section {
  margin-left: 0;
  margin-right: 200px;
}

.rtl #about {
  float: right;
}

.rtl ul.menu {
  float: right;
}

.rtl.index .section {
  float: right;
  margin: 0 0 2.65em 2.649006622516556%;
}

.rtl.index .section.edit {
  margin-left: 0;
}

.rtl .download {
  float: left;
  margin: 0 25px 0 0;
}

.rtl.uploader .download {
  float: right;
  text-align: right;
  margin: 1em 0;
}


.rtl iframe.video {
  float: left;
  margin: 0 35px 10px 0;
}

} /* rtl */






/* NARROW DISPLAYS ***********************************************************/
/*****************************************************************************/

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

body.index {
  background: none;
  padding-top: 20px;
  width: 286px;
}

h1 {
  margin-top: 0;
  margin-bottom: 17px;
}

ul.menu,
div.section,
.index div.section {
  clear: both;
  margin: 20px 0 0 0;
  width: 100%;
}

ul.menu {
  margin: 0 0 3em 0;
}

.download {
  float: none;
  margin: 0 auto;
  padding-bottom: 1.5em;
}

.index h2 {
  font-size: 180%;
}

.header {
  padding: 2em;
  margin-bottom: 1em;
}

.more {
  text-align: left;
  padding-top: 1em;
}

#about {
  margin-top: 30px;
}

#about a {
  display: inline-block;
  padding: 2px 6px 10px 0;
}

iframe.video {
  width: 92%;
  height: 240px;
  margin: 1em auto;
  float: none;
  padding: 2%;
}

} /* 480px */






/* IPAD **********************************************************************/
/*****************************************************************************/
@media only screen and (device-width: 768px) { /* ipad */

  body .unsupported { /* hide unsupported message */
    display: none !important;
  }

  body .mobile { /* show mobile button */
    display: block !important;
  }

} /* ipad */






/* PRINT *********************************************************************/
/*****************************************************************************/

@media print {

  body.index {
    background: none;
  }

  #about,
  ul.menu {
    display: none;
  }

  .section {
    margin-left: 0 !important;
  }

  html {
    font-size:9pt;
  }

  h1 img {
    width: 100pt;
  }


} /* print */