Team:Nankai/Practices/screen.css
.clearfix {
*zoom: 1;
} .clearfix:before, .clearfix:after {
display: table; content: ""; line-height: 0;
} .clearfix:after {
clear: both;
} .hide-text {
font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0;
} .input-block-level {
display: block; width: 100%; min-height: 27px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
} .colored {
color: #f34343;
} .coloredGray {
background: #f3f3f3; padding: 18px 0;
} .lightText {
color: #9e9e9e;
} .darkBg { background: white ; } .grayBg {
background: #212121;
} .iconBg {
background: #f34343;
}
.brand::after {
background: #f34343;
} .menu li a:hover {
color: #f34343;
} .menu li > ul {
border-top: 2px solid #f34343;
} .active > a {
color: #f34343 !important;
} .rs_mainslider_items_text h2, .introMess h2 {
background-color: rgba(243, 68, 68, 0.5);
} .rs_mainslider .rs_mainslider_dots_container ul.rs_mainslider_dots li.rs_mainslider_dots_active {
background: #ff5959;
} .coloredSection {
background: #f34343; color: white;
} .coloredSection h3 {
color: white;
} .portfolioItems li figure:hover {
border-bottom: 1px solid #f34343 !important;
} .portfolioItems li figure:hover:after {
border-bottom: 5px solid #f34343;
} .portfolioItems li figure h3 a:hover {
color: #f34343;
} .recentPosts li::before {
background: #f34343;
} .btn:hover, .btn:focus {
background-color: #f34343 !important;
} .btn-color {
background: #f34343;
} .accordion-heading-active::after {
background: #f34343;
} .nav-tabs > .active {
border-top: 1px solid #f34343;
} .nav-tabs > .active:after {
border-top: 5px solid #f34343;
} .pricingTable > li h3 {
background-color: #f34343; border: 1px solid #f34343;
} .sidebarMenu ul li a:hover b {
color: #f34343;
} .sidebarMenu .active a b {
color: #f34343;
} address ul li a:hover {
color: #f34343;
} .blogItems a:hover {
color: #f34343;
} .postDate ul .date {
background: #f34343;
} .blogBreadcrumb li.active {
color: #f34343;
} .readMore {
color: #f34343;
} .arrowRight a:hover, .arrowLeft a:hover {
background: #f34343;
} .photoControl ul li a:hover {
color: #f34343;
} .servicesFeatures li figure a img {
background-color: #f34343;
} .progress .bar {
background-color: #f34343;
} .pagination li a:hover {
color: #f34343;
} .colored {
color: #f34343 !important;
} /*Defaul page style No. 1 */ /* General Style ==================================================*/ html {
font-size: 62.5%;
} body {
background: white; color: #252525;
} /*Type ==================================================*/ p {
margin: 0 0 18px 0; font-size: 1.3rem;
} a, button {
font-family: inherit;
} .lead {
margin-bottom: 18px; font-size: 1.9500000000000002rem; font-weight: 200; line-height: 27px;
} small {
font-size: 85%;
} strong {
font-weight: bold;
} em {
font-style: italic;
} cite {
font-style: normal;
} .muted {
color: #999999;
} a.muted:hover, a.muted:focus {
color: #808080;
} .text-warning {
color: #c09853;
} a.text-warning:hover, a.text-warning:focus {
color: #a47e3c;
} .text-error {
color: #b94a48;
} a.text-error:hover, a.text-error:focus {
color: #953b39;
} .text-info {
color: #3a87ad;
} a.text-info:hover, a.text-info:focus {
color: #2d6987;
} .text-success {
color: #468847;
} a.text-success:hover, a.text-success:focus {
color: #356635;
} .text-left {
text-align: left;
} .text-right {
text-align: right;
} .text-center {
text-align: center;
} h1, h2, h3, h4, h5, h6 {
margin: 9px 0; font-family: inherit; font-weight: bold; line-height: 18px; color: #000000; text-transform: uppercase; text-rendering: optimizelegibility;
} h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
font-weight: normal; line-height: 1; color: #999999;
} h1, h2 {
line-height: 36px;
} h1 {
font-size: 2.5rem;
} h2 {
font-size: 2.4rem; font-weight: 300;
} h3 {
font-size: 1.3rem; line-height: 18px;
} .page-header {
padding-bottom: 8px; margin: 18px 0 27px; border-bottom: 1px solid #eeeeee;
} ul, ol {
padding: 0; margin: 0 0 9px 25px;
} ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0;
} li {
line-height: 18px;
} ul.unstyled, ol.unstyled {
margin-left: 0; list-style: none;
} ul.inline, ol.inline {
margin-left: 0; list-style: none;
} ul.inline > li, ol.inline > li {
display: inline-block; *display: inline; /* IE7 inline-block hack */
*zoom: 1; padding-left: 5px; padding-right: 5px;
} dl {
margin-bottom: 18px;
} dt, dd {
line-height: 18px;
} dt {
font-weight: bold;
} dd {
margin-left: 9px;
} .dl-horizontal {
*zoom: 1;
} .dl-horizontal:before, .dl-horizontal:after {
display: table; content: ""; line-height: 0;
} .dl-horizontal:after {
clear: both;
} .dl-horizontal dt {
float: left; width: 160px; clear: left; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
} .dl-horizontal dd {
margin-left: 180px;
} hr {
margin: 17px 0; border: 0; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #ffffff;
} abbr[title], abbr[data-original-title] {
cursor: help; border-bottom: 1px dotted #999999;
} abbr.initialism {
font-size: 90%; text-transform: uppercase;
} blockquote {
padding: 0 0 0 30px; margin: 0 0 18px; border-left: 2px solid #dbd8d8; color: #979797; font-style: italic;
} blockquote p {
margin-bottom: 0; font-size: 1.6rem; font-weight: 300; line-height: 1.25;
} blockquote small {
display: block; line-height: 18px; color: #999999;
} blockquote small:before {
content: '\2014 \00A0';
} blockquote.pull-right {
float: right; padding-right: 15px; padding-left: 0; border-right: 5px solid #eeeeee; border-left: 0;
} blockquote.pull-right p, blockquote.pull-right small {
text-align: right;
} blockquote.pull-right small:before {
content: ;
} blockquote.pull-right small:after {
content: '\00A0 \2014';
} q:before, q:after, blockquote:before, blockquote:after {
content: "";
} address {
display: block; margin-bottom: 18px; font-style: normal; line-height: 18px;
} /*Forms*/ select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
display: inline-block; height: 18px; padding: 4px 6px; margin-bottom: 9px; font-size: 1.3rem; line-height: 18px; color: #9e9e9e; vertical-align: middle; border: 1px solid #e3e3e3;
}
label {
text-transform: uppercase; font-weight: 900; color: #4a4a4a;
} /*Media*/ figure {
margin: 0;
} .grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
/* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear;
} .grayscale:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);
}
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;} /* Header Style ==================================================*/ .mainHeader {
width: 100%; height: 155px; position: relative;
} /*social navigation*/ .navTop {
position: realtive; height: 29px; background: #4a4a4a;
} .navTop ul {
margin: 0; padding: 0;
} .navTop ul li {
float: left;
} .navTop ul li a {
width: 29px; height: 29px; font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; display: block; padding: 0; margin: 0; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear;
} .navTop ul li a:hover { background-color: white!important; } .mainNav {
min-height: 126px; background: white;
} /*logo*/ .brand {
width: 252px; height: 51px; display: block; font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; position: relative; margin: 35px 0;
} .brand::before {
content: ; display: block; width: 252px; height: 51px; position: absolute; top: 0; left: 0; background: url(../img/logo.png) 0 0 no-repeat; z-index: 10;
} .brand::after {
content: ; display: block; width: 29px; height: 32px; position: absolute; top: 0; right: 0; z-index: 1;
} /*Menu*/ .menu {
padding: 50px 0; background: white;
} .menu li {
position: relative; margin: 0 5px;
} .menu li a {
color: #6c6c6c; padding-bottom: 25px; font-size: 15px; text-transform: uppercase; -webkit-transition: color 0.3s linear; -moz-transition: color 0.3s linear; -o-transition: color 0.3s linear; transition: color 0.3s linear;
} .menu li a:hover {
background: none; text-decoration: none;
} .menu li a:hover ~ ul {
display: block;
} .menu li > ul {
position: absolute; top: 40px; left: -50px; display: none; background: #0f0f0f; width: 163px; text-align: center; padding: 10px 0; z-index: 1000;
} .menu li > ul > li {
border-bottom: 1px solid #1f1f1f; margin: 0;
} .menu li > ul > li a {
padding: 5px 0; display: block; text-transform: none; font-size: 13px;
} .menu li > ul > li:last-child {
border: none;
} .menu li > ul:hover {
display: block;
} .menu li:last-child {
padding-right: 0; margin-right: 0;
} .menu li:nth-child(4) > ul {
left: -35px;
} /* Slider ==================================================*/ .bigSlider {
padding: 0; margin-bottom: 9px; margin-top: 100px
} .rs_mainslider {
position: relative;
} .rs_mainslider ul.rs_mainslider_items {
position: relative; overflow: hidden; margin: 0;
} ul.rs_mainslider_items li {
position: absolute; top: 0; left: 0; z-index: 0;
} .rs_mainslider ul.rs_mainslider_items li:first-child {
position: relative; z-index: 1;
} .rs_mainslider ul.rs_mainslider_items li .rs_mainslider_items_image {
opacity: 0; filter: alpha(opacity=0); max-width: none; width: 100%; height: auto; margin-top: 100px
} .rs_mainslider_items_text {
position: absolute; top: 30%; left: 0; right: 0;
} .rs_mainslider_items_text h2 {
color: white; margin-bottom: 10px; text-transform: uppercase; display: inline-block; padding: 10px; padding-right: 20px;
} .rs_mainslider_items_text h1, .rs_mainslider_items_text h3 {
color: white;
} .rs_mainslider .rs_mainslider_left_container {
position: absolute; left: 5%; z-index: 2;
} .rs_mainslider_left, .rs_mainslider_right {
background: url() 0 0 no-repeat; width: 25px; height: 36px; overflow: hidden; cursor: pointer; opacity: 0; filter: alpha(opacity=0);
} .rs_mainslider .rs_mainslider_right_container {
position: absolute; right: 5%; z-index: 2;
} .rs_mainslider .rs_mainslider_right_container .rs_mainslider_right {
background-position: -26px 0;
} .rs_mainslider .rs_mainslider_dots {
border-radius: 5px; padding: 0px 2px;
} .rs_mainslider .rs_mainslider_dots_container {
position: absolute; bottom: 15px; left: 0; z-index: 2;
} ul.rs_mainslider_dots {
list-style: none;
} .rs_mainslider .rs_mainslider_dots_container ul.rs_mainslider_dots li {
float: left; width: 8px; height: 8px; background: #fff; border-radius: 100%; margin: 3px; cursor: pointer;
} .rs_center_vertical_container {
top: 50%;
} .rs_center_vertical_container .rs_center_vertical {
margin-top: -50%;
} .rs_center_horizontal_container {
margin-left: 50%;
} .rs_center_horizontal_container .rs_center_horizontal {
margin-left: -50%; float: left;
} @-moz-document url-prefix() {
.rs_mainslider ul.rs_mainslider_items li .rs_mainslider_items_text span {
line-height: 43px;
}
} /* Welcome Message ==================================================*/ .welcomeMessage {
text-align: center; padding: 18px 0;
} .welcomeMessage h1 {
text-transform: uppercase;
} /* Feature Site ==================================================*/ .featureSite {
padding: 18px 0 9px 0;
} .featureSite ul {
list-style: none;
} .featureSite ul li {
text-align: center;
} .featureSite ul li figure {
margin: 0; padding: 0;
} .featureSite ul li figure a {
margin: 9px 0 12px 0; display: inline-block; -webkit-transition: opacity 0.3s linear; -moz-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; transition: opacity 0.3s linear;
} .featureSite ul li figure a:hover {
opacity: 0.5;
} /* Portfolio ==================================================*/ .viewProjects {
padding: 36px 0; text-align: right; font-size: 1.3rem; font-weight: 900;
} .viewProjects a {
color: #000000; font-family: "Open Sans", Helvetica, Arial, sans-serif;
} .viewProjects a:hover {
color: #c2c2c2; text-decoration: none;
} .portfolioItems {
list-style: none; padding: 0; text-align: center;
} .portfolioItems li {
padding: 0; margin-bottom: 35px;
} .portfolioItems li figure {
margin: 0; padding: 0; border-bottom: 1px solid transparent; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; position: relative;
} .portfolioItems li figure p {
overflow: hidden; text-overflow: ellipsis; line-height: 18px; max-height: 36px;
} .portfolioItems li figure:hover:after {
content: ; display: block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; position: absolute; bottom: 0; left: 50%; margin-left: -2.5px;
} .portfolioItems li figure h3 {
overflow: hidden; text-overflow: ellipsis; max-height: 18px;
} .portfolioItems li figure h3 a {
color: #000000;
} .portfolioItems li figure h3 a:hover {
text-decoration: none;
} .portfolioItems li figure a {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
/* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear;
} .portfolioItems li figure a:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);
} /*Page style*/ .pageStyle {
margin-top: 36px; margin-bottom: 36px;
} /* Features page ==================================================*/ .topImage {
background: url(../img/top_image.jpg) 0 0 no-repeat; height: 117px; padding-top: 32px;
} /*Breadcrumbs*/ .breadcrumb {
padding: 9px 0px; margin: 0 0 18px; list-style: none;
} .breadcrumb > li {
display: inline-block; text-transform: uppercase; *display: inline; /* IE7 inline-block hack */
*zoom: 1;
} .breadcrumb > li a {
color: #000000;
} .breadcrumb > li > .divider {
padding: 0 5px; color: #000000;
} .breadcrumb > .active {
text-decoration: underline;
} /*Alerts*/ .alert {
padding: 17px 28px; margin-bottom: 18px; background-color: #f8f8f8; border: 1px solid #ebebeb; box-shadow: inset 0 -10px 50px -20px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5); -webkit-box-shadow: inset 0 -10px 50px -20px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
} .alert, .alert h3 {
color: #c5c4c4;
} .alert h3 {
margin: 0;
} .alert .close {
position: relative; top: 0px; right: 0px; line-height: 18px;
} .alert-success {
background-color: #c5edb9; border-color: #aed9a2; color: #90c382;
} .alert-success h3 {
color: #90c382;
} .alert-danger, .alert-error {
background-color: #f6c3c3; border: 1px solid #eab6b6; color: #b94a48;
} .alert-danger h3, .alert-error h3 {
color: #ba6363;
} .alert-block {
background-color: #f8ebac; border-color: #e5d99d; color: #ea4a4a;
} .alert-block h3 {
color: #ea4a4a;
} .alert-info {
background-color: #cbe5e9; border-color: #b9d3d7; color: #73adb4;
} .alert-info h3 {
color: #73adb4;
} /* Buttons ==================================================*/ .btn {
display: inline-block; *display: inline; /* IE7 inline-block hack */
*zoom: 1; padding: 6px 18px; margin: 3px 0; font-size: 1.3rem; color: white; line-height: 18px; text-align: center; text-transform: uppercase; font-weight: 900; vertical-align: middle; cursor: pointer; background-color: #000000; border: 0; *margin-left: .3em; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear;
} .btn:first-child {
*margin-left: 0;
} .btn:hover, .btn:focus {
color: white ; text-decoration: none;
} .btn.active, .btn:active {
background-image: none; outline: 0;
} .btn.disabled, .btn[disabled] {
cursor: default; background-image: none; opacity: 0.65; filter: alpha(opacity=65); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
} .btn-color:hover, .btn-color:focus {
background-color: #000000; text-decoration: none;
} .btn-medium {
padding: 10px 36px;
} .btn-large {
padding: 14px 45px;
} /*Button demo*/ .demoButtons li {
width: 170px; margin-bottom: 18px;
} /*Accordion*/ .accordion {
border: 1px solid #e5e5e5; padding: 0 20px; margin-bottom: 18px; background: white;
} .accordion-group {
margin-bottom: 2px;
} .accordion-heading {
border-bottom: 1px solid #e5e5e5;
} .accordion-heading .accordion-toggle {
display: block; padding-top: 8px; padding-bottom: 9px;
} .accordion-toggle {
position: relative; padding-left: 50px; margin: 18px 0; text-transform: uppercase; font-weight: 900; color: #4a4a4a;
} .accordion-toggle::before {
content: '+'; display: block; position: absolute; top: 0; left: 0; width: 30px; height: 30px; background: #000000; color: #fff; font-size: 28px; text-align: center; line-height: 30px;
} .accordion-heading-active {
border: 0; position: relative;
} .accordion-heading-active::after {
content: '-'; display: block; position: absolute; top: 0; left: 0; width: 30px; height: 30px; color: #fff; font-size: 28px; text-align: center; line-height: 25px; z-index: 100;
} .accordion-toggle {
cursor: pointer;
} .accordion-inner {
padding: 9px 0px;
} /*Tabs*/ .nav-tabs {
*zoom: 1;
} .nav-tabs:before, .nav-tabs:after {
display: table; content: ""; line-height: 0;
} .nav-tabs:after {
clear: both;
} .nav-tabs > li {
float: left;
} .tabs {
border: 1px solid #e5e5e5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 18px;
} .tabs ul {
list-style: none; margin: 0; margin-top: -1px;
} .nav-tabs > li {
border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5; padding: 0;
} .nav-tabs > li > a {
line-height: 18px; background: #f6f6f6; width: 98px; height: 70px; display: block; margin: 0; text-align: center; line-height: 75px; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; font-weight: 900; color: #c2c2c2;
} .nav-tabs > li > a:hover, .nav-tabs > li > a:focus {
color: #4a4a4a; text-decoration: none;
} .nav-tabs > li:last-child {
border-right: none;
} .nav-tabs > li:last-child a {
width: 100px;
} .nav-tabs > .active {
border-bottom: none; color: #4a4a4a; position: relative;
} .nav-tabs > .active:after {
content: ; displya: block; position: absolute; border-left: 5px solid transparent; border-right: 5px solid transparent; top: 0; left: 50%; margin-left: -3px;
} .nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
color: #4a4a4a; background-color: #ffffff; border-bottom-color: transparent; cursor: default;
} .nav-pills > li > a {
padding-top: 8px; padding-bottom: 8px; margin-top: 2px; margin-bottom: 2px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
} .tabs-below > .nav-tabs, .tabs-right > .nav-tabs, .tabs-left > .nav-tabs {
border-bottom: 0;
} .tab-content > .tab-pane, .pill-content > .pill-pane {
display: none;
} .tab-content > .active, .pill-content > .active {
display: block;
} .tabPost {
padding: 18px;
} .tabPost li {
border-bottom: 1px solid #e5e5e5; *zoom: 1; padding: 18px 0 8px 0;
} .tabPost li:before, .tabPost li:after {
display: table; content: ""; line-height: 0;
} .tabPost li:after {
clear: both;
} .tabPost li figure {
float: left; padding: 0 18px 0 0; margin: 0;
} .tabPost li:last-child {
border: none; padding: 18px 0 9px 0;
} /*Lists*/ .list li {
padding: 5px 0;
} .check-list {
list-style: url(../img/check_mark.png);
} .star-list {
list-style: url(../img/star_list.png);
} /*Price Table*/ .pricingTable {
list-style: none;
} .pricingTable > li {
border: 1px solid #e5e5e5; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 18px;
} .pricingTable > li h3 {
margin: 0; margin-bottom: 36px; color: white; padding: 5px 0; -webkit-box-shadow: inset 0 0 0 1px #ffffff; -moz-box-shadow: inset 0 0 0 1px #ffffff; box-shadow: inset 0 0 0 1px #ffffff;
} .pricingTable > li ul {
list-style: none; margin: 0; padding: 0;
} .pricingTable > li ul li {
text-transform: uppercase; color: #4a4a4a; border-bottom: 1px solid #e5e5e5; padding: 5px 0;
} .price {
font-size: 2rem; color: #4a4a4a; padding: 18px 0; margin-bottom: 9px;
} .price strong {
font-size: 4.5rem; position: relative; top: 10px; padding: 0 3px; color: #000000;
} /* Error Page ==================================================*/ .errorPage {
background: url(../img/error_404.jpg) 0 0 no-repeat; min-height: 672px; height: 100%; text-align: center; padding-top: 54px; margin-top: 36px;
} .errorPage h1 {
font-size: 5.8rem; line-height: 5.8rem;
} .errorPage h1 b {
font-size: 11.1rem; line-height: 1em; display: block;
} .errorPage p {
text-transform: uppercase; font-weight: 900; padding: 9px 0;
} .errorPage input {
margin: 0 auto;
} /* Sidebar ==================================================*/ .sidebar {
margin-top: 36px;
} /*sidebarMenu*/ .boxModel {
border: 6px solid #eaeaea; margin-bottom: 18px;
} .boxModel h1 {
margin-top: 0;
} .sidebarMenu {
padding: 12px 18px;
} .sidebarMenu ul {
margin: 0; list-style: none;
} .sidebarMenu ul li {
border-bottom: 1px solid #e5e5e5; padding: 9px 0 8px 0;
} .sidebarMenu ul li a {
text-transform: uppercase; color: #5a5a5a; font-weight: 900;
} .sidebarMenu ul li a:hover {
text-decoration: none; color: #000000;
} .sidebarMenu ul li a b {
margin-right: 10px;
} .sidebarMenu .active a {
color: #000000 !important;
} .recentPostsSidebar {
padding: 12px 18px;
} .recentPostsSidebar .tabPost {
padding: 0;
} /* Gallery ==================================================*/ .galleryNav {
display: table; margin: 36px auto 36px auto !important;
} .galleryNav li {
color: #000000; text-transform: uppercase; font-weight: 900;
} .galleryImages {
margin-bottom: 18px; list-style: none;
} .galleryImages li {
margin-bottom: 36px; overflow: hidden;
} .galleryImages li figure {
position: relative;
} .galleryImages li figure a {
background: #000000; display: inline-block; *display: inline; /* IE7 inline-block hack */
*zoom: 1; display: table; margin: 0 auto; position: relative;
} .galleryImages li figure a img {
display: table; margin: 0 auto; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear;
} .galleryImages li figure a:hover::after {
content: '+'; display: block; color: white; font-size: 56px; font-weight: 900; position: absolute; top: 50%; left: 50%; margin-left: -20px; margin-top: -20px; opacity: 0.5; filter: alpha(opacity=50);
} .galleryImages li figure a:hover img {
opacity: 0.5; filter: alpha(opacity=50);
} .galleryImages li figure a img{width: 100%;} .galleryImages li figure a:hover ~ figcaption {
bottom: 30px; opacity: 1; filter: alpha(opacity=100);
} .galleryImages li figure figcaption {
position: absolute; bottom: -30px; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; display: block; width: 100%; opacity: 0.5; filter: alpha(opacity=50); text-align: center; color: white; text-transform: uppercase; font-weight: 900; pointer-events: none; overflow: hidden; text-overflow: ellipsis; line-height: 18px; max-height: 18px;
} /* Contact ==================================================*/ /*Map*/ .map {
padding: 0; margin-bottom: 36px;
} .map figure {
display: table; width: 100%; height: 100%;
} .map figure iframe {
width: 100%; max-height: 621px;
} /*Contact Form*/ .contactForm {
padding: 18px 27px; margin-bottom: 36px;
} .contactForm h1 {
margin-bottom: 18px;
} .contactForm p {
*zoom: 1; position: relative;
} .contactForm p:before, .contactForm p:after {
display: table; content: ""; line-height: 0;
} .contactForm p:after {
clear: both;
} .contactForm p label {
padding: 4px 0;
} .contactForm p textarea {
height: 126px; resize: vertical;
} .contactForm p b {
position: absolute; bottom: -20px; font-size: 1rem; opacity: 0.65; filter: alpha(opacity=65); -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear;
} /*Contact info*/ address ul li {
border-top: 1px solid #e5e5e5; padding: 7px 0 8px; color: #252525;
} address ul li a:hover {
text-decoration: none; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear;
} address ul li:last-child {
border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
} address ul li b {
margin: 0 10px 0 0; position: relative; top: 4px;
} .socialBar ul li {
font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0;
} .socialBar ul li a {
width: 29px; height: 29px; font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; display: block; padding: 0; margin: 0; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; background-color: red;
} .socialBar ul li a:hover {
background-color: #c7c7c7 !important;
} .socialBar ul li:nth-child(1) a {
background: url(../img/social.png) 0 0 no-repeat; background-color: #000000;
} .socialBar ul li:nth-child(2) a {
background: url(../img/social.png) -29px 0 no-repeat; background-color: #000000;
} .socialBar ul li:nth-child(3) a {
background: url(../img/social.png) -58px 0 no-repeat; background-color: #000000;
} .socialBar ul li:nth-child(4) a {
background: url(../img/social.png) -87px 0 no-repeat; background-color: #000000;
} /* Blog pages ==================================================*/ /*Post date*/ .blogItems {
list-style: none; padding: 36px 0;
} .blogItems > li {
padding-bottom: 9px;
} .blogItems a:hover {
text-decoration: none;
} .blogItems ul {
list-style: none;
} .postDate ul {
max-width: 140px;
} .postDate ul li {
margin-left: 0 !important; text-transform: uppercase; text-align: center; height: 54px;
} .postDate ul .date {
color: white; font-size: 1.8rem; padding: 5px 0; width: 50% !important; float: left;
} .postDate ul .date b {
font-size: 2.7rem; line-height: 2.7rem;
} .postDate ul .comment {
background: #000000; width: 50% !important; float: left;
} .postDate ul .comment a {
color: #4a4a4a; font-size: 1.8rem; font-weight: 900; display: block; padding-top: 5px; padding-bottom: 6px; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear;
} .postDate ul .comment a:hover {
color: white;
} .postDate ul .comment a:hover b {
background: url(../img/comment_icon.png) -21px 0 no-repeat;
} .postDate ul .comment a b {
display: table; margin: 3px auto;
} .postDate ul .author {
text-align: center; background: #eaeaea; height: auto;
} .postDate ul .author h3 {
margin: 0; padding: 9px 0;
} .blogBreadcrumb a {
font-weight: 900;
} .blogBreadcrumb li.active {
text-decoration: none; font-weight: 900;
} .readMore {
font-weight: 900; text-transform: uppercase; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear;
} .readMore:hover {
color: #000000 !important;
} /*Pagination*/ .pagination {
list-style: none; padding: 18px 0;
} .pagination li {
float: left; color: white;
} .pagination li a {
padding: 5px; color: white; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear;
} .pagination li a:hover {
text-decoration: none;
} .arrowRight a, .arrowLeft a {
background: #4a4a4a;
} .arrowRight a:hover, .arrowLeft a:hover {
color: white !important;
} .arrowRight {
margin-left: 18px;
} .arrowLeft {
margin-right: 18px;
} /* Comments ==================================================*/ .commentsPost {
list-style: none;
} .commentsPost li {
margin-top: 18px; margin-bottom: 18px;
} .commentsPost li > ul {
margin-top: 18px;
} .commentMess {
padding: 9px 18px;
} .commentMess h3 {
margin: 0;
} .commentMess h3 b {
margin-left: 20px; color: #c5c5c5;
} /* Single project ==================================================*/ .showPhotoProject {
padding: 60px 0; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; max-height: 600px;
} .photoControl {
padding: 9px 0; margin-bottom: 34px;
} .photoControl h2 {
color: white;
} .photoControl ul {
margin: 0; padding: 8px 0; color: #5a5a5a;
} .photoControl ul li a {
color: #5a5a5a; text-transform: uppercase; line-height: 3.8rem; margin: 9px 0; font-weight: 900; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear;
} .photoControl ul li a:hover {
text-decoration: none;
} .photoInfo li {
padding: 9px 0; border-bottom: 1px solid #e5e5e5; text-transform: uppercase;
} .photoInfo li b {
width: 100px; display: inline-block; *display: inline; /* IE7 inline-block hack */
*zoom: 1;
} /* Services ==================================================*/ .servicesFeatures {
padding: 36px 0 18px 0; list-style: none;
} .servicesFeatures li h3 {
text-align: center;
} .servicesFeatures li figure {
padding: 5px; border: 1px solid #e5e5e5; display: table; margin: 0 auto;
} .servicesFeatures li figure a {
-webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear;
} .servicesFeatures li figure a:hover img {
-moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH";
} /*The team*/ .introTeam {
margin: 9px 0; -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); background: url(../img/grey.png) 0 0;
} .introTeam .container {
background: url(../img/our_team.png) right bottom no-repeat;
} .introMess {
margin: 72px 0;
} .introMess h2 {
color: white; padding: 9px 20px; display: table;
} .theTeam {
background: #d5d5d5;
} .theTeam h1 {
color: white;
} /*Progress Bar*/ .progress {
overflow: hidden; height: 18px; margin-bottom: 19px; padding: 3px; border: 1px solid #e5e5e5; background-color: #f1f1f1; -webkit-box-shadow: inset 0 0 0 1px #ffffff; -moz-box-shadow: inset 0 0 0 1px #ffffff; box-shadow: inset 0 0 0 1px #ffffff;
} .progress .bar {
width: 0%; height: 100%; color: #ffffff; float: left; font-size: 12px; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: width 0.6s ease; -moz-transition: width 0.6s ease; -o-transition: width 0.6s ease; transition: width 0.6s ease;
} /*Form validation*/ /* Footer ==================================================*/ .mainFooter {
color: #615e5e;
} .mainFooter h2 {
color: #4a4a4a;
} .clients {
background: #4a4a4a; height: 90px;
} .clients ul {
margin-top: 30px;
} .clients ul li {
margin: 0 22px;
} .footerWidgets {
background: #000000; padding: 45px 0;
} .footerWidgets .brand {
margin: 0; margin-bottom: 20px;
} .flickrImages {
margin-top: 10px;
} .flickrImages li {
margin-bottom: 10px;
} .recentPosts {
list-style: none; margin: 0;
} .recentPosts li {
padding-left: 25px; min-height: 18px; position: relative;
} .recentPosts li::before, .recentPosts li::after {
content: ; display: block; width: 17px; height: 23px; overflow: hidden; position: absolute; top: 0; left: 0;
} .recentPosts li::after {
background: url(../img/recent_posts.png) 0 0 no-repeat; z-index: 10;
} .recentPosts li a {
color: #4a4a4a; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear;
} .recentPosts li a:hover {
color: #7d7d7d; text-decoration: none;
} .copyRight {
max-height: 45px;
} .copyRight p {
line-height: 45px; margin: 0;
} @-ms-viewport {
} @media (min-width: 768px) and (max-width: 979px) {
.mainNav nav,
.mainNav .span4 {
display: block; width: 100%; color: #FFFFFF;
}
.mainNav .brand {
margin: 25px auto;
display: block;
}
.mainNav .menuMobile {
display: block;
margin-bottom: 18px;
position: relative;
}
.mainNav .menu {
float: none;
padding: 25px 0;
}
.mainNav .menu > li {
display: block;
padding: 10px 0;
}
.mainNav .menu > li a {
font-weight: 300;
}
.mainNav .menu > li a:hover {
background: none;
}
.mainNav .menu > li > ul {
position: relative;
top: 0;
left: 0;
width: 100%;
display: block;
}
.nav-tabs > li > a {
width: 74px;
height: 33px;
line-height: 36px;
}
.nav-tabs > li:last-child > a {
width: 76px;
}
.clients ul {
width: 650px;
margin-left: auto;
margin-right: auto;
}
.clients ul li {
margin: 0;
padding: 0;
}
.clients img {
width: 80%;
margin: 0 auto;
display: block;
}
.copyRight {
font-size: 1rem;
}
.copyRight p {
display: block;
text-align: center;
}
.introTeam .container {
background-size: 50% auto;
}
.rs_mainslider_items_text {
display: none;
}
} @media (max-width: 767px) {
body {
padding: 0;
}
.container {
padding: 0 20px;
}
.mainNav nav,
.mainNav .span4 {
display: block;
width: 100%;
}
.mainNav .brand {
margin: 25px auto;
display: block;
}
.mainNav .menuMobile {
display: block;
margin-bottom: 18px;
position: relative;
}
.mainNav .menu {
float: none;
padding: 25px 0;
}
.mainNav .menu > li {
display: block;
padding: 10px 0;
}
.mainNav .menu > li a {
font-weight: 300;
}
.mainNav .menu > li a:hover {
background: none;
}
.mainNav .menu > li > ul {
position: relative;
top: 0;
left: 0;
width: 100%;
display: block;
}
.clients {
height: 100%;
}
.clients ul li {
display: block;
margin: 10px 0;
padding: 0;
}
.clients img {
width: auto;
margin: 0 auto;
display: block;
}
.copyRight {
font-size: 1rem;
}
.copyRight p {
display: block;
text-align: center;
}
.galleryNav {
display: block;
}
.galleryNav li {
display: block !important;
}
.galleryNav li a {
display: block;
}
.rs_mainslider_items_text {
display: none;
}
} @media print {
} @media (min-width: 768px) and (max-width: 979px) {
} @media (max-width: 767px) {
} @media (max-width: 480px) {
.mainNav nav,
.mainNav .span4 {
display: block;
width: 100%;
}
.mainNav .brand {
margin: 25px auto;
display: block;
}
.nav-tabs > li > a {
width: 74px;
height: 33px;
line-height: 36px;
}
.nav-tabs > li:last-child > a {
width: 76px;
}
.copyRight {
font-size: 1rem;
}
.copyRight p {
display: block;
text-align: center;
font-size: 1rem;
line-height: 1.8rem;
}
} @media (max-width: 979px) {
} @media (min-width: 980px) {
.menuMobile {
display: none;
margin-bottom: 0;
}
} /*Pretty photo*/ /* ------------------------------------------------------------------------ This you can edit.
*/
/* ---------------------------------- Default Theme ----------------------------------- */ .ppt {
display: none !important;
} .pp_social {
display: none !important;
} div.pp_default .pp_top, div.pp_default .pp_top .pp_middle, div.pp_default .pp_top .pp_left, div.pp_default .pp_top .pp_right, div.pp_default .pp_bottom, div.pp_default .pp_bottom .pp_left, div.pp_default .pp_bottom .pp_middle, div.pp_default .pp_bottom .pp_right {
height: 13px;
} div.pp_default .pp_top .pp_left {
background: url(../img/prettyPhoto/default/sprite.png) -78px -93px no-repeat;
} /* Top left corner */ div.pp_default .pp_top .pp_middle {
background: url(../img/prettyPhoto/default/sprite_x.png) top left repeat-x;
} /* Top pattern/color */ div.pp_default .pp_top .pp_right {
background: url(../img/prettyPhoto/default/sprite.png) -112px -93px no-repeat;
} /* Top right corner */ div.pp_default .pp_content .ppt {
color: #f8f8f8;
} div.pp_default .pp_content_container .pp_left {
background: url(../img/prettyPhoto/default/sprite_y.png) -7px 0 repeat-y; padding-left: 13px;
} div.pp_default .pp_content_container .pp_right {
background: url(../img/prettyPhoto/default/sprite_y.png) top right repeat-y; padding-right: 13px;
} div.pp_default .pp_content {
background-color: #fff;
} /* Content background */ div.pp_default .pp_next:hover {
background: url(../img/prettyPhoto/default/sprite_next.png) center right no-repeat; cursor: pointer;
} /* Next button */ div.pp_default .pp_previous:hover {
background: url(../img/prettyPhoto/default/sprite_prev.png) center left no-repeat; cursor: pointer;
} /* Previous button */ div.pp_default .pp_expand {
background: url(../img/prettyPhoto/default/sprite.png) 0 -29px no-repeat; cursor: pointer; width: 28px; height: 28px;
} /* Expand button */ div.pp_default .pp_expand:hover {
background: url(../img/prettyPhoto/default/sprite.png) 0 -56px no-repeat; cursor: pointer;
} /* Expand button hover */ div.pp_default .pp_contract {
background: url(../img/prettyPhoto/default/sprite.png) 0 -84px no-repeat; cursor: pointer; width: 28px; height: 28px;
} /* Contract button */ div.pp_default .pp_contract:hover {
background: url(../img/prettyPhoto/default/sprite.png) 0 -113px no-repeat; cursor: pointer;
} /* Contract button hover */ div.pp_default .pp_close {
width: 30px; height: 30px; background: url(../img/prettyPhoto/default/sprite.png) 2px 1px no-repeat; cursor: pointer;
} /* Close button */ div.pp_default #pp_full_res .pp_inline {
color: #000;
} div.pp_default .pp_gallery ul li a {
background: url(../img/prettyPhoto/default/default_thumb.png) center center #f8f8f8; border: 1px solid #aaa;
} div.pp_default .pp_gallery ul li a:hover, div.pp_default .pp_gallery ul li.selected a {
border-color: #fff;
} div.pp_default .pp_social {
margin-top: 7px;
} div.pp_default .pp_gallery a.pp_arrow_previous, div.pp_default .pp_gallery a.pp_arrow_next {
position: static; left: auto;
} div.pp_default .pp_nav .pp_play, div.pp_default .pp_nav .pp_pause {
background: url(../img/prettyPhoto/default/sprite.png) -51px 1px no-repeat; height: 30px; width: 30px;
} div.pp_default .pp_nav .pp_pause {
background-position: -51px -29px;
} div.pp_default .pp_details {
position: relative;
} div.pp_default a.pp_arrow_previous, div.pp_default a.pp_arrow_next {
background: url(../img/prettyPhoto/default/sprite.png) -31px -3px no-repeat; height: 20px; margin: 4px 0 0 0; width: 20px;
} div.pp_default a.pp_arrow_next {
left: 52px; background-position: -82px -3px;
} /* The next arrow in the bottom nav */ div.pp_default .pp_content_container .pp_details {
margin-top: 5px;
} div.pp_default .pp_nav {
clear: none; height: 30px; width: 110px; position: relative;
} div.pp_default .pp_nav .currentTextHolder {
font-family: Georgia; font-style: italic; color: #999; font-size: 11px; left: 75px; line-height: 25px; margin: 0; padding: 0 0 0 10px; position: absolute; top: 2px;
} div.pp_default .pp_close:hover, div.pp_default .pp_nav .pp_play:hover, div.pp_default .pp_nav .pp_pause:hover, div.pp_default .pp_arrow_next:hover, div.pp_default .pp_arrow_previous:hover {
opacity: 0.7;
} div.pp_default .pp_description {
font-size: 11px; font-weight: bold; line-height: 14px; margin: 5px 50px 5px 0;
} div.pp_default .pp_bottom .pp_left {
background: url(../img/prettyPhoto/default/sprite.png) -78px -127px no-repeat;
} /* Bottom left corner */ div.pp_default .pp_bottom .pp_middle {
background: url(../img/prettyPhoto/default/sprite_x.png) bottom left repeat-x;
} /* Bottom pattern/color */ div.pp_default .pp_bottom .pp_right {
background: url(../img/prettyPhoto/default/sprite.png) -112px -127px no-repeat;
} /* Bottom right corner */ div.pp_default .pp_loaderIcon {
background: url(../img/prettyPhoto/default/loader.gif) center center no-repeat;
} /* Loader icon */ /* ---------------------------------- Light Rounded Theme ----------------------------------- */ div.light_rounded .pp_top .pp_left {
background: url(../img/prettyPhoto/light_rounded/sprite.png) -88px -53px no-repeat;
} /* Top left corner */ div.light_rounded .pp_top .pp_middle {
background: #fff;
} /* Top pattern/color */ div.light_rounded .pp_top .pp_right {
background: url(../img/prettyPhoto/light_rounded/sprite.png) -110px -53px no-repeat;
} /* Top right corner */ div.light_rounded .pp_content .ppt {
color: #000;
} div.light_rounded .pp_content_container .pp_left, div.light_rounded .pp_content_container .pp_right {
background: #fff;
} div.light_rounded .pp_content {
background-color: #fff;
} /* Content background */ div.light_rounded .pp_next:hover {
background: url(../img/prettyPhoto/light_rounded/btnNext.png) center right no-repeat; cursor: pointer;
} /* Next button */ div.light_rounded .pp_previous:hover {
background: url(../img/prettyPhoto/light_rounded/btnPrevious.png) center left no-repeat; cursor: pointer;
} /* Previous button */ div.light_rounded .pp_expand {
background: url(../img/prettyPhoto/light_rounded/sprite.png) -31px -26px no-repeat; cursor: pointer;
} /* Expand button */ div.light_rounded .pp_expand:hover {
background: url(../img/prettyPhoto/light_rounded/sprite.png) -31px -47px no-repeat; cursor: pointer;
} /* Expand button hover */ div.light_rounded .pp_contract {
background: url(../img/prettyPhoto/light_rounded/sprite.png) 0 -26px no-repeat; cursor: pointer;
} /* Contract button */ div.light_rounded .pp_contract:hover {
background: url(../img/prettyPhoto/light_rounded/sprite.png) 0 -47px no-repeat; cursor: pointer;
} /* Contract button hover */ div.light_rounded .pp_close {
width: 75px; height: 22px; background: url(../img/prettyPhoto/light_rounded/sprite.png) -1px -1px no-repeat; cursor: pointer;
} /* Close button */ div.light_rounded .pp_details {
position: relative;
} div.light_rounded .pp_description {
margin-right: 85px;
} div.light_rounded #pp_full_res .pp_inline {
color: #000;
} div.light_rounded .pp_gallery a.pp_arrow_previous, div.light_rounded .pp_gallery a.pp_arrow_next {
margin-top: 12px !important;
} div.light_rounded .pp_nav .pp_play {
background: url(../img/prettyPhoto/light_rounded/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px;
} div.light_rounded .pp_nav .pp_pause {
background: url(../img/prettyPhoto/light_rounded/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px;
} div.light_rounded .pp_arrow_previous {
background: url(../img/prettyPhoto/light_rounded/sprite.png) 0 -71px no-repeat;
} /* The previous arrow in the bottom nav */ div.light_rounded .pp_arrow_previous.disabled {
background-position: 0 -87px; cursor: default;
} div.light_rounded .pp_arrow_next {
background: url(../img/prettyPhoto/light_rounded/sprite.png) -22px -71px no-repeat;
} /* The next arrow in the bottom nav */ div.light_rounded .pp_arrow_next.disabled {
background-position: -22px -87px; cursor: default;
} div.light_rounded .pp_bottom .pp_left {
background: url(../img/prettyPhoto/light_rounded/sprite.png) -88px -80px no-repeat;
} /* Bottom left corner */ div.light_rounded .pp_bottom .pp_middle {
background: #fff;
} /* Bottom pattern/color */ div.light_rounded .pp_bottom .pp_right {
background: url(../img/prettyPhoto/light_rounded/sprite.png) -110px -80px no-repeat;
} /* Bottom right corner */ div.light_rounded .pp_loaderIcon {
background: url(../img/prettyPhoto/light_rounded/loader.gif) center center no-repeat;
} /* Loader icon */ /* ---------------------------------- Dark Rounded Theme ----------------------------------- */ div.dark_rounded .pp_top .pp_left {
background: url(../img/prettyPhoto/dark_rounded/sprite.png) -88px -53px no-repeat;
} /* Top left corner */ div.dark_rounded .pp_top .pp_middle {
background: url(../img/prettyPhoto/dark_rounded/contentPattern.png) top left repeat;
} /* Top pattern/color */ div.dark_rounded .pp_top .pp_right {
background: url(../img/prettyPhoto/dark_rounded/sprite.png) -110px -53px no-repeat;
} /* Top right corner */ div.dark_rounded .pp_content_container .pp_left {
background: url(../img/prettyPhoto/dark_rounded/contentPattern.png) top left repeat-y;
} /* Left Content background */ div.dark_rounded .pp_content_container .pp_right {
background: url(../img/prettyPhoto/dark_rounded/contentPattern.png) top right repeat-y;
} /* Right Content background */ div.dark_rounded .pp_content {
background: url(../img/prettyPhoto/dark_rounded/contentPattern.png) top left repeat;
} /* Content background */ div.dark_rounded .pp_next:hover {
background: url(../img/prettyPhoto/dark_rounded/btnNext.png) center right no-repeat; cursor: pointer;
} /* Next button */ div.dark_rounded .pp_previous:hover {
background: url(../img/prettyPhoto/dark_rounded/btnPrevious.png) center left no-repeat; cursor: pointer;
} /* Previous button */ div.dark_rounded .pp_expand {
background: url(../img/prettyPhoto/dark_rounded/sprite.png) -31px -26px no-repeat; cursor: pointer;
} /* Expand button */ div.dark_rounded .pp_expand:hover {
background: url(../img/prettyPhoto/dark_rounded/sprite.png) -31px -47px no-repeat; cursor: pointer;
} /* Expand button hover */ div.dark_rounded .pp_contract {
background: url(../img/prettyPhoto/dark_rounded/sprite.png) 0 -26px no-repeat; cursor: pointer;
} /* Contract button */ div.dark_rounded .pp_contract:hover {
background: url(../img/prettyPhoto/dark_rounded/sprite.png) 0 -47px no-repeat; cursor: pointer;
} /* Contract button hover */ div.dark_rounded .pp_close {
width: 75px; height: 22px; background: url(../img/prettyPhoto/dark_rounded/sprite.png) -1px -1px no-repeat; cursor: pointer;
} /* Close button */ div.dark_rounded .pp_details {
position: relative;
} div.dark_rounded .pp_description {
margin-right: 85px;
} div.dark_rounded .currentTextHolder {
color: #c4c4c4;
} div.dark_rounded .pp_description {
color: #fff;
} div.dark_rounded #pp_full_res .pp_inline {
color: #fff;
} div.dark_rounded .pp_gallery a.pp_arrow_previous, div.dark_rounded .pp_gallery a.pp_arrow_next {
margin-top: 12px !important;
} div.dark_rounded .pp_nav .pp_play {
background: url(../img/prettyPhoto/dark_rounded/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px;
} div.dark_rounded .pp_nav .pp_pause {
background: url(../img/prettyPhoto/dark_rounded/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px;
} div.dark_rounded .pp_arrow_previous {
background: url(../img/prettyPhoto/dark_rounded/sprite.png) 0 -71px no-repeat;
} /* The previous arrow in the bottom nav */ div.dark_rounded .pp_arrow_previous.disabled {
background-position: 0 -87px; cursor: default;
} div.dark_rounded .pp_arrow_next {
background: url(../img/prettyPhoto/dark_rounded/sprite.png) -22px -71px no-repeat;
} /* The next arrow in the bottom nav */ div.dark_rounded .pp_arrow_next.disabled {
background-position: -22px -87px; cursor: default;
} div.dark_rounded .pp_bottom .pp_left {
background: url(../img/prettyPhoto/dark_rounded/sprite.png) -88px -80px no-repeat;
} /* Bottom left corner */ div.dark_rounded .pp_bottom .pp_middle {
background: url(../img/prettyPhoto/dark_rounded/contentPattern.png) top left repeat;
} /* Bottom pattern/color */ div.dark_rounded .pp_bottom .pp_right {
background: url(../img/prettyPhoto/dark_rounded/sprite.png) -110px -80px no-repeat;
} /* Bottom right corner */ div.dark_rounded .pp_loaderIcon {
background: url(../img/prettyPhoto/dark_rounded/loader.gif) center center no-repeat;
} /* Loader icon */ /* ---------------------------------- Dark Square Theme ----------------------------------- */ div.dark_square .pp_left, div.dark_square .pp_middle, div.dark_square .pp_right, div.dark_square .pp_content {
background: #000;
} div.dark_square .currentTextHolder {
color: #c4c4c4;
} div.dark_square .pp_description {
color: #fff;
} div.dark_square .pp_loaderIcon {
background: url(../img/prettyPhoto/dark_square/loader.gif) center center no-repeat;
} /* Loader icon */ div.dark_square .pp_expand {
background: url(../img/prettyPhoto/dark_square/sprite.png) -31px -26px no-repeat; cursor: pointer;
} /* Expand button */ div.dark_square .pp_expand:hover {
background: url(../img/prettyPhoto/dark_square/sprite.png) -31px -47px no-repeat; cursor: pointer;
} /* Expand button hover */ div.dark_square .pp_contract {
background: url(../img/prettyPhoto/dark_square/sprite.png) 0 -26px no-repeat; cursor: pointer;
} /* Contract button */ div.dark_square .pp_contract:hover {
background: url(../img/prettyPhoto/dark_square/sprite.png) 0 -47px no-repeat; cursor: pointer;
} /* Contract button hover */ div.dark_square .pp_close {
width: 75px; height: 22px; background: url(../img/prettyPhoto/dark_square/sprite.png) -1px -1px no-repeat; cursor: pointer;
} /* Close button */ div.dark_square .pp_details {
position: relative;
} div.dark_square .pp_description {
margin: 0 85px 0 0;
} div.dark_square #pp_full_res .pp_inline {
color: #fff;
} div.dark_square .pp_gallery a.pp_arrow_previous, div.dark_square .pp_gallery a.pp_arrow_next {
margin-top: 12px !important;
} div.dark_square .pp_nav {
clear: none;
} div.dark_square .pp_nav .pp_play {
background: url(../img/prettyPhoto/dark_square/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px;
} div.dark_square .pp_nav .pp_pause {
background: url(../img/prettyPhoto/dark_square/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px;
} div.dark_square .pp_arrow_previous {
background: url(../img/prettyPhoto/dark_square/sprite.png) 0 -71px no-repeat;
} /* The previous arrow in the bottom nav */ div.dark_square .pp_arrow_previous.disabled {
background-position: 0 -87px; cursor: default;
} div.dark_square .pp_arrow_next {
background: url(../img/prettyPhoto/dark_square/sprite.png) -22px -71px no-repeat;
} /* The next arrow in the bottom nav */ div.dark_square .pp_arrow_next.disabled {
background-position: -22px -87px; cursor: default;
} div.dark_square .pp_next:hover {
background: url(../img/prettyPhoto/dark_square/btnNext.png) center right no-repeat; cursor: pointer;
} /* Next button */ div.dark_square .pp_previous:hover {
background: url(../img/prettyPhoto/dark_square/btnPrevious.png) center left no-repeat; cursor: pointer;
} /* Previous button */ /* ---------------------------------- Light Square Theme ----------------------------------- */ div.light_square .pp_left, div.light_square .pp_middle, div.light_square .pp_right, div.light_square .pp_content {
background: #fff;
} div.light_square .pp_content .ppt {
color: #000;
} div.light_square .pp_expand {
background: url(../img/prettyPhoto/light_square/sprite.png) -31px -26px no-repeat; cursor: pointer;
} /* Expand button */ div.light_square .pp_expand:hover {
background: url(../img/prettyPhoto/light_square/sprite.png) -31px -47px no-repeat; cursor: pointer;
} /* Expand button hover */ div.light_square .pp_contract {
background: url(../img/prettyPhoto/light_square/sprite.png) 0 -26px no-repeat; cursor: pointer;
} /* Contract button */ div.light_square .pp_contract:hover {
background: url(../img/prettyPhoto/light_square/sprite.png) 0 -47px no-repeat; cursor: pointer;
} /* Contract button hover */ div.light_square .pp_close {
width: 75px; height: 22px; background: url(../img/prettyPhoto/light_square/sprite.png) -1px -1px no-repeat; cursor: pointer;
} /* Close button */ div.light_square .pp_details {
position: relative;
} div.light_square .pp_description {
margin-right: 85px;
} div.light_square #pp_full_res .pp_inline {
color: #000;
} div.light_square .pp_gallery a.pp_arrow_previous, div.light_square .pp_gallery a.pp_arrow_next {
margin-top: 12px !important;
} div.light_square .pp_nav .pp_play {
background: url(../img/prettyPhoto/light_square/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px;
} div.light_square .pp_nav .pp_pause {
background: url(../img/prettyPhoto/light_square/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px;
} div.light_square .pp_arrow_previous {
background: url(../img/prettyPhoto/light_square/sprite.png) 0 -71px no-repeat;
} /* The previous arrow in the bottom nav */ div.light_square .pp_arrow_previous.disabled {
background-position: 0 -87px; cursor: default;
} div.light_square .pp_arrow_next {
background: url(../img/prettyPhoto/light_square/sprite.png) -22px -71px no-repeat;
} /* The next arrow in the bottom nav */ div.light_square .pp_arrow_next.disabled {
background-position: -22px -87px; cursor: default;
} div.light_square .pp_next:hover {
background: url(../img/prettyPhoto/light_square/btnNext.png) center right no-repeat; cursor: pointer;
} /* Next button */ div.light_square .pp_previous:hover {
background: url(../img/prettyPhoto/light_square/btnPrevious.png) center left no-repeat; cursor: pointer;
} /* Previous button */ div.light_square .pp_loaderIcon {
background: url(../img/prettyPhoto/light_rounded/loader.gif) center center no-repeat;
} /* Loader icon */ /* ---------------------------------- Facebook style Theme ----------------------------------- */ div.facebook .pp_top .pp_left {
background: url(../img/prettyPhoto/facebook/sprite.png) -88px -53px no-repeat;
} /* Top left corner */ div.facebook .pp_top .pp_middle {
background: url(../img/prettyPhoto/facebook/contentPatternTop.png) top left repeat-x;
} /* Top pattern/color */ div.facebook .pp_top .pp_right {
background: url(../img/prettyPhoto/facebook/sprite.png) -110px -53px no-repeat;
} /* Top right corner */ div.facebook .pp_content .ppt {
color: #000;
} div.facebook .pp_content_container .pp_left {
background: url(../img/prettyPhoto/facebook/contentPatternLeft.png) top left repeat-y;
} /* Content background */ div.facebook .pp_content_container .pp_right {
background: url(../img/prettyPhoto/facebook/contentPatternRight.png) top right repeat-y;
} /* Content background */ div.facebook .pp_content {
background: #fff;
} /* Content background */ div.facebook .pp_expand {
background: url(../img/prettyPhoto/facebook/sprite.png) -31px -26px no-repeat; cursor: pointer;
} /* Expand button */ div.facebook .pp_expand:hover {
background: url(../img/prettyPhoto/facebook/sprite.png) -31px -47px no-repeat; cursor: pointer;
} /* Expand button hover */ div.facebook .pp_contract {
background: url(../img/prettyPhoto/facebook/sprite.png) 0 -26px no-repeat; cursor: pointer;
} /* Contract button */ div.facebook .pp_contract:hover {
background: url(../img/prettyPhoto/facebook/sprite.png) 0 -47px no-repeat; cursor: pointer;
} /* Contract button hover */ div.facebook .pp_close {
width: 22px; height: 22px; background: url(../img/prettyPhoto/facebook/sprite.png) -1px -1px no-repeat; cursor: pointer;
} /* Close button */ div.facebook .pp_details {
position: relative;
} div.facebook .pp_description {
margin: 0 37px 0 0;
} div.facebook #pp_full_res .pp_inline {
color: #000;
} div.facebook .pp_loaderIcon {
background: url(../img/prettyPhoto/facebook/loader.gif) center center no-repeat;
} /* Loader icon */ div.facebook .pp_arrow_previous {
background: url(../img/prettyPhoto/facebook/sprite.png) 0 -71px no-repeat; height: 22px; margin-top: 0; width: 22px;
} /* The previous arrow in the bottom nav */ div.facebook .pp_arrow_previous.disabled {
background-position: 0 -96px; cursor: default;
} div.facebook .pp_arrow_next {
background: url(../img/prettyPhoto/facebook/sprite.png) -32px -71px no-repeat; height: 22px; margin-top: 0; width: 22px;
} /* The next arrow in the bottom nav */ div.facebook .pp_arrow_next.disabled {
background-position: -32px -96px; cursor: default;
} div.facebook .pp_nav {
margin-top: 0;
} div.facebook .pp_nav p {
font-size: 15px; padding: 0 3px 0 4px;
} div.facebook .pp_nav .pp_play {
background: url(../img/prettyPhoto/facebook/sprite.png) -1px -123px no-repeat; height: 22px; width: 22px;
} div.facebook .pp_nav .pp_pause {
background: url(../img/prettyPhoto/facebook/sprite.png) -32px -123px no-repeat; height: 22px; width: 22px;
} div.facebook .pp_next:hover {
background: url(../img/prettyPhoto/facebook/btnNext.png) center right no-repeat; cursor: pointer;
} /* Next button */ div.facebook .pp_previous:hover {
background: url(../img/prettyPhoto/facebook/btnPrevious.png) center left no-repeat; cursor: pointer;
} /* Previous button */ div.facebook .pp_bottom .pp_left {
background: url(../img/prettyPhoto/facebook/sprite.png) -88px -80px no-repeat;
} /* Bottom left corner */ div.facebook .pp_bottom .pp_middle {
background: url(../img/prettyPhoto/facebook/contentPatternBottom.png) top left repeat-x;
} /* Bottom pattern/color */ div.facebook .pp_bottom .pp_right {
background: url(../img/prettyPhoto/facebook/sprite.png) -110px -80px no-repeat;
} /* Bottom right corner */ /* ------------------------------------------------------------------------ DO NOT CHANGE
*/
div.pp_pic_holder a:focus {
outline: none;
} div.pp_overlay {
background: #000; display: none; left: 0; position: absolute; top: 0; width: 100%; z-index: 9500;
} div.pp_pic_holder {
display: none; position: absolute; width: 100px; z-index: 10000;
} .pp_top {
height: 20px; position: relative;
}
- html .pp_top {
padding: 0 20px;
} .pp_top .pp_left {
height: 20px; left: 0; position: absolute; width: 20px;
} .pp_top .pp_middle {
height: 20px; left: 20px; position: absolute; right: 20px;
}
- html .pp_top .pp_middle {
left: 0; position: static;
} .pp_top .pp_right {
height: 20px; left: auto; position: absolute; right: 0; top: 0; width: 20px;
} .pp_content {
height: 40px; min-width: 40px;
}
- html .pp_content {
width: 40px;
} .pp_fade {
display: none;
} .pp_content_container {
position: relative; text-align: left; width: 100%;
} .pp_content_container .pp_left {
padding-left: 20px;
} .pp_content_container .pp_right {
padding-right: 20px;
} .pp_content_container .pp_details {
float: left; margin: 10px 0 2px 0;
} .pp_description {
display: none; margin: 0;
} .pp_social {
float: left; margin: 0;
} .pp_social .facebook {
float: left; margin-left: 5px; width: 55px; overflow: hidden;
} .pp_social .twitter {
float: left;
} .pp_nav {
clear: right; float: left; margin: 3px 10px 0 0;
} .pp_nav p {
float: left; margin: 2px 4px; white-space: nowrap;
} .pp_nav .pp_play, .pp_nav .pp_pause {
float: left; margin-right: 4px; text-indent: -10000px;
} a.pp_arrow_previous, a.pp_arrow_next {
display: block; float: left; height: 15px; margin-top: 3px; overflow: hidden; text-indent: -10000px; width: 14px;
} .pp_hoverContainer {
position: absolute; top: 0; width: 100%; z-index: 2000;
} .pp_gallery {
display: none; left: 50%; margin-top: -50px; position: absolute; z-index: 10000;
} .pp_gallery div {
float: left; overflow: hidden; position: relative;
} .pp_gallery ul {
float: left; height: 35px; margin: 0 0 0 5px; padding: 0; position: relative; white-space: nowrap;
} .pp_gallery ul a {
border: 1px #000 solid; border: 1px rgba(0, 0, 0, 0.5) solid; display: block; float: left; height: 33px; overflow: hidden;
} .pp_gallery ul a:hover, .pp_gallery li.selected a {
border-color: #fff;
} .pp_gallery ul a img {
border: 0;
} .pp_gallery li {
display: block; float: left; margin: 0 5px 0 0; padding: 0;
} .pp_gallery li.default a {
background: url(../img/prettyPhoto/facebook/default_thumbnail.gif) 0 0 no-repeat; display: block; height: 33px; width: 50px;
} .pp_gallery li.default a img {
display: none;
} .pp_gallery .pp_arrow_previous, .pp_gallery .pp_arrow_next {
margin-top: 7px !important;
} a.pp_next {
background: url(../img/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat; display: block; float: right; height: 100%; text-indent: -10000px; width: 49%;
} a.pp_previous {
background: url(../img/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat; display: block; float: left; height: 100%; text-indent: -10000px; width: 49%;
} a.pp_expand, a.pp_contract {
cursor: pointer; display: none; height: 20px; position: absolute; right: 30px; text-indent: -10000px; top: 10px; width: 20px; z-index: 20000;
} a.pp_close {
position: absolute; right: 0; top: 0; display: block; line-height: 22px; text-indent: -10000px;
} .pp_bottom {
height: 20px; position: relative;
}
- html .pp_bottom {
padding: 0 20px;
} .pp_bottom .pp_left {
height: 20px; left: 0; position: absolute; width: 20px;
} .pp_bottom .pp_middle {
height: 20px; left: 20px; position: absolute; right: 20px;
}
- html .pp_bottom .pp_middle {
left: 0; position: static;
} .pp_bottom .pp_right {
height: 20px; left: auto; position: absolute; right: 0; top: 0; width: 20px;
} .pp_loaderIcon {
display: block; height: 24px; left: 50%; margin: -12px 0 0 -12px; position: absolute; top: 50%; width: 24px;
}
- pp_full_res {
line-height: 1 !important;
}
- pp_full_res .pp_inline {
text-align: left;
}
- pp_full_res .pp_inline p {
margin: 0 0 15px 0;
} div.ppt {
color: #fff; display: none; font-size: 17px; margin: 0 0 5px 15px; z-index: 9999;
} /*Izotope*/ .isotope-item {
z-index: 2;
} .isotope-hidden.isotope-item {
pointer-events: none; z-index: 1;
} .isotope, .isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s;
} .isotope {
-webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width;
} .isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity;
} /**** disabling Isotope CSS3 transitions ****/ .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s;
} /* SETTINGS BOX CSS */ .backwrapper {
max-width: 1000px; margin: 0px auto;
} .customPanel {
border-radius: 0px 6px 6px 0px; z-index: 999999; box-shadow: 1px 1px 2px #555; position: fixed; padding: 15px; width: 26px; background: white; border-top: 1px solid #e2e2e2; border-right: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; top: 87px; left: -60px;
} .customPanel h1 {
border-bottom: 1px dotted #ccc; margin-bottom: 10px; padding-bottom: 3px; font-size: 14px; font-weight: 700;
} .customPanel select {
margin: 2px 0px 6px; border: 1px solid #ccc; border-radius: 4px; padding: 3px; width: 100%;
} .customPanel .customPanelOptions .customPanelOptionsDefault {
border: 1px solid #D5D5D5; background: #F1F1F1; background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e8e8e8)); background: -moz-linear-gradient(top, #ffffff, #e8e8e8); background: -o-linear-gradient(#ffffff, #e8e8e8); cursor: pointer; overflow: hidden; float: left; padding-left: 15px; padding-right: 15px; margin-top: 3px; border-radius: 4px;
} .customPanel .customPanelOptions .customPanelOptionsDefault:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#ffffff)); background: -moz-linear-gradient(top, #e8e8e8, #ffffff); background: -o-linear-gradient(#e8e8e8, #ffffff);
} .customPanel .customPanelOptions .customPanelOptionsColor {
height: 24px; width: 24px; float: left; border: 1px solid #ABABAB; margin: 0 5px 5px 0; cursor: pointer;
} .customPanel .customPanelOptions .customPanelOptionsTexture {
height: 24px; width: 24px; float: left; border: 1px solid #ABABAB; margin: 0 5px 5px 0; cursor: pointer;
} .customPanel .customPanelButton {
position: absolute; height: 33px; width: 34px; background: #ffffff url() no-repeat center center; top: 20px; right: -45px; border-top: 1px solid #e2e2e2; border-right: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; cursor: pointer; border-radius: 0px 6px 6px 0px; padding: 5px; box-shadow: 1px 1px 2px #555;
} .customPanel .customPanelButton:hover {
background-image: url();
} .customPanel .customPanelOptions .customPanelOptionsPickerButton {
background: url() no-repeat 0px 0px; height: 24px; width: 24px; overflow: hidden; cursor: pointer; float: left; margin: 0 5px 5px 0; border: 1px solid #ABABAB;
} .customPanel .customPanelOptionsPicker {
position: absolute; top: 70px; right: -200px; display: none;
} /*== farbtastic ==*/ /**
* Farbtastic Color Picker 1.2 * © 2008 Steven Wittens * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation; either version 2 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program; if not, write to the Free Software * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA */
.farbtastic {
position: relative;
} .farbtastic * {
position: absolute; cursor: crosshair;
} .farbtastic, .farbtastic .wheel {
width: 195px; height: 195px;
} .farbtastic .color, .farbtastic .overlay {
top: 47px; left: 47px; width: 101px; height: 101px;
} .farbtastic .wheel {
background: url() no-repeat; width: 195px; height: 195px;
} .farbtastic .overlay {
background: url() no-repeat;
} .farbtastic .marker {
width: 17px; height: 17px; margin: -8px 0 0 -8px; overflow: hidden; background: url() no-repeat;
}