/*
Theme Name: UICloud V2.0
Theme URI: http://ui-cloud.com/
Description: UICloud theme V2.0
Author: Double-J Design
Author URI: http://www.doublejdesign.co.uk
Version: 2.0
Tags: Special, UICloud, Gray, Blue, User interface

License:
License URI:

General comments (optional).
*/

/* font face */
@font-face { font-family: Cambria; src: url('fonts/CAMBRIA.ttc'); }
@font-face { font-family: Cambria; src: url('fonts/CAMBRIAI.ttf'); font-style: italic; }
@font-face { font-family: Cambria; src: url('fonts/CAMBRIAB.ttf'); font-weight: bold; }

@font-face { font-family: SegeoUI; src: url('fonts/segoeui.ttf'); }
@font-face { font-family: SegeoUI; src: url('fonts/segoeuii.ttf'); font-style: italic; }
@font-face { font-family: SegeoUI; src: url('fonts/segoeuib.ttf'); font-weight: bold; }

/* global styles */
* { margin: 0; padding: 0; }
a { color: #007CC2; text-decoration: none; }
a:hover { color: #3396CE; }
a { font-weight: bold; }
img { border: none; outline: none; }
body { background: #FFF; font: 14px Cambria, Georgia, serif; color: #4D4D4D; min-width: 960px; }
p { line-height: 150%; margin-bottom: 24px; }
h1 { margin: 0.5em 0; font-size: 26px; }
h2, h3, h4 { margin: 1.5em 0 0.5em; }
h1, h2, h3 { font-family: Cambria, Georgia, serif; }
.text-small { font-size: 12px; }
.text-center { text-align: center; }
ol,ul { margin-left: 2em; line-height: 150%; }
.hidden { display: none; }

/* layout */
.master-width { margin: 0 auto; }
.header-wrap { width: 100%; background: #4D4D4D; position: fixed; z-index: 999; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.header { margin: 0 auto; padding: 8px; }
.content-wrap { width: 100%; background: #F2F2F2 url(images/master-bg.jpg); padding: 32px 0 16px; box-shadow: 0 0 6px rgba(0, 0, 0, .3); }
.content { padding: 48px 0 16px; background: url('images/body-bg.jpg') no-repeat center; min-height: 600px; }
.content-main { width: 78%; float: left; padding-bottom: 16px; }
.sidebar { width: 20%; float: right; }
.footer-wrap { width: 100%; padding: 16px 0; }
.footer { text-align: center; font-size: 12px; color: #999; }
.footer p { margin-bottom: 16px; }
.footer-social { display: inline-block; text-align: center; }
.content p img { max-width: 100%; }
.split { clear: both; margin: 8px 0 24px; border-bottom: 1px dashed #CCC;}

.home .content-wrap { background: url(images/bg-07.png) center; }
.home .background-1 { background: url(images/bg-01.png) center; }
.home .background-2 { background: url(images/bg-02.png) center; }
.home .background-3 { background: url(images/bg-03.png) center; }
.home .background-4 { background: url(images/bg-04.png) center; }
.home .background-5 { background: url(images/bg-05.png) center; }
.home .background-6 { background: url(images/bg-06.png) center; }
.home .background-7 { background: url(images/bg-07.png) center; }
.home .background-xmas { background: url(images/bg-xmas-01.png) center; }
.home .content .logo { margin: 128px 0 16px; max-width: 95%; }
.home .content { max-width: 960px; text-align: center; background-image: none; }
.home .content h2 { margin: 8px 0; font-size: 18px; }
.home .search { position: relative; left: auto; top: auto; width: 100%; margin: 80px auto; text-align: center; line-height: 200%; }
.home .search-input { color: #999; margin-bottom: 8px; min-width: 70%; }
.home .search-input:focus { color: #333;}
.home .search p { font-size: 14px; margin: 16px 0; }

.title { border-bottom: 1px dotted #CCC; padding: 8px 0; margin-top: 0; }
.sub-title { margin: 8px 0 16px; }
.sub-items { display: inline-block; margin: 0 8px 16px 0; }
.post-social { float: right; }
.section { margin: 8px 0; padding: 8px 0; border-bottom: 1px dotted #CCC; }
.section h3 { margin-top: 0; }
.section-left { float: left; width: 48%; }
.section-right { float: right; width: 48%; }

/* clearfix */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .clearfix { height:1%; }
.clearfix { display:block; }

/* nav & menu */
.nav { margin: 0; }
.nav li.item { float: left; list-style: none;  margin-right: 4px; position: relative; }
.nav li.item a { color: #FFF; font-size: 14px; display: block; padding: 4px 8px; border-radius: 2px; }
.nav li.item a:hover, .nav li.item a.active { background-color: #3396CE; }
.nav li.item a img { vertical-align: bottom; }
.nav li.right { float: right; margin: 0 0 0 8px; }
.nav li.item .menu { display: none; position: absolute; width: 216px; top: 100%; padding-top: 24px; }
.nav li.item .menu-left { right: 0; background: url(images/arrow-up-blue.png) no-repeat 192px 16px;  }
.nav li.item .menu-right { left: 0; background: url(images/arrow-up-blue.png) no-repeat 8px 16px;  }
.nav li.item .menu .block { padding: 16px; border: none; border-top: 4px solid #66B0DA; box-shadow: 0 1px 5px rgba(0,0,0,0.25); }
.nav li.item .menu ul.sub-menu { margin: 0; }
.nav li.item .menu ul.sub-menu li { list-style: none; font-size: 14px; padding: 2px 0; border-bottom: 1px dotted #CCC; }
.nav li.item .menu ul.sub-menu li.icon { padding-left: 24px; }
.nav li.item .menu ul.sub-menu li a { color: #007CC2; }
.nav li.item .menu ul.sub-menu li a:hover { color: #3396CE; background: none; }
.nav li.compact { display: none; }
.nav li.toolbar-wrap { float: left; }

/* form elements */
input { font: 14px Cambria, Georgia, serif; }
textarea,
input[type="text"],
input[type="password"],
input[type="email"] { padding: 8px; border: 1px solid rgba(0,0,0,0.1); border-radius: 2px; }
input[type="submit"],
input[type="reset"] { padding: 8px 16px; border: none; outline: none; border-radius: 2px; background: #3396CE; color: #FFF; text-shadow: 0 -1px rgba(0,0,0,0.15); box-shadow: 0 1px 2px rgba(0,0,0,0.2); font-weight: bold; cursor: pointer; -webkit-appearance: none; }
input[type="submit"]:hover,
input[type="reset"]:hover { background: #007CC2; box-shadow: 0 1px 2px rgba(0,0,0,0.3); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
input[type="submit"]:disabled { background: #99CBE7; color: #E5E5E5; }
input[type="submit"].btn-small, 
input[type="reset"].btn-small { padding: 4px 8px; font-size: 12px; margin: 0 4px 4px 0; }
input[type="submit"].btn-white,
input[type="reset"].btn-white { background: #999; color: #FFF; text-shadow: 0 -1px rgba(0,0,0,0.15); box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
input[type="submit"].btn-white:hover,
input[type="reset"].btn-white:hover { background: #808080; box-shadow: 0 1px 2px rgba(0,0,0,0.3); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.3);}
input[type="submit"]:active, 
input[type="reset"]:active,
input[type="submit"].btn-white:active,
input[type="reset"].btn-white:active {
    -moz-box-shadow: inset 0px 2px 3px rgba(0,0,0,0.3),  0px 1px 0 #fff;
	-webkit-box-shadow: inset 0px 2px 3px rgba(0,0,0,0.3), 0px 1px 0 #fff;
	box-shadow: inset 0px 2px 3px rgba(0,0,0,0.3), 0px 1px 0 #fff;
}
a.btn { padding: 8px 16px; border: none; outline: none; border-radius: 2px; background: #3396CE; color: #FFF; text-shadow: 0 -1px rgba(0,0,0,0.15); box-shadow: 0 1px 2px rgba(0,0,0,0.2); font-weight: bold; display: inline-block; font-size: 14px; margin: 0 8px 8px 0; }
a.btn:hover { background: #007CC2; box-shadow: 0 1px 2px rgba(0,0,0,0.3); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
a.btn:active { 
    -moz-box-shadow: inset 0px 2px 3px rgba(0,0,0,0.3),  0px 1px 0 #fff;
	-webkit-box-shadow: inset 0px 2px 3px rgba(0,0,0,0.3), 0px 1px 0 #fff;
	box-shadow: inset 0px 2px 3px rgba(0,0,0,0.3), 0px 1px 0 #fff;
}
a.btn-white { padding: 8px 16px; border: none; outline: none; border-radius: 2px; background: #999; color: #FFF; text-shadow: 0 -1px rgba(0,0,0,0.15); box-shadow: 0 1px 2px rgba(0,0,0,0.2); font-weight: bold; display: inline-block; font-size: 14px; margin: 0 8px 8px 0; }
a.btn-white:hover { background: #808080; box-shadow: 0 1px 2px rgba(0,0,0,0.3); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.3);}
a.btn-small { padding: 4px 8px; font-size: 12px; margin: 0 4px 4px 0; }
a.btn-large { padding: 8px 24px; font-size: 18px; }
a.btn-full { display: block; padding: 12px; text-align: center; margin: 0 0 16px 0; font-size: 16px; }
a.btn-dash { background: #FFF; border: 1px dashed #CCC; box-shadow: none; -moz-box-shadow: none; color: #999; text-shadow: none; }
a.btn-dash:hover { border: 1px dashed #999; background: #F8F8F8; box-shadow: none; -moz-box-shadow: none; } 
.form-search { position: relative; }
.form-search input[type="text"] { height: 18px; padding: 4px 24px 4px 4px; font-size: 12px; vertical-align: bottom; width: 128px; color: #999; font-style: italic; }
.form-search input[type="text"]:focus { color: #333; }
.form-search input[type="submit"] { position:absolute; right: 5px; top: 5px; padding: 8px; width: 18px; height: 18px; text-indent:-999px; overflow: hidden; background: #3396CE url(images/icons/12px/search-white.png) no-repeat center; }
.form-search input[type="submit"]:hover { background-color: #007CC2; }
.right .btn { margin: 0 0 8px 8px; }
.right .btn-small { margin: 0 0 4px 0; }


.title span.right a {  padding: 4px 8px; font-size: 12px; margin: 0 4px 4px 0; border: none; outline: none; border-radius: 2px; background: #999; color: #FFF; text-shadow: 0 -1px rgba(0,0,0,0.15); box-shadow: 0 1px 2px rgba(0,0,0,0.2); font-weight: bold; display: inline-block; }
.title span.right a:hover { background: #808080; box-shadow: 0 1px 2px rgba(0,0,0,0.3); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.3);}

/* feature list */
ul.features { margin: 0; }
ul.features li.item { list-style: none; float: left; width: 33%; }
ul.features li.item .inner { margin: 8px; }
ul.features li.item .inner p { width: 90%;  margin: 16px auto; }
ul.features li.first { clear: both; }
ul.col3 { margin: 0; }
ul.col3 li.item { list-style: none; float: left; width: 33%; padding: 2px 0; vertical-align: top; }


/* category list */
ul.cat { margin: 0; }
ul.cat li.item .inner { min-height: 80px; }
ul.cat li.item .left { margin-right: 4px; }
ul.cat li.item h2 { font-size: 16px; margin: 8px 0 4px; }
ul.cat li.item span { font-size: 12px; }

/* block */
.block, blockquote, #respond { background: #FFF; padding: 4px; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.15); margin-bottom: 16px; position: relative; }
.block:hover, blockquote:hover, #respond:hover { box-shadow: 0 1px 5px rgba(0,0,0,0.25); }
.block-gray, #respond { border-left: 4px solid #999; padding: 16px 16px 24px; }
.block-blue, blockquote { border-left: 4px solid #66B0DA; padding: 16px 16px 24px; }
.block-gray h3, .block-blue h3, #respond h3 { margin: 0.5em 0 1em; color: #999; font-size: 12px; }
.block-description { display: none; position: absolute; bottom: 4px; left: 4px; right: 4px; background: rgba(255,255,255,0.9); height: 14px; text-align: left; padding: 6px 4px; font-size: 12px; }
.block img { display: block; }
.block-description img { vertical-align: baseline; display: inline-block; }

/* toolbar */
.toolbar { z-index: 99; right: 0; left: 0; top: 45px; position: fixed; padding: 8px 12px;  margin: 0 0 24px 0; font-size: 14px; background: #FFF; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.toolbar-inline { position: relative; display: block; top: 0; margin-bottom: 16px; }
.toolbar-item { display: inline-block; vertical-align: middle; margin: 4px 4px 4px 0; }
.toolbar-label { color: #999; }
.toolbar-btn-group { border: 1px solid #CCC; border-radius: 2px; 
    color: #333;
    border: 1px solid #CCC;
    border-top: 1px solid #DDD;
    border-bottom: 1px solid #BBB;
    background: #F2F2F2;
    background-image: -webkit-linear-gradient(bottom, #E5E5E5 0%, #F2F2F2 95%, #FFF 100%); 
    background-image: -moz-linear-gradient(bottom, #E5E5E5 0%, #F2F2F2 95%, #FFF 100%); 
    background-image: -ms-linear-gradient(bottom, #E5E5E5 0%, #F2F2F2 95%, #FFF 100%); 
    text-shadow: 0 1px rgba(255,255,255,0.6);
}
.toolbar-btn-group a { float: left; margin-right: 0; padding: 4px 8px; line-height: 18px; font-weight: normal; border-left: 1px solid #CCC; color: #333; }
.toolbar-btn-group a:hover { color: #3396CE; 
    background: #E5E5E5;
    background-image: -webkit-linear-gradient(bottom, #CCC 0%, #F2F2F2 95%, #FFF 100%); 
    background-image: -moz-linear-gradient(bottom, #CCC 0%, #F2F2F2 95%, #FFF 100%); 
    background-image: -ms-linear-gradient(bottom, #CCC 0%, #F2F2F2 95%, #FFF 100%); 
}
.toolbar-btn-group a.first { border: none; }
.toolbar-btn-group a.active { background: #E5E5E5; box-shadow: inset 0px 1px 2px #CCC; color: #3396CE; }
.toolbar-btn-group a img { padding: 3px; }

/* prgoress bar*/
.progress-bar { margin: 8px 0; height: 4px; background: #E5E5E5; border-radius: 2px; }
.progress-bar .progress { height: 4px; background: #66B0DA; border-radius: 2px; box-shadow: 0 1px 1px rgba(0,0,0,0.15); }

/* form-submit */
.form-submit .title input[type="text"] { background: none; border: 1px dashed #CCC; font-size: 24px; font-weight: bold; color: #999; padding: 8px 4px; width: 60%;}
.form-submit .title input[type="text"]:hover { background: #F8F8F8; border: 1px solid #CCC; }
.form-submit .title input[type="text"]:focus { background: #FFF; border: 1px solid #CCC; }
.form-submit .list-color-themes li { text-align: center; }
.form-submit .list-color-themes li a { margin-bottom: 4px; }
.input-required { display: inline-block; height: 16px; width: 20px; background: url(images/icons/20px/cloud-exclaim.png) no-repeat center; vertical-align: middle; }
.input-completed { background: url(images/icons/20px/cloud-tick.png) no-repeat center; }
ul#file-type li span { cursor: pointer; border-radius: 2px; }
ul#file-type li:hover { background: #F2F2F2; }

/* main grid */
ul.grid-main { margin: 0; }
ul.grid-main li.item { list-style: none; float: left; width: 25%; min-height: 216px; margin-bottom: 16px; text-align: center; }
ul.grid-main li.item .inner { width: 208px; margin: auto; margin: 8px auto; }
ul.grid-main li.item h3 { margin: 16px auto 8px; font-weight: normal; font-size: 16px; white-space: nowrap; width: 95%; overflow: hidden; text-overflow: ellipsis; }
ul.grid-main li.item a .block-description { font-weight: normal; }
ul.grid-main li.item a:hover h3 { color: #3396CE; }
ul.grid-main li.item .block .block-image { width: 200px; height: 144px; overflow: hidden; }

/* list post */
ul.list-post { margin: 0; border-top: 1px dotted #CCC; }
ul.list-post li.item { list-style: none; margin-bottom: 16px; border-bottom: 1px dotted #CCC; }
ul.list-post li.item .inner { }
ul.list-post li.item h3 { margin: 16px auto 8px; font-weight: normal; font-size: 16px; }
ul.list-post li.item a .block-content { font-weight: normal; }
ul.list-post li.item a:hover h3 { color: #3396CE; }
ul.list-post li.item .block-image img { width: 100px; height: 72px; overflow: hidden; }
.post-status { background: #999; font-size: 11px; padding: 2px 4px; color: #FFF; border-radius: 2px; }
.post-status-published { background: #007CC2; } 

/* blog list */
ul.list-blog { margin: 0 16px 0 0; }
ul.list-blog li.item { list-style: none; margin-bottom: 16px; }
ul.list-blog li.item .list-blog-thumbnail { float: left; margin: 0 24px 0 0; }
ul.list-blog li.item .list-blog-content h3 { margin-top: 0; padding-top: 0; font-weight: normal; }

/* blog grid */
ul.grid-blog { margin: 0; -moz-column-count: 3; -moz-column-gap: 24px; -moz-column-fill: auto; -webkit-column-count: 3; -webkit-column-gap: 24px; -webkit-column-fill: auto; column-count: 3; column-gap: 24px; column-fill: auto; }
ul.grid-blog li.item { -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; }
ul.grid-blog li.item .block { position: relative; overflow: hidden; }
ul.grid-blog li.item .block img { width: 100%; height: auto; }
ul.grid-blog li.item .block h2 { margin: 0 8px; }
ul.grid-blog li.item .block p { margin: 16px; }

/* single icon block */
.block-icon { text-align: center; padding: 64px 0; }
.block-icon img { padding: 0 1px 1px 0; margin: 16px; }
.block-icon img.grid { background: url(images/icon-grid-bg.png); }
.block-icon .item { display: inline-block; }
.block-icon .item .caption { margin: 8px auto; font-size: 12px; color: #999; }

/* icon tags */
.tags .block-blue { padding: 4px 12px 4px 8px; display: inline-block; margin-right: 4px; border-radius: 2px 12px 12px 2px; }
.tags .block-blue a { font-size: 14px; color: #333; font-weight: normal; line-height: 18px; }
.tags .block-blue a:hover { color: #3396CE; }

/* blog article */
.blog .content { max-width: 1080px;}
.title-block .title-block-inner { overflow: hidden; }
.title-block .title-block-inner img { width: 100%; height: auto; }
.title-block .title-block-inner h1 { margin: 8px; padding-bottom: 8px; border-bottom: 1px dotted #CCC; }
.title-block .title-block-inner .sub-title { margin: 8px; }
.blog-content { padding: 0 16px 16px 32px; font-size: 16px; }
.blog-content .abstract { font-size: 18px; font-style: oblique; }
.blog-content .block-image { margin: 16px -32px 16px -48px;  text-align: center; background: #FAFAFA; }
.blog-content .block-image img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.blog-content ul { margin: 16px 0 24px 2em; }
.blog-content ul ul { margin: 8px 0 8px 2em; }
.blog-content ul li { line-height: 150%; }
.blog-content blockquote, .blog-content pre { margin: 16px -32px 16px -48px; padding: 16px; background: #F8FCFF; }
.blog-content blockquote.alignleft { width: 50%; }
.blog-content blockquote.alignright { width: 50%; margin-left: 20px; } 
.blog-content blockquote pre { line-height: 150%; font-size: 14px; overflow: auto }
.blog-content pre.prettyprint { background: #FFF; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.15); margin-bottom: 16px; position: relative; border-left: 4px solid #999; padding: 32px;}
.blog-content blockquote p { margin: 8px 0;}
.blog-content p:first-child { font-size: 18px; font-style: oblique; }

/* meta list */
ul.list-meta { margin: 0; font-size: 12px; text-align: left; }
ul.list-meta li { list-style: none; border-bottom: 1px dotted #E5E5E5; padding: 4px 0; }
ul.list-meta li .meta-label { color: #999; padding-left: 16px; }
ul.list-meta li .meta-label-full { display: block; }
ul.list-meta li .meta-value { float: right; font-style: italic; }
ul.list-meta li .meta-value-full { display: block; margin-top: 4px; }

/* menu list */
ul.list-menu { margin: 0; font-size: 14px; text-align: left; }
ul.list-menu li { list-style: none; border-bottom: 1px dotted #E5E5E5; padding: 8px 0; position: relative; }
ul.list-menu li.icon { padding-left: 32px; }
ul.list-menu li input[type="text"] { position: absolute; left: 32px; top: 8px; right: 0; }
ul.list-menu-input li { min-height: 34px; }

/* widget list */
.widget { padding: 8px 0; border-bottom: 1px dotted #E5E5E5; position: relative; }
ul.widget-list-blog { margin: 0; }
ul.widget-list-blog li { list-style: none; padding: 8px 0; border-bottom: 1px dotted #E5E5E5; }
.widget select { position: absolute; left: 0; right: 0; width: 100%; border-radius: 2px; padding: 4px; border: 1px solid #E5E5E5; }

/* icons */
i.icon { display: inline-block; vertical-align: middle; }
i.icon-12 { width: 12px; height: 12px; }
i.icon-20 { width: 20px; height: 20px; vertical-align: bottom; }
/* icons 12px */
.icon12-date { background: url(images/icons/12px/calendar.png) no-repeat left center; }
.icon12-license { background: url(images/icons/12px/license.png) no-repeat left center; }
.icon12-download { background: url(images/icons/12px/download.png) no-repeat left center; }
.icon12-format { background: url(images/icons/12px/file.png) no-repeat left center; }
.icon12-resolution { background: url(images/icons/12px/resolution.png) no-repeat left center; }
.icon12-quantity { background: url(images/icons/12px/quantity.png) no-repeat left center; }
.icon12-tag { background: url(images/icons/12px/tag.png) no-repeat left center; }
.icon12-view { background: url(images/icons/12px/view.png) no-repeat left center; }

/* icons 20px */
.icon-download { background: url(images/icons/20px/download-white.png) no-repeat left center; }
.icon-facebook { background: url(images/icons/20px/icon-facebook.png) no-repeat left center; }
.icon-twitter { background: url(images/icons/20px/icon-twitter.png) no-repeat left center; }
.icon-rss { background: url(images/icons/20px/icon-rss.png) no-repeat left center; }
.icon-email { background: url(images/icons/20px/icon-email.png) no-repeat left center; }
.icon-google { background: url(images/icons/20px/icon-google.png) no-repeat left center; }
.icon-weibo { background: url(images/icons/20px/icon-weibo.png) no-repeat left center; }
.icon-preview { background: url(images/icons/20px/preview.png) no-repeat left center; }
.icon-link { background: url(images/icons/20px/link.png) no-repeat left center; }
.icon-favourite-blue { background: url(images/icons/20px/favourite-blue.png) no-repeat left center; }
.icon-favourite-gray { background: url(images/icons/20px/favourite-gray.png) no-repeat left center; }
.icon-user-follow { background: url(images/icons/20px/user-follow.png) no-repeat left center; }
.icon-user-following { background: url(images/icons/20px/user-following.png) no-repeat left center; }
.icon-user-unfollow { background: url(images/icons/20px/user-unfollow.png) no-repeat left center; }

.counter { color: #999; }
.counter:before { content: "("; }
.counter:after { content: ")"; }

/* container */
.container { background: #E5E5E5; padding: 8px; border-radius: 2px; box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3), 0px 1px 0 #fff; }


/* list-elements */
ul.list-elements { margin: 0; }
ul.list-elements li { list-style: none; float: left; width: 64px; min-height: 96px; margin: 0 8px 8px 0; font-size: 12px; text-align: center; border-radius: 2px; vertical-align: top; }
ul.list-elements li a { font-weight: normal; color: #808080; }
ul.list-elements li:hover, ul.list-elements li.active { background: #FFF; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
ul.list-elements li a:hover { color: #007CC2; }
ul.list-elements li input[type="checkbox"] { vertical-align: bottom; margin-bottom: 4px; }
ul.list-elements-small { margin: 0; }
ul.list-elements-small li { list-style: none; float: left; width: 32px; min-height: 32px; padding: 16px; margin: 0 8px 8px 0; background: #FFF; box-shadow: 0 1px 3px rgba(0,0,0,0.15); position: relative; }
ul.list-elements-small li:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
ul.list-elements-small li img { display: block; }
ul.list-elements-small li a.add { width: 32px; height: 32px; display: block; background: url(images/icons/32px/add_gray.png) no-repeat center; }
ul.list-elements-small li a.add:hover, ul.list-elements-small li a.active { background: url(images/icons/32px/add_blue.png); } 
ul.list-elements-small li a.remove { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 8px; background: #999 url(images/icons/12px/minus-white.png) no-repeat center; box-shadow: 0 1px 3px rgba(0,0,0,0.15); display: none; }
ul.list-elements-small li:hover a.remove { display: block; }
ul.list-elements-small li:hover a.remove:hover { background-color: #007CC2; } 

/* list-palettes */
ul.list-palettes { margin: 0; }
ul.list-palettes li { list-style: none; float: left; margin-right: 4px; }
ul.list-palettes li a { width: 32px; height: 16px; display: inline-block; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
ul.list-color-themes { margin: 0; }
ul.list-color-themes li { list-style: none; float: left; margin-right: 4px; }
ul.list-color-themes li a { display: block; width: 48px; height: 24px; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }

/* comment list */
ul.list-comment { margin: 24px 0 0; }
ul.list-comment li.item { list-style: none; margin-bottom: 16px; }
ul.list-comment li.item .avatar { float: left; margin-bottom: 16px; border: 4px solid #FFF; border-radius: 40px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
ul.list-comment li.item .avatar img { background: #FFF; width: 64px; height: 64px; border-radius: 40px; }
ul.list-comment li.item .comment-content { padding-left: 16px; background: url(images/arrow-left-blue.png) no-repeat 8px 20px; }
ul.list-comment li.item .comment-content-author { background: url(images/arrow-left-blue.png) no-repeat 88px 28px; }
ul.list-comment li.item .comment-content h4 { margin-top: 0; }
ul.list-comment li.item .comment-content p { margin: 8px 0; }
ul.list-comment ul.children { margin-left: 32px; }

/* comment */
ul.commentlist { margin: 20px 0; }
ul.commentlist li { list-style: none; border-top: 1px dotted #CCC; padding: 10px 0; }
ul.commentlist li .avatar { padding: 4px; background: #FFF; /*border: 1px solid #CCC;*/ float: left; box-shadow: 0 2px 1px #E0E0E0; -moz-box-shadow: 0 2px 1px #E0E0E0; margin-right: 10px; margin-bottom: 5px; }
ul.commentlist li cite { font-size: 14px; font-weight: bold; line-height: 20px; font-style: normal; }
.comments-wrap { margin: 30px 0 10px 0; }
.comment-content { overflow: hidden; }
.form-submit { margin: 8px 0; }
ul.commentlist ul.children { margin-left: 36px; }
#respond { }
#respond h3 { display: inline-block; margin: 0; }
#commentform{ margin: 20px 0 0 0;  }
#commentform textarea { width: 90%; }
.comment-form-label label { padding: 0 0 0 10px; }
.comment-form-comment label { display: none; }

/* pagination */
.pagination-wrap { float: right; }
.pagination ul.page-numbers { height: 20px; margin: 0; }
.pagination ul.page-numbers li { list-style: none; float: left; margin: 0 4px; }
.pagination ul.page-numbers li a { font-size: 12px; padding: 3px 6px; color: #FFF; background: #999; text-shadow: 0 -1px #666; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px 2px 2px 2px; box-shadow: 0 1px rgba(0,0,0,0.2); -moz-box-shadow: 0 1px rgba(0,0,0,0.2); }
.pagination ul.page-numbers li a:hover { background: #808080; text-decoration: none; }
.pagination ul.page-numbers li:active { padding-top: 1px; }
.pagination ul.page-numbers li:active a { box-shadow: none; -moz-box-shadow: none; }
.pagination ul.page-numbers li .current,
.pagination ul.page-numbers li .prev,
.pagination ul.page-numbers li .next { padding: 3px 6px; color: #FFF; text-shadow: 0 -1px #005D92; font-size: 12px; font-weight: bold; background: #3396CE; -webkit-border-radius: 2px;  -moz-border-radius: 2px;  border-radius: 2px 2px 2px 2px; box-shadow: 0 1px rgba(0,0,0,0.2); -moz-box-shadow: 0 1px rgba(0,0,0,0.2); }
.pagination ul.page-numbers li .prev:hover,
.pagination ul.page-numbers li .next:hover { background: #007CC2; text-decoration: none; }
.pagination ul.page-numbers li .prev:active,
.pagination ul.page-numbers li .next:active { background: #007CC2; }

/*image slides*/
.item-preview { position: relative; }
#slideshow { margin: 0 auto; text-align: center; min-height: 400px; overflow: hidden; }
#slideshow img { max-width: 100%; height: auto; margin: auto; }
.arrow-right { display: block; background: #999 url(images/arrow-right.png) no-repeat center; width: 36px; height: 40px; text-indent: -5000px; position: absolute; top: 45%; right: -4px; z-index: 100; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);}
.arrow-left { display: block; background: #999 url(images/arrow-left.png) no-repeat center; width: 36px; height: 40px; text-indent: -5000px; position: absolute; top: 45%; left: -4px; z-index: 100; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);} 
.arrow-right:hover,
.arrow-left:hover { background-color: #808080; }
ul#itemnav { padding: 10px 0 2px; margin: 0; margin-bottom: 16px; }
ul#itemnav li { float: left; display: inline-block; margin: 0 8px 8px 0; position: relative; }
ul#itemnav li img { padding: 4px; background: #FFF; box-shadow: 0 1px 2px rgba(0,0,0,0.15); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
ul#itemnav li.activeSlide img, ul#itemnav li:hover img { box-shadow: 0 1px 2px rgba(0,0,0,0.3); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
ul#itemnav li div.remove { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; cursor:pointer; border-radius: 8px; background: #999 url(images/icons/12px/minus-white.png) no-repeat center; box-shadow: 0 1px 3px rgba(0,0,0,0.15); display: none; }
ul#itemnav li:hover div.remove { display: block; }
ul#itemnav li div.remove:hover { background-color: #007CC2; }

ul.gallery { padding: 10px 0 2px; margin: 0; margin-bottom: 16px; }
ul.gallery li { float: left; display: inline-block; margin: 0 8px 8px 0; }
ul.gallery li img { padding: 4px; background: #FFF; box-shadow: 0 1px 2px rgba(0,0,0,0.15); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
ul.gallery li.active img, ul.gallery li:hover img { box-shadow: 0 1px 2px rgba(0,0,0,0.3); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
ul.gallery-vertical { margin: 0; padding: 8px; }
ul.gallery-vertical li { line-height: 100%; list-style: none; margin-bottom: 8px; }
ul.gallery-vertical li img { width: 100%; }
ul.gallery-vertical li.active img, 
ul.gallery-vertical li:hover img { box-shadow: 0 1px 2px rgba(0,0,0,0.3); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
img.select-thumbnail { cursor: crosshair; }

/* tab */
ul.tab-horizontal { margin: 0 0 16px; border-bottom: 1px solid #CCC; }
ul.tab-horizontal li.item { list-style: none; float: left; padding: 8px 16px 12px; }
ul.tab-horizontal li.active { background: url('images/arrow-up-gray.png') no-repeat bottom center; } 
ul.tab-horizontal li.active a { color: #999; }

/* effect */
.drop-shadow { box-shadow: 0 1px 5px rgba(0,0,0,0.2); }
img.frame { padding: 4px; margin: auto -4px; background: #FFF; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.color-theme { color: #3396CE; }
.color-light-gray { color: #999; }
.left { float: left; margin-right: 16px; }
.right { float: right; margin-left: 16px; }
.center { text-align: center; }

/* WordPress Core */
.alignnone { margin: 5px 20px 20px 0; }
.aligncenter,
div.aligncenter { display: block; margin: 5px auto 5px auto; }
.alignright { float:right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }
.aligncenter { display: block; margin: 5px auto 5px auto;}
a img.alignright { float: right; margin: 5px 0 20px 20px; }
a img.alignnone { margin: 5px 20px 20px 0; }
a img.alignleft { float: left; margin: 5px 20px 20px 0; }
a img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { background: #F2F2F2; font-size: 12px; padding: 5px 3px; margin: 0; text-align: center; font-style: italic; }
.wp-caption.alignnone { margin: 5px 20px 20px 0; }
.wp-caption.alignleft { margin: 5px 20px 20px 0; }
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; }

/* extra */
#mce-EMAIL { width: 300px; }
.bsa_it_ad a { font-size: 12px; }
.bsa_it_ad a .bsa_it_t { display: block; margin: 8px 0; }
.bsa_it_ad a .bsa_it_d { font-weight: normal; color: #999; }

/* BSA */
body .one .bsa_it_ad { background: transparent; border: none; font-family: inherit; padding: 0; }
body .one .bsa_it_ad:hover img { -moz-box-shadow: 0 0 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.5); box-shadow: 0 0 3px rgba(0,0,0,0.5); }
body .one .bsa_it_ad .bsa_it_i { display: block; padding: 0; float: none; }
body .one .bsa_it_ad .bsa_it_i img { border: none; }
body .one .bsa_it_ad .bsa_it_t { font-size: 16px; }
body .one .bsa_it_ad .bsa_it_d { padding: 0; font-size: 12px; color: #333; }
body .one .bsa_it_p { display: none; }
body #bsap_aplink, body #bsap_aplink:hover { display: block; font-size: 12px; font-weight: normal; margin: 8px 0 0; color: #999; }


/* contact form */
.wpcf7-form label { display: block; margin: 0 0 8px; }
.wpcf7-form label i { background: url(images/icons/icon-asterisk.png) no-repeat; width: 16px; height: 16px; vertical-align: bottom; display: inline-block; }
.wpcf7-form .form-section { padding: 8px; position: relative; }
.wpcf7-form .form-section p { margin: 0; }
.wpcf7-form .form-section .hint { position: absolute; left: 60%; top: 24px; display: block; width: 35%; border-left: 4px solid #66B0DA; padding: 16px; background: #FFF; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.wpcf7-form .form-section .hint i { position: absolute; left: -12px; width: 12px; height: 24px; background: url(images/arrow-left-blue.png) no-repeat; }
.wpcf7-form input[type="text"], 
.wpcf7-form textarea { width: 55%; }
.wpcf7-form select { width: 57%; padding: 8px 6px; border: 1px solid #E5E5E5; background: #F8F8F8; -moz-border-radius: 2px; border-radius: 2px 2px 2px 2px;  color: #666;  box-shadow: 0 1px #FFF; -moz-box-shadow: 0 1px #FFF;}
.wpcf7-form select:focus { background: #FFF; }
.wpcf7-form .form-footer { border-top: 1px dotted #CCC; padding-top: 16px; margin-top: 8px; }
.wpcf7-form input[type="file"] { width: 55%; padding: 10px 8px; border: 1px solid #999; background: #F8F8F8; -moz-border-radius: 2px; border-radius: 2px 2px 2px 2px;  color: #666;  box-shadow: 0 1px #FFF; -moz-box-shadow: 0 1px #FFF; }

/* form inline */
.form-inline .form-section { margin-bottom: 8px; }
.form-inline .form-section label { display: inline-block; width: 25%; vertical-align: top; }
.form-inline .form-section .input { width: 70%; }
.form-inline .form-section textarea,
.form-inline .form-section input[type="text"] { width: 70%; padding: 4px; }



/* jQuery UI overrides */
.ui-menu-item a { font: 12px Cambria, Georgia, serif; color: #999; }
.ui-menu-item a b { font-size: 16px; color: #333; }
.ui-menu-item .left { margin: 4px 8px 4px 4px; }
.ui-autocomplete { max-height: 230px; overflow-y: auto; overflow-x: hidden;}


/* login form */
.login-block { width:300px; margin: 96px auto; padding: 16px; }
#loginform p { margin: 8px 0; }
#loginform p label { display: block; }
#loginform p input[type="text"],
#loginform p input[type="password"]  
{ width: 280px; }

/* media query */
@media screen and (max-width: 720px)
{
    .nav li.compact { display: list-item; }
    .nav li.screen { display: none; } 
    .post-social { float: none; }    
}
@media screen and (max-width: 480px)
{
    .master-width { width: 98%; }
    body { min-width: 320px; }        
    .home .content { background: none; }
    .home .content .logo { width: 85%; margin-top: 32px; }
    .home .content .home-note { font-size: 16px; margin: 0 16px; }
    .home .search { margin: 48px 0; }
    .home .search input { width: 90%; margin: 0 0 16px 0; padding: 12px 2.5%; }
    .home .search input[type="submit"] { width: 95%; }
    ul.features li.item { float: none; width: 100%; }
    ul.features li.item .inner { margin: 8px 16px; }    
    ul.grid-main li.item { width: 100%; float: none; }
    .content-main { width: 95%; float: none; margin: 0 auto; }
    .sidebar { width: 95%; float: none; margin: 0 auto; }
    ul.list-blog { margin: 0; }
    ul.list-blog li.item .list-blog-thumbnail { float: none; text-align: center; margin: 0; }
    ul.list-blog li.item .list-blog-thumbnail .block { display: inline-block; }
    ul.list-blog li.item .list-blog-content h3 { margin-top: 0; }
    ul.grid-set li {  }
    ul.grid-set li.item .block .block-info-popup .block { width: 144px; }
    ul.grid-set li.item .block .block-info-popup ul.list-meta li .meta-label { color: #999; padding-left: 16px; display: block; }    
    ul.grid-set li.item .block .block-info-popup ul.list-meta li .meta-value { float: none; display: block; margin-top: 4px; }
    ul.list-comment ul.children { margin-left: 0px; }
    .blog-content { padding-left: 0; }
    .blog-content blockquote, .blog-content pre,
    .blog-content .block-image { margin-left: 0; max-width: 95%; }    
    .pagination-wrap { float: none; clear: both; }  
    .section-left, .section-right { float: none; width: 100%; }      
    .login-block { margin: 32px auto; }
    ul.grid-blog { -moz-column-count: 1; -moz-column-gap: 0; -webkit-column-count: 1; -webkit-column-gap: 0; column-count: 1; column-gap: 0; }    
}
@media all and (min-width: 481px) and (max-width: 720px)
{
    body { min-width: 320px; }
    .master-width { width: 98%; } 
    ul.features li.item { float: none; width: 100%; }
    ul.features li.item .inner { margin: 8px 24px; }
    ul.grid-main li.item { width: 50%; }
    .content-main { width: 95%; float: none; margin: 0 auto; }
    .sidebar { width: 95%; float: none; margin: 0 auto; }    
    ul.grid-blog { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; }    
}
@media all and (min-width: 721px) and (max-width: 960px)
{
    .master-width { width: 95%; } 
    body { min-width: 640px; }
    ul.grid-main li.item { width: 33%; }
    ul.cat li.item { width: 50%; }
    .content-main { width: 95%; float: none; margin: 0 auto; }
    .sidebar { width: 95%; float: none; margin: 0 auto; }
    .footer-social { min-width: 470px; }
}
@media all and (min-width: 961px) and (max-width: 1280px)
{
    .master-width { width: 95%; }        
    ul.grid-main li.item { width: 33%; }    
    .content-main { width: 75%; }
    .sidebar { width: 23%; }       
    .footer-social { min-width: 470px; }
    .blog .content-main { width: 73%; }
    .blog .sidebar { width: 23%; }       
}
@media all and (min-width: 1281px) and (max-width: 1680px)
{
    .master-width { width: 92%; }        
    .content-main { width: 78%; }
    .sidebar { width: 20%; }       
    .footer-social { min-width: 470px; }
    .blog .content-main { width: 73%; }
    .blog .sidebar { width: 23%; }       
}
@media all and (min-width: 1681px)
{
    .master-width { width: 92%; } 
    ul.grid-main li.item { width: 16.6%; }
    .content-main { width: 83%; }
    .sidebar { width: 15%; }         
    .footer-social { min-width: 470px; }
    .blog .content-main { width: 73%; }
    .blog .sidebar { width: 23%; }       
}