/**
* CSS styles for forms generated by yiic.
*
* The styles can be applied to the following form structure:
*
*
*
* The above code will render the labels and input fields in separate lines.
* In order to render them in the same line, please use the "wide" form as follows,
*
*
* ......
*
*
* @author Qiang Xue
* @link http://www.yiiframework.com/
* @copyright 2008-2010 Yii Software LLC
* @license http://www.yiiframework.com/license/
*/
div.form
{
}
div.form input,
div.form textarea,
div.form select
{
margin: 0.2em 0 0.5em 0;
}
div.form fieldset
{
border: 1px solid #DDD;
padding: 10px;
margin: 0 0 10px 0;
-moz-border-radius:7px;
}
div.form label
{
font-weight: bold;
font-size: 0.9em;
display: block;
}
div.form .row
{
margin: 5px 0;
}
div.form .hint
{
margin: 0;
padding: 0;
color: #999;
}
div.form .note
{
font-style: italic;
}
div.form span.required
{
color: red;
}
div.form div.error label:first-child,
div.form label.error,
div.form span.error
{
color: #C00;
}
div.form div.error input,
div.form div.error textarea,
div.form div.error select,
div.form input.error,
div.form textarea.error,
div.form select.error
{
background: #FEE;
border-color: #C00;
}
div.form div.success input,
div.form div.success textarea,
div.form div.success select,
div.form input.success,
div.form textarea.success,
div.form select.success
{
background: #E6EFC2;
border-color: #C6D880;
}
div.form div.success label
{
color: inherit;
}
div.form .errorSummary
{
border: 2px solid #C00;
padding: 7px 7px 12px 7px;
margin: 0 0 20px 0;
background: #FEE;
font-size: 0.9em;
}
div.form .errorMessage
{
color: red;
font-size: 0.9em;
}
div.form .errorSummary p
{
margin: 0;
padding: 5px;
}
div.form .errorSummary ul
{
margin: 0;
padding: 0 0 0 20px;
}
div.wide.form label
{
float: left;
margin-right: 10px;
position: relative;
text-align: right;
width: 100px;
}
div.wide.form .row
{
clear: left;
}
div.wide.form .buttons, div.wide.form .hint, div.wide.form .errorMessage
{
clear: left;
padding-left: 110px;
}
.downloader form {
white-space: nowrap;
color: #000;
font-family: Roboto,Arial,Helvetica,sans-serif;
font-weight: 300;
font-size: 0;
position: relative;
margin: 26px auto;
width: 700px;
z-index: 4;
}
.downloader form .l-box {
box-sizing: border-box;
padding-right: 0;
margin-right: 0;
width: 100%;
padding-left: 80px;
margin-left: -80px;
}
.downloader .text-area-wrap {
background: #fff;
border: none;
border-radius: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
width: 100%;
position: relative;
}
.downloader .text-area-wrap input, .downloader .text-area-wrap textarea {
color: #242424;
background: #fff;
border-color: #1f8cff;
border-style: solid;
border-width: 2px;
border-radius: 0;
outline: 0;
font-size: 15px;
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 40px 0 16px;
width: 100%;
height: 38px;
resize: none;
box-shadow: 0 1px 0 0 #e9e9e9;
}
.downloader .text-area-wrap .clear-btn {
background: url('../images/front/close.png') 50% 50% no-repeat;
display: none;
position: absolute;
top: 50%;
right: 16px;
margin-top: -8px;
width: 16px;
height: 16px;
overflow: hidden;
opacity: .5;
-webkit-transition: all 20ms;
transition: all 20ms;
}
.downloader .text-area-wrap .clear-btn:hover{opacity:.8}
.downloader .r-box input[type='submit'] {
color: #c7c7c7;
background: url('../images/front/arrows.png') 50% 6px no-repeat #fff;
border: 1px solid #dadada;
outline: 0;
width: 80px;
height: 38px;
box-shadow: 0 1px 0 0 #e9e9e9;
text-indent: -9999px;
}
.downloader .l-box, .downloader .r-box {
display: inline-block;
vertical-align: top;
white-space: normal;
font-size: 15px;
}
.downloader form.ready input[type='submit'] {
color: #fff;
background-color: #1f8cff;
background-position: 50% -36px;
border-color: #1f8cff;
cursor: pointer;
}
.downloader form.invalid input {
color: #ff5253;
border-color: #ff5253;
}
.downloader, .downloader .file-result, .downloader .media-result { margin-bottom: 20px; }
.downloader .result-box {
border: 1px solid #dadada;
padding: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 28px;
width: 698px;
box-shadow: 0 1px 0 0 #e9e9e9;
}
.downloader .result-box .thumb-box {
border: none;
float: left;
position: relative;
margin-left: -1px;
margin-top: -1px;
margin-bottom: -1px;
width: 272px;
padding: 0;
}
.downloader .result-box .thumb-box .clip {
background-color: #f9f9f9;
display: block;
text-decoration: none;
cursor: pointer;
}
.thumb-box, .thumb-box .clip {
overflow: hidden;
position: relative;
}
.thumb-box .clip .thumb, .thumb-box .thumb {
display: block;
position: absolute;
height: auto;
z-index: 1;
}
.thumb-272, .thumb-272 .clip, .thumb-272 .clip .thumb {
width: 272px;
}
.thumb-272 .clip .thumb {
top: -25px;
}
.downloader .result-box .thumb-box .play-btn {
background: url('../images/front/media_btn.png') no-repeat;
display: block;
position: absolute;
left: 50%;
top: 50%;
z-index: 999;
width: 32px;
height: 32px;
margin-top: -16px;
margin-left: -16px;
opacity: .3;
cursor: pointer;
-webkit-transition: all 20ms;
transition: all 20ms;
}
.downloader .result-box .thumb-box {
border: none;
float: left;
position: relative;
margin-left: -1px;
margin-top: -1px;
margin-bottom: -1px;
width: 272px;
padding: 0;
}
.result-box.video .thumb-box .clip {
background-color: #222;
}
.thumb-272, .thumb-272 .clip {
height: 153px;
}
.downloader .result-box .info-box {
border: none;
float: left;
font-family: Roboto,Arial,Helvetica,sans-serif;
font-size: 17px;
font-weight: 300;
position: relative;
padding: 18px 26px;
width: 375px;
min-height: 115px;
}
.downloader .result-box .meta {
color: #3e3e3e;
min-height: 46px;
}
.downloader .result-box .meta .title {
color: #3e3e3e;
white-space: nowrap;
width: 375px;
overflow: hidden;
text-overflow: ellipsis;
}
.downloader .result-box .link-box {
font-size: 17px;
font-weight: 400;
margin-top: 32px;
}
.downloader .result-box .link-box .def-btn-box {
color: #fff;
background-color: #00a129;
border: 2px solid #00a129;
display: block;
float: left;
padding: 0 10px;
margin: 0;
}
.downloader .result-box .link-box .def-btn-box a {
color: #fff;
display: inline-block;
text-decoration: none;
}
.downloader .result-box .link-box .drop-down-box {
display: block;
float: left;
position: relative;
}
.downloader .result-box .link-box .drop-down-box .def-btn-name {
color: #00a129;
background-color: #fff;
border: 2px solid #00a129;
position: relative;
overflow: hidden;
padding: 0 33px 0 10px;
margin: 0;
cursor: pointer;
}
.downloader .result-box .link-box .drop-down-box .def-btn-name {
line-height: 34px;
height: 34px;
}
.downloader .result-box .link-box .drop-down-box .def-btn-name .subname {
margin-left: .3em;
}
.downloader .result-box .link-box .drop-down-box .def-btn-name:after {
display: block;
position: absolute;
top: 50%;
right: 5px;
margin-top: -11px;
}
.downloader .result-box .link-box .drop-down-box .def-btn-name:after,
.downloader .result-box .link-box .more-links a:after {
content: "";
background-image: url('../images/front/arrows.png');
background-position: 50% -126px;
width: 22px;
height: 22px;
background-repeat: no-repeat;
}
#sf_result { position: relative; }
.downloader .result-box .link-box .drop-down-box .list {
display: none;
position: absolute;
left: 0;
top: 36px;
margin-bottom: 0;
padding: 0;
z-index: 99;
min-width: 100%;
}
.downloader .result-box .link-box .drop-down-box .list .links {
color: #00a129;
background-color: #fff;
border: 2px solid #00a129;
box-shadow: 0 1px 3px 0 rgba(0,0,0,.42);
}
.downloader .result-box .link-box .list .link.subname {
min-width: 180px;
}
.downloader .result-box .link-box .list .link {
color: #00a129;
display: block;
position: relative;
line-height: 32px;
height: 32px;
padding: 0 12px;
margin: 0;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.downloader .result-box .link-box .list .link .subname {
color: #a4a4a4;
display: block;
position: absolute;
top: 0;
right: 12px;
}
.downloader .result-box .link-box .def-btn-box a {
line-height: 34px;
}