/*

csTransPie - Make elements as they should be in every browser

*Petar Koretić
* Started  30.01.2012*

 *every element is written with css(3) only, no images needed except for checkbox and radio buttons - I just like them more image-based*
 *Gradient code is provided for all browsers, even SVG version which is for IE 9 *
 *!! position:relative !! is used for IE8 cleartype-filter "bug" so have that in mind!*
 I don't use them, but you newer know - http://paulirish.com/2009/browser-specific-css-hacks/ http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/
 */
 
 /*==============================================================================================================================================
															SET DEFAULT STYLES FOR MANY ELEMENTS
================================================================================================================================================*/

  article, aside, details, figcaption, figure, footer,
  header, hgroup, menu, nav, section {
  display: block;
  }
  a {
  color: #15c;
  text-decoration: none;
  }
  a:active {
  color: #d14836;
  }
  a:hover {
  /* text-decoration: underline; */
  }
  h1, h2, h3, h4, h5, h6 {
  color: #222;
  font-size: 1.54em;
  font-weight: normal;
  line-height: 24px;
  margin: 0 0 .46em;
  }


  table {
  border-collapse: collapse;
  border-spacing: 0;
  }

 hr {border:none; border-bottom:1px solid #D2D2D2;clear:both;height:1px;}

 /*==============================================================================================================================================
														 HELPER CLASSES FOR JQUERY
================================================================================================================================================*/
.cTPHidden  {display:none;} /* Helper class for Hiding Original Elements */
.cTPHiddenFile {width:1px;height:0;visibility:hidden;} /* Chrome won't allow click when 'display:none' set for input type=file */
.cTPDisabled{background-color: #E6E6E6 !important;  cursor:default !important;color:gray !important;border-color:#D3D3D3 !important; } /* Disabled elemenets */
 /*==============================================================================================================================================
																ELEMENTS
================================================================================================================================================*/

 textarea
{ 
	background:#FBFBFF;
	resize:none; 
	overflow:hidden; 
	padding:8px;
	outline: none;  
	border:1px solid #FFF;
	 border-color:#D2D2DC #E6E6F0 #E6E6F0 #D2D2DC;
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

 button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  }
  
  button::-moz-focus-inner,
  input::-moz-focus-inner {
  border: 0;
  }
  
  input[type=email],
  input[type=number],
  input[type=password],
  input[type=search],
  input[type=text],
  input[type=url] {
  background:#FBFBFF;
  display: inline-block;
  height: 29px;
  line-height:29px;
  margin: 0;
  padding: 0 8px;
  vertical-align:middle;
  border:1px solid #FFF;
   border-color:#D2D2DC #E6E6F0 #E6E6F0 #D2D2DC;
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  }

  input[type=email]:hover,
  input[type=number]:hover,
  input[type=password]:hover,
  input[type=search]:hover,
  input[type=text]:hover,
  input[type=url]:hover , 
  textarea:hover{
    border-color:#AAAAAA #DCDCE6 #DCDCE6 #AAAAAA; 
  }
  input[type=email]:focus,
  input[type=number]:focus,
  input[type=password]:focus,
  input[type=search]:focus,
  input[type=text]:focus,
  input[type=url]:focus , 
  textarea:focus{
  outline: none;
  border: 1px solid #B4B4FA;
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  background:#FFF
  }
  input[type=email][disabled=disabled],
  input[type=number][disabled=disabled],
  input[type=password][disabled=disabled],
  input[type=search][disabled=disabled],
  input[type=text][disabled=disabled],
  input[type=url][disabled=disabled] {
  border: 1px solid #e5e5e5;
  background: #f5f5f5;
  }
  input[type=email][disabled=disabled]:hover,
  input[type=number][disabled=disabled]:hover,
  input[type=password][disabled=disabled]:hover,
  input[type=search][disabled=disabled]:hover,
  input[type=text][disabled=disabled]:hover,
  input[type=url][disabled=disabled]:hover {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  }
  input[type=email][readonly=readonly],
  input[type=number][readonly=readonly],
  input[type=password][readonly=readonly],
  input[type=text][readonly=readonly],
  input[type=url][readonly=readonly] {
  border: 1px solid #d9d9d9;
  }
  input[type=email][readonly=readonly]:hover,
  input[type=number][readonly=readonly]:hover,
  input[type=password][readonly=readonly]:hover,
  input[type=text][readonly=readonly]:hover,
  input[type=url][readonly=readonly]:hover,
  input[type=email][readonly=readonly]:focus,
  input[type=number][readonly=readonly]:focus,
  input[type=password][readonly=readonly]:focus,
  input[type=text][readonly=readonly]:focus,
  input[type=url][readonly=readonly]:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  }

/*============================================================= TEXTAREA =======================================================================*/


/*============================================================= (SUBMIT) BUTTON =================================================================*/
 input[type=button],input[type=submit],button
{
	vertical-align:middle;
	display:inline-block;
	margin: 1px;
	outline:none;
	cursor:pointer; 
	border:1px solid #C8C8C8;  
	border-bottom-color:#B4B4B4;
	border-right-color:#AAAAAA;
	height:31px; /*padding:7px 15px;*/
	padding:0 10px;
	background: #ffffff; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMGYwZjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #ffffff 0%, #f0f0f5 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f0f0f5)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#f0f0f5 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#f0f0f5 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#f0f0f5 100%); /* IE10+ */
	background: linear-gradient(top,  #ffffff 0%,#f0f0f5 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f5',GradientType=0 ); /* IE6-8 */
	zoom:1;

}
 input[type=submit].upload
{
     color: #FFFFFF;
     font-size:22px;
     font-weight:bold;
     text-transform:uppercase;
     vertical-align:middle;
     display:inline-block;
     margin: 1px;
     outline:none;
     cursor:pointer;
     border:1px solid #C8C8C8;
     border-bottom-color:#B4B4B4;
     border-right-color:#AAAAAA;
     height:31px; /*padding:7px 15px;*/
     padding:0 10px;
     background: #ffffff; /* Old browsers */
     /* IE9 SVG, needs conditional override of 'filter' to 'none' */
     background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPg0KICA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQtdWNnZy1nZW5lcmF0ZWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+DQogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjQjRCNEI0IiBzdG9wLW9wYWNpdHk9IjEiLz4NCiAgPC9saW5lYXJHcmFkaWVudD4NCiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4NCjwvc3ZnPg==);
     background: -moz-linear-gradient(top,  #ffffff 0%, #B4B4B4 100%); /* FF3.6+ */
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#B4B4B4)); /* Chrome,Safari4+ */
     background: -webkit-linear-gradient(top,  #ffffff 0%,#B4B4B4 100%); /* Chrome10+,Safari5.1+ */
     background: -o-linear-gradient(top,  #ffffff 0%,#B4B4B4 100%); /* Opera 11.10+ */
     background: -ms-linear-gradient(top,  #ffffff 0%,#B4B4B4 100%); /* IE10+ */
     background: linear-gradient(top,  #ffffff 0%,#B4B4B4 100%); /* W3C */
     -webkit-border-radius: 15px;
     -moz-border-radius: 15px;
     border-radius: 15px;
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#B4B4B4',GradientType=0 ); /* IE6-8 */
     zoom:1;
}
input[type=submit].upload:hover
{
    vertical-align:middle;
    display:inline-block;
    margin: 1px;
    outline:none;
    cursor:pointer;
    border:1px solid #C8C8C8;
    border-bottom-color:#B4B4B4;
    border-right-color:#AAAAAA;
    height:31px; /*padding:7px 15px;*/
    padding:0 10px;
    background: #ffffff; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPg0KICA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQtdWNnZy1nZW5lcmF0ZWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+DQogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDA5MGZmIiBzdG9wLW9wYWNpdHk9IjEiLz4NCiAgPC9saW5lYXJHcmFkaWVudD4NCiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4NCjwvc3ZnPg==);
    background: -moz-linear-gradient(top,  #ffffff 0%, #0090ff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#0090ff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#0090ff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#0090ff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#0090ff 100%); /* IE10+ */
    background: linear-gradient(top,  #ffffff 0%,#0090ff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#0090ff',GradientType=0 ); /* IE6-8 */
    zoom:1;
}
/*============================================================= INPUT TYPE=RESET =================================================================*/
 input[type=reset]
{
	font:12px arial;
	color:#FFF;
	border:1px solid #B4B4C8;  

	vertical-align:middle;
	display:inline-block;
	margin: 1px;
	outline:none;
	cursor:pointer; 
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

	height:31px; /*padding:7px 15px;*/
	padding:0 10px;
	
	background: #e0122d; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UwMTIyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1YzFlMmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #e0122d 0%, #5c1e2f 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0122d), color-stop(100%,#5c1e2f)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #e0122d 0%,#5c1e2f 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #e0122d 0%,#5c1e2f 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #e0122d 0%,#5c1e2f 100%); /* IE10+ */
	background: linear-gradient(top,  #e0122d 0%,#5c1e2f 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0122d', endColorstr='#5c1e2f',GradientType=0 ); /* IE6-8 */
	zoom:1;
	
}


/*============================================================= TITLE =======================================================================*/
.cTPTitle
{
	color:#000;
	font:12px arial;
	position:absolute; 
	background:#FFFF64; 
	padding:5px; 
	border:1px solid #D3D3D3;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	display:none; 
	z-index:2;
	
	/*no need for round borders in IE<9 - looks just great*/
}

/* //IE<=7 doesn't support :after pseudo selector, leave it, we may use it in a year or two
 [title]:hover {
  position: relative;
}
 //title is removed and added to data-title in .js
 [title]:hover:after {
  content: attr(data-title);
  padding:5px;
  position: absolute;
  left:50%;
  bottom: 100%;
  white-space: nowrap;
  z-index: 20px;
  border:1px solid #D3D3D3;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;

  background:#FFFF64; 

}
*/

/*============================================================= SELECT =======================================================================*/
select
{
	cursor: pointer;
	height:30px;
	z-index: 9999 !important; /* jquery dialog */
	position:relative;
	opacity: 0;
	filter: alpha(opacity=0);
	border:none;
	
}

.cTPSelect 
{
	font:12px arial;
	position:relative;
	vertical-align:middle;
	display:inline-block;
	margin: 1px;
	background: #F5F5F5;
	border:1px solid #CCC;
	border-bottom-color: #AAA;
	
	background: #E0E0E0;
	/*IE 9*/
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2UwZTBlMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background: -moz-linear-gradient(top,#fff 0,#e0e0e0 100%);
	background: -ms-linear-gradient(top,#fff 0,#e0e0e0 100%);
	background: -o-linear-gradient(top,#fff 0,#e0e0e0 100%);
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#e0e0e0));
	background: -webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);
	background: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffffff,EndColorStr=#ffe0e0e0);
	zoom:1;
}

.cTPSelectBar 
{
	cursor:pointer;
	padding-top:8px;
	display:inline-block;
	margin-left:10px;
	position:absolute;
	left:0;
	white-space:nowrap;
}

/*select arrow - arrow is added in javascript - &#9660;*/
.cTPSelectOpen {
	font:0.7em arial;
	position:absolute;
	right:0;
	top:0;
	text-align:center;
	padding-top:10px;
	padding-right:10px;
}

/*============================================================= INPUT TYPE=FILE =======================================================================*/

.cTPFile 
{
	display:inline-block;
	vertical-align:middle;
}
.cTPFileInput
{	
	display:inline-block;
	vertical-align:middle;
	border:1px solid #C8C8C8 !important;
    width:220px;
}

/*============================================================= RADIO =======================================================================*/
input[type=radio]
{
	opacity: 0;
	filter: alpha(opacity=0);
	outline:none;
	position:relative;
	color:white; /*opera mini*/
}
.cTPRadio
{
	display:inline-block;
	position:relative;
	vertical-align:-1px;
}

.cTPRadioElem {
	outline:none;
	display:inline-block;
	background:transparent url(img/img.png)  -8px -10px;
	height:19px; 
	width:18px;
	cursor:default;
	position:absolute;
}

/* radio checked */
.cTPCheckedR 
{
   background-position:-8px -29px; 
 } 
/*============================================================= CHECKBOX =======================================================================*/
input[type=checkbox]
{
	opacity: 0;
	filter: alpha(opacity=0);
	outline:none;
	position:relative;
	color:white; /*opera mini*/

}
.cTPCheckbox
{
	display:inline-block;
	position:relative;
	vertical-align:-1px;
	
}

.cTPCheckboxElem
{
	position:absolute;
	outline:none;
	display:inline-block;
	background:transparent url(img/img.png) -8px -68px;
	height:19px;
	width:18px;
	cursor:default
}

/*checkbox checked*/
.cTPChecked 
{ 
  background-position: -8px -87px;
 } 

/*==============================================================================================================================================
																EVENTS
================================================================================================================================================*/																		

.cTPSelect:hover
{
	border:1px solid #C8C8DC;
}

/*========================================================= RESET, (SUBMIT) BUTTON:HOVER ==============================================================*/
 input[type=button]:hover, input[type=reset]:hover,input[type=submit]:hover,button:hover
{
	border-color:#D2D2D2;
}
/*===================================================== RESET, (SUBMIT) BUTTON:ACTIVE (PRESSED) =======================================================*/
 input[type=button]:active, input[type=reset]:active,input[type=submit]:active,button:active
{
	border-color:#D3D3D3; border-bottom-width:2px;
}

:root *> * {filter:none !important;}