/* news > comment form */
.frame { padding: 5px; background: #fff; display: block; -webkit-box-shadow: #333 0 1px 2px; -moz-box-shadow: #333 0 1px 2px; box-shadow: #333 0 1px 2px; margin: 20px 0; text-decoration: none; position: relative;}
.frame:hover, .frame:focus { text-decoration: none; }
.frame[align="left"], .frame.alignleft { margin-left: 0; float: left; margin-right: 35px;}
.frame[align="right"], .frame.alignright { margin-right: 0; float: right; margin-left: 35px;}
.frame[align="center"], .frame.aligncenter { margin-right: 0; margin-left: 0;}
.frame[align="center"] img, .frame.aligncenter img { margin: 0 auto; }
.frame span.title-description { text-align: center; color: #737373; display: block; text-align: center; padding: 5px 0 1px; font-size: .9em; line-height: 1em; color: #000; }
.frame img { display: block; margin: 0 auto;}
.frame[class*="align"] img { margin: 0; /*IE7 needs this, otherwise img left/right margins expand the frame to 100% width of the container*/}
	/*image frame specific tooltip styles*/
	/*if the image has .frame class applied - it can be centered without messing with the width in any way, unlike when a is a .frame, for it as a block takes up 100% of the space by default and nothing can be done about it without specyfying width for the a element explicitly */
img.frame {  margin: 20px auto; }
.frame .tooltip span { background: #fff url(../images/zoom.png) 5px 50% no-repeat; padding-left: 30px !important;}


.comment { margin-top: 20px; }
.comment .facebook-connect { float: right; margin: -3.2em 0px 0em 0px;}
.comment .frame { margin-right: 20px; }

	/* comment specific - button style */
.comment .button { margin-top: -20px; }

	/* news > comments / discussion */
.comments { margin-top: 10px; list-style: none; padding: 0 0 0 80px;}
.comments:after { display: block; visibility: hidden; content: "."; height: 0; line-height: 0; font-size: 0; clear: both; }
.comments > li { padding-left:0px; width: 100%; clear: both; float: left; margin: 0 0 25px; clear: left;}
.comments ul li { width: 100%; margin: 0; padding: 0; list-style: none;  }
.comments ul { margin-top: -15px;  margin: 0; padding: 0; list-style: none; }

.comments li > div { margin: 0 0 0 30px; padding: 15px 15px 25px;background: #fff; box-shadow: rgba(29,15,7,.35) 0px 1px 3px; -webkit-box-shadow: rgba(29,15,7,.35) 0px 1px 3px; -moz-box-shadow: rgba(29,15,7,.35) 0px 1px 3px; position: relative; z-index: 10;}
.comments ul li > div { position: relative; padding-top: 25px; padding-bottom: 30px; background: #f7f4ef; border-bottom: 1px solid #fff; border-top: 1px solid #ddd; }

.comments dl { margin: 0; padding: 0 }
.comments dt { margin: 0 0 0 -135px; padding: 0 0 5px 135px; background:url(../images/comment-bg.png) 102px 0 no-repeat; color: #000; font-size: 1.1em; }
.comments dd { margin: 0; padding: 0;}
.comments dd:after { display: block; visibility: hidden; content: "."; height: 0; line-height: 0; font-size: 0; clear: both; }
.comments ul dl { float: none; display: block;}
.comments ul dt { margin: 0; padding: 0; background: none;}
.comments li dt a { color: #000; font-weight: bold;}
.comments li dt a:hover,
.comments li dt a:focus { text-decoration: none; }
.comments li dt a span { padding: 0px; width: 80px; float: left; margin: -15px 0 0 -125px; color: #000;}
.comments li dt span img { display: block;  border: none; width: 80px; height: 80px;}

.comments ul li dt a span { display: none;}

.comments .footer { font-size: 8pt; margin: 0;}
.comments .footer p,
.comments .footer a { color: #a6a6a6; margin: 0;}
.comments .date { float: left; }
.comments .reply { float: right; padding-right: 15px; background: url(../images/reply-ico.png) 100% 50% no-repeat;}

	/* comments sublevel indicator */
.indicator { position: absolute; top: 0px; left: 10px; height: 100%; background: #f5f2e7 url(../images/sub-comment-bg-2.gif) 0px 0 repeat-y; }
.indicator .top { background: #f5f2e7 url(../images/sub-comment-bg-1.gif) 0px 100% no-repeat;position: absolute; top: 0; left: 0; height: 20px;}
.indicator .bottom { position: absolute; bottom: 0; height: 24px;background: #f5f2e7 url(../images/sub-comment-bg-3.gif) 0px 0 no-repeat;}

.comments ul li + li {margin-top: -10px; margin-bottom: 20px;}
.comments ul li + li > div { padding-top: 10px; }

.comments li > div > .indicator .top { height: 32px;}
.comments li + li > div > .indicator .top { height: 15px; }

.comments > li > div { position: relative; z-index: 11;}
.sub-1 > li > div { z-index: 10; padding-left: 32px;}
.sub-2 > li > div { z-index: 9; padding-left: 48px;}
.sub-3 > li > div { z-index: 8; padding-left: 64px;}
.sub-4 > li > div { z-index: 7; padding-left: 80px;}
.sub-5 > li > div { z-index: 6; padding-left: 96px;}
.sub-6 > li > div { z-index: 5; padding-left: 112px;}
.sub-7 > li > div { z-index: 4; padding-left: 128px;}
.sub-8 > li > div { z-index: 3; padding-left: 144px;}
.sub-9 > li > div { z-index: 2; padding-left: 160px;}
.sub-10 > li > div { z-index: 1; padding-left: 176px;}

.sub-1 .indicator, .sub-1 .top, .sub-1 .bottom { width: 16px; }
.sub-2 .indicator, .sub-2 .top, .sub-2 .bottom { width: 32px; }
.sub-3 .indicator, .sub-3 .top, .sub-3 .bottom { width: 48px; }
.sub-4 .indicator, .sub-4 .top, .sub-4 .bottom { width: 64px; }
.sub-5 .indicator, .sub-5 .top, .sub-5 .bottom { width: 80px; }
.sub-6 .indicator, .sub-6 .top, .sub-6 .bottom { width: 96px; }
.sub-7 .indicator, .sub-7 .top, .sub-7 .bottom { width: 112px; }
.sub-8 .indicator, .sub-8 .top, .sub-8 .bottom { width: 128px; }
.sub-9 .indicator, .sub-9 .top, .sub-9 .bottom { width: 144px; }
.sub-10 .indicator, .sub-10 .top, .sub-10 .bottom { width: 160px; }


form { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border: none; }
fieldset {margin: 0; padding: 0;border: none; }
form ul, form li { list-style: none; margin: 0; padding: 0; float: left; width: 100%;}
form li { margin: 3px 0; display: block;}
form ul li.half {width: 45% !important;margin-right: 10%;}
form ul li.half + li.half {margin-right: 0;}
.input[type="text"],input[type="password"], textarea {-webkit-border-radius: 3px; -moz-border-radius: 3px; border: 1px solid #a1a1a1; border-left: 1px solid #c4c4c4; border-bottom: 1px solid #dedede; border-right: 1px solid #dedede; background: #fff;/* background: url(images/form-item-bg-1.gif) 0 0 repeat-x;*/ color: #868686; font: 10pt/150% Helvetica, Arial, sans-serif;/* width: 98%;*/display: block; /*padding: 5px 2% can't use this because of FIREFOX bug with handling percentage paddings for inputs. STACK OVERFLOW solution is used below instead to avoid any dodgy workarounds*/ ;font-size: .9em; padding-bottom: 5px; padding-top: 5px; padding-left: 10px; padding-right: 10px;}

/*STACK OVERFLOW solution for 100% px width fluid inputs*/
input[type="password"], input[type="text"], textarea { display:block; padding:5px 10px; box-sizing: border-box; /* css3 rec */-moz-box-sizing: border-box; /* ff2 */ -ms-box-sizing: border-box; /* ie8 */ -webkit-box-sizing: border-box; /* safari3 */ -khtml-box-sizing: border-box; /* konqueror */ }

input[type="text"]:hover,input[type="text"]:focus,input[type="password"]:hover,input[type="password"]:focus,textarea:hover,textarea:focus { color: #000; }
form a { color: #000; }
form .valid { background: url(images/valid.png) 100% 4px no-repeat; }
form .error { background: url(images/error.png) 100% 4px no-repeat; }