/*

	Create pretty forms
	-------------------

	@file 		forms.css
	@version 	1.0
	@author 	Paul Hachmang

	Copyright (c) 2009 Paul Hachmang

*/
/********************************************************************************************************/
/**********************************************[ Form ]**************************************************/
/********************************************************************************************************/
form{width: 477px; border:1px solid #CCC; padding: 10px;}
form .row{}
form .row label{font-weight:bold; font-size: 13px; line-height:27px; padding:0 10px 0 3px; display: block;}
form .row label span{font-size: 11px; font-weight: normal; color: #999;}
form .row label span.required{color:#C96F6A;}

form .input-text .container.focus{background-position: right center;}
form .input-text .container.focus input{background-position: left center;}

form .input-text .container.error{background-position: right bottom;}
form .input-text .container.error input{background-position: left bottom;}

form .input-radio .container{margin-bottom: 10px;}
form .input-radio .container label{font-weight: normal; display: block; line-height: 22px;}

form .row label.error{color:#C96F6A;display:block;font-size:11px;font-weight:normal;margin:-27px 0 0;padding:0;position:absolute;right:0;top:0;}

form .row .submit{text-align: right;}

/*remove outline*/
form .input-text .container input:focus{outline:0;}
form .textarea .container textarea:focus{outline:0;}


.textarea{padding: 0px 7px 17px 7px;}
.textarea .container {position: relative; background:#fafafa; width:463px;}
.textarea .container .bordertopleft {position: absolute; width: 100%;  height: 7px; padding:0 0 0 7px; left: -7px; top: -7px; background: url(../img/forms/textarea.png) top left no-repeat; line-height: 2px; font-size: 2px;}
.textarea .container .borderrighttop {position: absolute; width: 7px;  height: 100%; padding:7px 0 0 0; right: -7px; top: -7px; background: url(../img/forms/textarea.png) right top no-repeat;}
.textarea .container .borderbottomright {position: absolute; width: 100%;  height: 7px; padding:0 0 0 7px; right: -7px; bottom: -7px; background: url(../img/forms/textarea.png) right bottom no-repeat; line-height: 2px; font-size: 2px;}
.textarea .container .borderleftbottom {position: absolute; width: 7px; height: 100%; padding:0 0 7px 0; left: -7px; bottom: -7px; background: url(../img/forms/textarea.png) left bottom no-repeat;}
.textarea .container textarea{ color:#000;font-size:11px; border: 0; width: 100%; z-index: 1000; margin:0; background: #fafafa; outline: none;  display: block; overflow:hidden; line-height: 15px; font-family:Arial;}
form .textarea label{margin:0 0 7px -7px; }
form .textarea .container label.error{margin: -35px -7px 0 0;}

.textarea .container.focus .bordertopleft {background-position: left -7px;}
.textarea .container.focus .borderrighttop {background-position: -1186px top;}
.textarea .container.focus .borderbottomright {background-position: right -1186px;}
.textarea .container.focus .borderleftbottom {background-position: -7px bottom;}
.textarea .container.error .bordertopleft {background-position: left -14px;}
.textarea .container.error .borderrighttop {background-position: -1179px top;}
.textarea .container.error .borderbottomright {background-position: right -1179px;}
.textarea .container.error .borderleftbottom {background-position: -14px bottom;}
.textarea .container.error textarea {background-color: #faf3f3; }

/*cols*/
.twocols{overflow: hidden; width: 100%;}
.twocols .row.col1{float: left; width: 228.5px; }
.twocols .row.col2{float: right; width: 228.5px;}
.twocols .input-text .container input{width: 210.5px;}

.twocols .row.small, .row.small{width: 150px;}
.twocols .row.small .container input,
.row.small .container input{width: 133px;}

.twocols .row.wide, .row.wide{width: 307px;}
.twocols .row.wide .container input,
.row.wide .container input{width: 290px;}

.twocols .row.half, .row.half{width: 228.5px;}
.twocols .row.half .container input,
.row.half .container input{width: 210.5px;}

/*buttons*/
.button {background: transparent url(../img/forms/button_right.png) no-repeat scroll top right;color: #666;display: block;font: normal 12px arial, sans-serif;height: 30px;padding: 0 6px 0 0; text-decoration: none;}
.button span {background: transparent url(../img/forms/button_left.png) top left no-repeat;display: block;line-height: 15px;padding: 6px 14px 9px 20px; text-align:center;}

.button:hover {background-position: bottom right;color: #fff;}
.button:hover span {background-position: bottom left;}

.button:active {background-position: center right;color: #fff;}
.button:active span {background-position: center left;}

button.button{border:0;  width: auto;}

.button.right{margin:0 0 0 6px; float:right;}
.button.left{margin: 0 6px 0 0; float:left;}

.button.small{background-image: url(../img/forms/buttonss_right.png); height: 21px;}
.button.small span{background-image: url(../img/forms/buttonss_left.png); padding:3px 4px 3px 10px}

/*Firefox 3.0 hack, didn't expect that we needed it huh? Seems your precious firefox isn't as good as you thought.*/
BODY:nth-of-type(1) button.button, x:-moz-any-link, x:default {margin-left:-3px; padding-right: 3px;}
BODY:nth-of-type(1) button.button span, x:-moz-any-link, x:default {margin-top: -2px;}
BODY:nth-of-type(1) button.small span, x:-moz-any-link, x:default {margin-top: -2px;}



/*sexy combo*/
/*wrapper of all elements*/
div.combo { position:relative;left: 0px;top: 0px;}
.combo input {position: absolute;}
.combo div.icon {position:absolute;}
.combo div.list-wrapper {position: absolute;overflow: hidden;height: 200px; 
max-height: 200px;z-index: 99999;}
.combo div.list-wrapper-up {}
.combo ul {}
.combo  li {height: 20px;}
.combo li.active {}
.combo .visible {display: block;}
.combo .invisible {display: none;}
.combo input.empty {}

/*style*/
div.sexy {white-space: nowrap;height: 25px;border: 0;margin: 0;padding: 0;width: 97px;color: #000; float: left;}
div.sexy input {margin: 0 0 0 0;padding:1px 5px;background:#fff url(../img/forms/dropdown_dark_left.png)  left;border:0; height: 23px;line-height:15px;vertical-align:middle; left: 0px;top: 0px; width: 87px;  }

div.sexy div.icon {width:18px;height:25px;border: 0;background:transparent url(../img/forms/dropdown_dark_right.png) no-repeat 0 0;cursor:pointer;border:0;top:0px;right: 0; }

div.sexy div.list-wrapper {left: 0px;top: 25px;border: 1px solid #a1a0a0;background-color: #fff;padding: 0;margin: 0;width: 95px;bottom: auto;}
div.sexy div.list-wrapper-up {top: auto;bottom: 21px;}
div.sexy ul {list-style-type: none;padding: 0;margin: 0;height: 200px;}

div.sexy li {padding: 0;padding-left: 5px;background-color: #fff;cursor: pointer;margin: 0;}

div.sexy li.active {background-color: rgb(223, 232, 246);}

/*for IE*/
div.sexy a, div.sexy a:visited, div.sexy a:active {display: block;width: 100%;width: 95px;text-decoration: none;font:normal 14px  tahoma, arial, helvetica, sans-serif;color: #000;cursor: pointer;margin: 0;	height: 20px;}
div.sexy input.empty {color: gray;}

a.to-highlight:hover {background-color: rgb(223, 232, 246);}