a.squarebutton {
background: transparent url('media/square-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: bold 12px Arial; /* Change 12px as desired */
line-height: 18px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 23px; /* Height of button background height */
padding-left: 9px; /* Width of left menu image */
text-decoration: none;
}

a:link.squarebutton, a:visited.squarebutton, a:active.squarebutton{
color: #494949; /*button text color*/
}

a.squarebutton span{
background: transparent url('media/square-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
}

a.squarebutton:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.squarebutton:focus{ /* Hover state CSS */
background-position: bottom left;
}

a.squarebutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
font-weight: bold;
}

a.squarebutton:focus span{ /* Hover state CSS */
background-position: bottom right;
color: red;
font-weight: bold;
}

.buttonwrapper{ //* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}

/* BUTTONY NA JMENA */

.squarebutton-name {
  display: inline-block;
  padding: 10px 16px;
  margin: 4px;
  font: bold 16px Arial, sans-serif;
  color: #333;
  background-color: #f0f0f0;
  border-radius: 8px;
  text-decoration: none;
  text-align: left;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: background-color 0.2s, transform 0.2s;
  min-width: 150px;
}

.squarebutton-name:hover {
  background-color: #e0e0e0;
  transform: translateY(-1px);
  color: #000;
}

.squarebutton-name:focus {
  outline: none;
  background-color: #cce5ff;
  box-shadow: 0 0 0 2px #66b0ff;
  color: #000;
}


/* BUTTONY S BOXEM */

.squarebutton-big2 {
  display: block;
  width: 100%;
  max-width: 220px;
  margin: 6px;
  padding: 12px 16px;
  font: bold 18px Arial, sans-serif;
  color: #333;
  background-color: #e0e0e0;
  border-radius: 10px;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.2s ease-in-out;
}

.squarebutton-big2:hover {
  background-color: #d0d0d0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  color: #000;
}

.squarebutton-big2:focus {
  outline: 2px solid #007BFF;
  background-color: #c8e6c9;
}



/* BUTTONY VELKE */

 a.squarebutton-big {
background: transparent url('media/square-big-green-left.gif') no-repeat top left;
display: block;
float: left;
font: bold 28px Arial; /* Change 12px as desired */
line-height: 18px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 46px; /* Height of button background height */
padding-left: 9px; /* Width of left menu image */
text-decoration: none;
}

a:link.squarebutton-big, a:visited.squarebutton-big, a:active.squarebutton-big{
color: #494949; /*button text color*/
}

a.squarebutton-big span{
background: transparent url('media/square-big-green-right.gif') no-repeat top right;
display: block;
padding: 15px 9px 15px 0px; /*Set 9px below to match value of 'padding-left' value above*/
width: 380px;
}

a.squarebutton-big:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.squarebutton-big:focus{ /* Hover state CSS */
background-position: bottom left;
}

a.squarebutton-big:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
font-weight: bold;
}

a.squarebutton-big:focus span{ /* Hover state CSS */
background-position: bottom right;
color: red;
font-weight: bold;
}

.buttonwrapper-big{ //* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
height: 100px;
}



/* BUTTONY VELKE RED */

 a.squarebutton-big-red {
background: transparent url('media/square-big-red-left.gif') no-repeat top left;
display: block;
float: left;
font: bold 24px Arial; /* Change 12px as desired */
line-height: 18px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 46px; /* Height of button background height */
padding-left: 9px; /* Width of left menu image */
text-decoration: none;
}

a:link.squarebutton-big-red, a:visited.squarebutton-big-red, a:active.squarebutton-big-red{
color: #494949; /*button text color*/
}

a.squarebutton-big-red span{
background: transparent url('media/square-big-red-right.gif') no-repeat top right;
display: block;
padding: 15px 9px 15px 0px; /*Set 9px below to match value of 'padding-left' value above*/
width: 380px;
}

a.squarebutton-big-red:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.squarebutton-big-red:focus{ /* Hover state CSS */
background-position: bottom left;
}

a.squarebutton-big-red:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
font-weight: bold;
}

a.squarebutton-big-red:focus span{ /* Hover state CSS */
background-position: bottom right;
color: red;
font-weight: bold;
}

.buttonwrapper-big-red{ //* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
height: 100px;
}



/* BUTTONY BEZ BOXU */

 a.squarebutton-bigb {
background: transparent url('media/square-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: bold 18px Arial; /* Change 12px as desired */
line-height: 18px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 23px; /* Height of button background height */
padding-left: 9px; /* Width of left menu image */
text-decoration: none;
}

a:link.squarebutton-bigb, a:visited.squarebutton-bigb, a:active.squarebutton-bigb{
color: #494949; /*button text color*/
}

a.squarebutton-bigb span{
background: transparent url('media/square-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 9px 4px 0px; /*Set 9px below to match value of 'padding-left' value above*/
width: 200px;
}

a.squarebutton-bigb:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.squarebutton-bigb:focus{ /* Hover state CSS */
background-position: bottom left;
}

a.squarebutton-bigb:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
font-weight: bold;
}

a.squarebutton-bigb:focus span{ /* Hover state CSS */
background-position: bottom right;
color: red;
font-weight: bold;
}

.buttonwrapper-bigb{ //* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
height: 100px;
}