radar_parlamentar/static/files/codes/css/style.css
/* Main Style Sheet Document */
/*
~"~"~ Circle ~"~"~ Responsive HTML5 & CSS3 Creative-Portfolio Theme by Nuruzzaman Sheikh (palpaldal)
Please purchase a license from http://themeforest.net in order to use this template.
Developer Web Address: http://www.palpaldal.com
Themeforest profile: http://themeforest.net/user/palpaldal/
TABLE OF CONTENTS ------------------
1. Common Theme Elements (usually inline elements)
2. Theme Structure
3. Common Sections of Pages
a. Header
b. Slider + Page Msg
c. Menu
d. Breadcrumbs
e. Footer
f. Sidebar
g. Pagination
h. Price Boxes
4. Pages
a. Home
b. About
c. Portfolio
d. Blog
i. Comments
ii. Comment Form
e. Contact
f. Other Pages
5. Others
6. Third Party Styles
*/
/* |||||||||| 1. Common Theme Elements (usually inline elements) |||||||||| */
figure{}
figcaption{
font-family: Lato, Arial, Helvetica, sans-serif;
font-style: italic;
text-align: center;
}
blockquote{
background: transparent url(../../images/qt-top.png) 0 0 no-repeat;
color: #444;
text-indent: 20px;
}
blockquote p{
display: inline;
background: transparent url(../../images/qt-btm.png) right bottom no-repeat;
padding-right: 20px;
font-size: 13px;
margin: 0;
}
blockquote.right{
float: right;
margin: 20px 0 20px 20px;
width: 300px;
}
blockquote.left{
float: left;
margin: 20px 20px 20px 0;
width: 300px;
}
a{
-moz-transition: color .2s linear .1s;
-webkit-transition: color .2s linear .1s;
-ms-transition: color .2s linear .1s;
-o-transition: color .2s linear .1s;
transition: color .2s linear .1s;
}
input[type="text"],input[type="password"],textarea{
-moz-transition:
background-color .2s linear .1s,
border-color .2s linear .1s;
-webkit-transition:
background-color .2s linear .1s,
border-color .2s linear .1s;
-ms-transition:
background-color .2s linear .1s,
border-color .2s linear .1s;
-o-transition:
background-color .2s linear .1s,
border-color .2s linear .1s;
transition:
background-color .2s linear .1s,
border-color .2s linear .1s;
}
button,input[type="button"],
input[type="submit"],input[type="reset"]{
-moz-transition:
background-color .2s linear .1s,
color .2s linear .1s;
-webkit-transition:
background-color .2s linear .1s,
color .2s linear .1s;
-ms-transition:
background-color .2s linear .1s,
color .2s linear .1s;
-o-transition:
background-color .2s linear .1s,
color .2s linear .1s;
transition:
background-color .2s linear .1s,
color .2s linear .1s;
}
/* solving float issues without sacrifying overflow hidden issues */
.cols:after,
.inCols:after,
#menu:after,
#tKeys:after,
.topMeta:after,
.btmMeta:after,
.priceBoxes:after{
clear: both;
content: '';
display: block;
float: none;
height: 0px;
width: 0px;
}
/* hiding elements */
.invisible,
#nlForm legend,
#searchForm legend,
#commentForm legend,
#cntForm legend{
clip: rect(1px 1px 1px 1px); /* IE6-7 */
clip: rect(1px, 1px, 1px, 1px); /* for the rest of us :) */
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
}
/* List styles*/
.list{margin: 20px 0;}
.list li{
background: transparent url(../../images/bullets/circle.png) 0 6px no-repeat;
display: block;
line-height: 16px;
padding-left: 20px;
margin-bottom: 6px;
}
.list.disc li{background-image: url(../../images/bullets/disc.png);}
.list.right li{background-image: url(../../images/bullets/right.png);}
.list.cross li{background-image: url(../../images/bullets/cross.png);}
.list.arrow li{background-image: url(../../images/bullets/arrow.png);}
ol.list{
list-style: decimal;
list-style-position: outside;
padding: 0;
}
ol.list li{
background: none;
display: list-item;
margin-left: 20px;
padding-left: 0px;
}
ol.list.alpha{list-style: upper-alpha;}
ol.list.alphalow{list-style: lower-alpha;}
/* messages */
.success,
.information,
.warning,
.blocked,
.error,
.sending{
background: transparent url(../../images/signs/success.png) 20px 24px no-repeat;
background-color: rgba(0,0,0,.05);
border: 1px dashed #000;
border-color: rgba(0,0,0,.35);
padding: 20px 20px 20px 70px;
margin: 20px 0;
}
.information{background-image: url(../../images/signs/information.png);}
.warning{background-image: url(../../images/signs/warning.png);}
.blocked{background-image: url(../../images/signs/blocked.png);}
.error{background-image: url(../../images/signs/error.png);}
/* borders for images */
.border{
background: transparent url(../../images/cross-patt-img.png) 0 0 repeat;
padding: 5px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
#footer .border,
#secondary .border{background-image: url(../../images/cross-patt-light.png);}
/* general link button */
.btn{
background: #222;
color: #fff;
color: rgba(255,255,255,.75);
line-height: 28px;
margin: 20px 0;
padding: 6px 20px;
border-radius: 2px;
-moz-transition: background-color .2s linear .1s;
-webkit-transition: background-color .2s linear .1s;
-ms-transition: background-color .2s linear .1s;
-o-transition: background-color .2s linear .1s;
transition: background-color .2s linear .1s;
}
.btn:focus,
.btn:hover{
background-color: #f0a911;
color: #000;
}
/* links of footer and sidebar (e.g. categories, archives, blogroll) */
.links{margin: 20px 0;}
.links li{
display: block;
line-height: 12px;
margin-bottom: 18px;
}
.links li a{
display: block;
border-left: #666 4px solid;
color: #888;
padding-left: 6px;
-moz-transition:
border-color .2s linear .1s,
color .2s linear .1s;
-webkit-transition:
border-color .2s linear .1s,
color .2s linear .1s;
-ms-transition:
border-color .2s linear .1s,
color .2s linear .1s;
-o-transition:
border-color .2s linear .1s,
color .2s linear .1s;
transition:
border-color .2s linear .1s,
color .2s linear .1s;
}
.links li a:focus,
.links li a:hover{
border-color: #f0a911;
color: #f0a911;
}
/* blog lists of recent/popular for footer and sidebar */
.miniBlogList{margin: 20px 0;}
.miniBlogList li{
border-bottom: #000 1px dotted;
border-color: rgba(0,0,0,.5);
display: block;
line-height: 18px;
margin-bottom: 12px;
overflow: hidden;
padding-bottom: 12px;
}
.miniBlogList li:last-child{
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.miniBlogList .border{
background-image: url(../../images/cross-patt-light.png);
display: block;
float: left;
margin-right: 20px;
}
.miniBlogList h5{
font-size: 14px;
font-weight: normal;
margin: 0;
}
.miniBlogList .meta{
color: #666;
margin: 8px 0 0;
height: 10px;
}
.miniBlogList .meta span{
height: 10px;
border-right: #fff 1px solid;
border-color: rgba(255,255,255,.05);
padding-right: 10px;
}
.miniBlogList .meta span+span{
border: none;
padding-left: 10px;
padding-right: 0;
}
/* tag styles only for 'Tags' sidebar widget */
.tags{
margin: 20px 0;
overflow: hidden;
}
.tags li{
background: transparent url(../../images/tags-arw.png) 0 0 no-repeat;
display: block;
float: left;
height: 20px;
line-height: 20px;
margin: 0 10px 10px 0;
padding-left: 13px;
}
.tags li a{
background: #111;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomright: 2px;
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-right-radius: 2px;
-ms-border-top-right-radius: 2px;
-ms-border-bottom-right-radius: 2px;
-o-border-top-right-radius: 2px;
-o-border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
color: #888;
display: block;
padding: 0 6px 0 4px;
}
.tags li a:focus,
.tags li a:hover{color: #f0a911;}
/* stHead (section Heading) elements */
.stHead{
background: transparent url(../../images/cross-patt-light.png) 0 0 repeat-x;
height: 14px;
margin: 40px 0;
overflow: hidden;
}
.cols .stHead{margin-top: 20px;}
.stHead h2,
.stHead h4{
background-position: 0 0;
background-repeat: repeat;
color: #444;
display: inline;
font: bold 14px/1.2 'Helvetica Neue', 'Helvetica-Neue', 'helvetica neue', 'helvetica-neue', Helvetica, Arial, sans-serif;
height: 16px;
margin: -1px 0;
padding-right: 10px;
text-transform: uppercase;
}
.stHead h2{
color: #ccc;
background-color: #222;
background-image: url(../../images/noise-patt-dark.png);
}
.stHead h4{
background-color: #fff;
background-image: url(../../images/noise-patt.png);
}
/* Browsable Feedback and Twitter Widgets */
#feedback,
#tweets{
margin: 40px 0 0;
overflow: hidden;
}
#feedback .ctrls,
#tweets .ctrls{
background: #222 url(../../images/btn/fb-t/ft-arw-dvr.png) center center no-repeat;
-moz-border-radius-topleft: 2px;
-webkit-border-top-left-radius: 2px;
-ms-border-top-left-radius: 2px;
-o-border-top-left-radius: 2px;
border-top-left-radius: 2px;
-moz-border-radius-bottomleft: 2px;
-webkit-border-bottom-left-radius: 2px;
-ms-border-bottom-left-radius: 2px;
-o-border-bottom-left-radius: 2px;
border-bottom-left-radius: 2px;
float: left;
height: 40px;
padding: 40px 10px;
width: 10px;
}
#feedback .ctrls a,
#tweets .ctrls a{
background-color: transparent;
background-repeat: no-repeat;
display: block;
font-size: 0;
height: 9px;
width: 10px;
-moz-transition: background-position .2s linear .1s;
-webkit-transition: background-position .2s linear .1s;
-ms-transition: background-position .2s linear .1s;
-o-transition: background-position .2s linear .1s;
transition: background-position .2s linear .1s;
}
#feedback .prev,
#tweets .prev{
background-image: url(../../images/btn/fb-t/ft-arw-up.png);
background-position: 0 0;
margin-bottom: 24px;
}
#feedback .next,
#tweets .next{
background-image: url(../../images/btn/fb-t/ft-arw-dn.png);
background-position: 0 -9px;
margin-top: 24px;
}
#feedback .prev:focus,
#feedback .prev:hover,
#tweets .prev:focus,
#tweets .prev:hover{background-position: 0 -9px;}
#feedback .next:focus,
#feedback .next:hover,
#tweets .next:focus,
#tweets .next:hover{background-position: 0 0;}
#feedback .wrap,
#tweets .wrap{
float: left;
background: transparent url(../../images/boxes/fbt-box-top.png) 0 0 no-repeat;
padding-top: 10px;
width: 440px;
height: 150px;
}
#feedback .contents,
#tweets .contents{
background: transparent url(../../images/boxes/fbt-box-btm.png) 0 bottom no-repeat;
padding-bottom: 10px;
height: 140px;
}
#feedback ul,
#tweets ul{
background: transparent url(../../images/boxes/fbt-box-bg.png) 0 0 repeat-y;
padding: 10px 0;
height: 140px;
}
#feedback ul li{
display: block;
line-height: 10px;
width: 410px;
padding: 14px 16px 16px 16px;
}
#feedback blockquote{margin: 0;}
#feedback cite{
color: #444;
margin: 10px 20px 0 0;
}
#tweets .tweet_list li{
min-height: 80px;
padding-top: 16px;
}
/* |||||||||| 2. Theme Structure |||||||||| */
#header{
height: 340px;
margin-bottom: 60px;
position: relative;
}
#content{
margin: 0 auto;
width: 980px;
}
.cols{
margin: 40px -40px 40px 0;
width: 1020px;
}
.cols .half,
.cols .oneThird,.cols .twoThird,
.cols .oneFourth,.cols .twoFourth,.cols .threeFourth,
.cols .oneFifth,.cols .twoFifth,.cols .threeFifth,.cols .fourFifth,
.cols .oneSixth,.cols .twoSixth,.cols .threeSixth,.cols .fourSixth,.cols .fiveSixth{
float: left;
margin-right: 40px;
width: 470px;
}
.cols .oneThird{width: 300px;}
.cols .twoThird{width: 640px;}
.cols .oneFourth{width: 215px;}
.cols .twoFourth{width: 470px;}
.cols .threeFourth{width: 725px;}
.cols .oneFifth{width: 164px;}
.cols .twoFifth{width: 368px;}
.cols .threeFifth{width: 572px;}
.cols .fourFifth{width: 776px;}
.cols .oneSixth{width: 130px;}
.cols .twoSixth{width: 300px;}
.cols .threeSixth{width: 470px;}
.cols .fourSixth{width: 640px;}
.cols .fiveSixth{width: 810px;}
#primary{
float: left;
margin-right: 40px;
width: 620px;
}
#primary .inCols{
margin-right: -40px;
width: 660px;
}
#primary .half{width: 290px;}
#primary .oneThird{width: 180px;}
#primary .twoThird{width: 400px;}
#primary .oneFourth{width: 125px;}
#primary .twoFourth{width: 290px;}
#primary .threeFourth{width: 455px;}
#secondary{
float: left;
width: 320px;
}
/* |||||||||| 3. Common Sections of Pages |||||||||| */
/* |||||||||| a. Header |||||||||| */
#header.largeSlides{height: 600px;}
#header .bar{
background: transparent url(../../images/top-bdr.png) 0 0 repeat-x;
height: 12px;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 9999;
}
#nav{}
#navNLogo{
background: #111;
border-top: 1px solid;
border-bottom: 1px solid;
border-color: rgba(255,255,255,.1);
bottom: 20px;
-moz-box-shadow: 0px 0px 0px 1px #000;
-webkit-box-shadow: 0px 0px 0px 1px #000;
-ms-box-shadow: 0px 0px 0px 1px #000;
-o-box-shadow: 0px 0px 0px 1px #000;
box-shadow: 0px 0px 0px 1px #000;
height: 98px;
left: 0;
position: absolute;
width: 100%;
z-index: 9999;
}
#navNLogo .wrap{
margin: 0 auto;
width: 980px;
}
#logo{
background: transparent url(../../images/logo-bg.png) 0 0 no-repeat;
height: 142px;
float: left;
margin: -22px 40px -22px 0;
width: 140px;
}
#logo img{
dipslay: block;
margin: -15px -15px;
}
#navNLogo nav{
float: left;
width: 800px;
}
/* |||||||||| b. Slider + Page Msg |||||||||| */
#imageBox{
background: #fff url(../../images/noise-patt.png) 0 0 repeat;
height: 480px;
padding-top: 1px;
}
#imageBox.headerImages{height: 220px;}
#imageBox .image{
background-color: transparent;
background-position: center center;
background-repeat: no-repeat;
height: 220px;
}
#imageBox .image.about{background-image: url(../../../assets/slides/1.jpg);}
#imageBox .image.votoaberto{background-image: url(../../../assets/votoaberto/voto_aberto_banner_pequeno.png);}
#imageBox .image.blog{background-image: url(../../../assets/slides/3.jpg);}
#imageBox .image.contact{background-image: url(../../../assets/slides/1.jpg);}
#imageBox .image ul{ }
#imageBox .image.slides li{
display: block;
line-height: 18px;
height: 220px;
width: 100%;
}
/* @#@Other Pages' Slides -- declare your slides images */
/* portfolio header image slides */
#imageBox .image.portfolio .slide1{background-image: url(../../../assets/slides/1.jpg);}
#imageBox .image.portfolio .slide2{background-image: url(../../../assets/slides/2.png);}
#imageBox .image.portfolio .slide3{background-image: url(../../../assets/slides/3.jpg);}
#slides{}
#slides li {
background-color: transparent;
background-position: center center;
background-repeat: no-repeat;
display: block;
line-height: 18px;
height: 480px;
width: 100%;
}
/* @#@Slides images -- declare your slides images */
#slides li[data-slide="1"]{background-image: url(../../../assets/slides/1.jpg);}
#slides li[data-slide="2"]{background-image: url(../../../assets/slides/2.png);}
#slides li[data-slide="3"]{background-image: url(../../../assets/slides/3.jpg);}
#slides li+li{display: none;}
/* slides message boxes */
#slideMsgs{}
.slideMsgs,
.headerMsg{
background: #111 url(../../images/cross-patt-img.png) 0 0 repeat;
background-color: rgba(0,0,0,.85);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
display: block;
left: 260px;
line-height: 18px;
padding: 20px;
position: absolute;
top: 160px;
width: 350px;
}
.slideMsgs.double{
-moz-border-radius: 0;
-webkit-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
display: block;
padding: 0;
top: 120px;
left: 0;
position: relative;
}
.slideMsgs.double h1,
.slideMsgs.double h4{
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
left: 0;
position: absolute;
background: #111 url(../../images/cross-patt-img.png) 0 0 repeat;
background-color: rgba(0,0,0,.75);
width: 100%;
padding: 20px;
margin: 20px 0;
}
.slideMsgs h1{
line-height: 1.15;
color: #1292db;
font-size: 32px;
font-weight: 700;
margin: 0 0 20px 0;
}
.slideMsgs h4{
font-family: 'Helvetica Neue', 'Helvetica-Neue', 'helvetica neue', 'helvetica-neue', Helvetica, Arial, sans-serif;
font-size: 18px;
color: #ccc;
margin: 20px 0 0 0;
}
.slideMsgs.double h1{top: 0;}
.slideMsgs.double h4{top: 120px;}
/* slider controls */
#sliderCtrls{
overflow: hidden;
position: absolute;
width: 980px;
z-index: 999;
height: 52px;
top: 220px;
left: 240px;
}
#sliderCtrls .prev,
#sliderCtrls .next{
background-color: transparent;
background-position: 0 0;
background-repeat: no-repeat;
display: block;
font-size: 0;
height: 51px;
opacity: .65;
width: 51px;
text-indent: -9999px;
-moz-transition: opacity .2s linear;
-webkit-transition: opacity .2s linear;
-ms-transition: opacity .2s linear;
-o-transition: opacity .2s linear;
transition: opacity .2s linear;
}
#sliderCtrls .prev{
float: left;
background-image: url(../../images/btn/prev.png);
}
#sliderCtrls .next{
float: right;
background-image: url(../../images/btn/next.png);
}
#sliderCtrls .prev:focus,
#sliderCtrls .prev:hover,
#sliderCtrls .next:focus,
#sliderCtrls .next:hover{opacity: 1;}
.headerMsg{
top: 40px;
left: 240px;
width: 540px;
z-index: 199;
padding: 20px;
}
.headerMsg h1{
color: #14a3f5;
font-size: 38px;
font-weight: 700;
margin: 0 0 8px;
text-transform: uppercase;
}
.headerMsg h3{
color: #fff;
font: normal 16px/1.2 Arial, Helvetica, sans-serif;
margin: 0;
}
/* Boxed slides */
#boxed{
border: #000 1px solid;
margin: 40px auto 0;
width: 980px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
position: relative;
}
#boxed .prev,
#boxed .next,
.nivo-directionNav a{
background-color: transparent;
background-position: 0 0;
background-repeat: no-repeat;
display: block;
font-size: 0;
height: 42px;
position: absolute;
width: 39px;
top: 180px;
line-height: 18px;
text-indent: -9999px;
z-index: 999;
}
#boxed .prev,
.nivo-prevNav{
background-image: url(../../images/btn/bs-prev.png);
left: -19px;
}
#boxed .next,
.nivo-nextNav{
background-image: url(../../images/btn/bs-next.png);
right: -19px;
}
#boxed .prev:focus,
#boxed .prev:hover,
.nivo-prevNav:focus,
.nivo-prevNav:hover,
#boxed .next:focus,
#boxed .next:hover,
.nivo-nextNav:focus,
.nivo-nextNav:hover{background-position: 0 -42px;}
/* |||||||||| c. Menu |||||||||| */
#menu{
margin: 34px 0;
padding-left: 40px;
}
#menu>li{
display: block;
float: left;
font-size: 12px;
font-weight: bold;
line-height: 30px;
position: relative;
text-transform: uppercase;
}
#menu>li>a{
background-color: transparent;
background-position: 0 0;
background-repeat: repeat-x;
border: transparent 1px solid;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
color: #ddd;
color: rgba(255,255,255,.75);
display: block;
height: 30px;
margin: 1px;
padding: 0 15px;
-moz-transition:
background-color .3s ease-in-out,
border-color .3s ease-in-out;
-webkit-transition:
background-color .3s ease-in-out,
border-color .3s ease-in-out;
-ms-transition:
background-color .3s ease-in-out,
border-color .3s ease-in-out;
-o-transition:
background-color .3s ease-in-out,
border-color .3s ease-in-out;
transition:
background-color .3s ease-in-out,
border-color .3s ease-in-out;
}
#menu>li:hover>a,
#menu>li>a:focus,
#menu>li>a:hover,
#menu>li.active>a{
background-color: #1292db;
background-image: url(../../images/menu-bg.png);
border-color: rgba(255,255,255,.15);
border-top-color: rgba(255,255,255,.35);
border-bottom-color: rgba(255,255,255,.2);
-moz-box-shadow: 0px 0px 0px 1px #000;
-webkit-box-shadow: 0px 0px 0px 1px #000;
-ms-box-shadow: 0px 0px 0px 1px #000;
-o-box-shadow: 0px 0px 0px 1px #000;
box-shadow: 0px 0px 0px 1px #000;
-moz-text-shadow: 1px 1px 0px rgba(0,0,0,.25);
-webkit-text-shadow: 1px 1px 0px rgba(0,0,0,.25);
-ms-text-shadow: 1px 1px 0px rgba(0,0,0,.25);
-o-text-shadow: 1px 1px 0px rgba(0,0,0,.25);
text-shadow: 1px 1px 0px rgba(0,0,0,.25);
}
/* Drop-Down Menus */
#menu ul{
background: #222;
border: #000 1px solid;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,.5);
-webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,.5);
-ms-box-shadow: 2px 2px 2px 0px rgba(0,0,0,.5);
-o-box-shadow: 2px 2px 2px 0px rgba(0,0,0,.5);
box-shadow: 2px 2px 2px 0px rgba(0,0,0,.5);
left: 0;
opacity: 0;
padding: 10px 0;
position: absolute;
top: -9999px;
width: 160px;
-moz-transition:
left 0s linear .3s,
top 0s linear .3s,
opacity .6s ease-in-out;
-webkit-transition:
left 0s linear .3s,
top 0s linear .3s,
opacity .6s ease-in-out;
-ms-transition:
left 0s linear .3s,
top 0s linear .3s,
opacity .6s ease-in-out;
-o-transition:
left 0s linear .3s,
top 0s linear .3s,
opacity .6s ease-in-out;
transition:
left 0s linear .3s,
top 0s linear .3s,
opacity .6s ease-in-out;
}
#menu ul li{
border-top: #111 1px solid;
display: block;
font-size: 11px;
font-weight: normal;
line-height: 14px;
position: relative;
}
#menu ul li:last-child{border-bottom: #111 1px solid;}
#menu ul a{
background-color: transparent;
color: #ddd;
color: rgba(255,255,255,.75);
border: #ccc 1px solid;
border-color: rgba(255,255,255,.03);
display: block;
padding: 8px 10px;
-moz-transition:
background-color .2s ease-in-out,
border-color .2s ease-in-out;
-webkit-transition:
background-color .2s ease-in-out,
border-color .2s ease-in-out;
-ms-transition:
background-color .2s ease-in-out,
border-color .2s ease-in-out;
-o-transition:
background-color .2s ease-in-out,
border-color .2s ease-in-out;
transition:
background-color .2s ease-in-out,
border-color .2s ease-in-out;
}
#menu ul li.active>a,
#menu ul li:hover>a,
#menu ul a:focus,
#menu ul a:hover{
background: #1292db;
border-color: rgba(255,255,255,.15);
-moz-text-shadow: 1px 1px 0px rgba(0,0,0,.25);
-webkit-text-shadow: 1px 1px 0px rgba(0,0,0,.25);
-ms-text-shadow: 1px 1px 0px rgba(0,0,0,.25);
-o-text-shadow: 1px 1px 0px rgba(0,0,0,.25);
text-shadow: 1px 1px 0px rgba(0,0,0,.25);
}
#menu li:hover ul{
opacity: 1;
top: 34px;
}
#menu li:hover li ul,
#menu li li:hover li ul,
#menu li li li:hover li ul,
#menu li li li li:hover li ul{
opacity: 0;
left: 0;
top: -9999px;
}
#menu li li:hover ul,
#menu li li li:hover ul,
#menu li li li li:hover ul,
#menu li li li li li:hover ul{
opacity: 1;
left: 160px;
top: -12px;
}
/* |||||||||| d. Breadcrumbs |||||||||| */
.breadcrumbs{
border-bottom: #ccc 1px solid;
border-color: rgba(0,0,0,.15);
margin: -30px 0 20px 0;
padding-bottom: 10px;
}
.breadcrumbs li{
color: #888;
font-size: 14px;
line-height: 18px;
margin-right: 2px;
}
.breadcrumbs li a{
color: #888;
font-size: 12px;
margin-right: 2px;
}
.breadcrumbs li a:focus,
.breadcrumbs li a:hover{color: #f0a911;}
/* |||||||||| e. Footer |||||||||| */
#footer{
background: #222 url(../../images/noise-patt-dark.png) 0 0 repeat;
margin-top: 60px;
}
#footer a:focus,
#footer a:hover{
color: #fff;
color: rgba(255,255,255,.75);
}
#footer p{color: #888;}
#footer .top{
background: transparent url(../../images/btm-bdr.png) 0 0 repeat-x;
padding-top: 12px;
}
#footer .top .wrap{
margin: 0 auto;
width: 980px;
}
#footer .stHead{
background: transparent url(../../images/cross-patt-drk.png) 0 0 repeat-x;
margin: 0 0 30px;
}
#footer .col2Links{
margin-right: -20px;
overflow: hidden;
}
#footer .col2Links .links{
float: left;
margin: 0 20px 0 0;
width: 140px;
}
#footer .col2Links .links+.links{margin-right: 0;}
#footer .col2Links a:focus,
#footer .col2Links a:hover{color: #f0a911;}
#footer .address{margin: 20px 0 26px;}
.address li{
background-color: transparent;
background-position: 0 0;
background-repeat: no-repeat;
color: #888;
display: block;
line-height: 18px;
margin-bottom: 10px;
padding-left: 30px;
}
.address .street{
background-image: url(../../images/icons/add/balloon.png);
background-position: 2px 6px;
}
.address .phone{
background-image: url(../../images/icons/add/sp-bubbles.png);
background-position: 1px 4px;
}
.address .email{
background-image: url(../../images/icons/add/email.png);
background-position: 0 5px;
}
.address .skype{
background-image: url(../../images/icons/add/skype.png);
background-position: 1px 2px;
}
#nlForm{
margin: 20px 0;
position: relative;
}
#nlForm label{
color: #666;
display: block;
left: 10px;
top: 5px;
}
#nlForm input[type="text"]{
line-height: 18px;
background-color: #fff;
background-color: rgba(0,0,0,.1);
height: 14px;
color: #888;
margin-right: 20px;
padding: 6px 10px;
width: 171px;
}
#nlForm input[type="submit"]{
height: 29px;
width: 80px;
}
#footer .bottom{background: #000;}
#footer .bottom .contents{
margin: 0 auto;
overflow: hidden;
width: 980px;
}
#footer .copy{
float: left;
font-size: 11px;
margin: 10px 40px 0 0;
width: 470px;
}
#footer .version {
font-size: 11px;
margin-top: 30px;
}
#footer .version a:focus,
#footer .version a:hover,
#footer .copy a:focus,
#footer .copy a:hover {
color: #444;
}
#footer .socialLinks{
float: left;
margin: 10px 0;
overflow: hidden;
padding-left: 350px;
width: 120px;
}
#footer .socialLinks li{
display: block;
float: left;
line-height: 18px;
margin-left: 10px;
font-size: 0;
width: 20px;
}
#footer .socialLinks li a{
background-color: transparent;
background-position: 0 0;
background-repeat: no-repeat;
display: block;
height: 18px;
-moz-transition: background-position .2s linear .1s;
-webkit-transition: background-position .2s linear .1s;
-ms-transition: background-position .2s linear .1s;
-o-transition: background-position .2s linear .1s;
transition: background-position .2s linear .1s;
}
#footer .socialLinks .twitter a{background-image: url(../../images/icons/social/twitter.png);}
#footer .socialLinks .facebook a{background-image: url(../../images/icons/social/facebook.png);}
#footer .socialLinks .dribbble a{background-image: url(../../images/icons/social/dribbble.png);}
#footer .socialLinks .flickr a{background-image: url(../../images/icons/social/flickr.png);}
#footer .socialLinks li a:focus,
#footer .socialLinks li a:hover{background-position: 0 -20px;}
/* |||||||||| f. Sidebar |||||||||| */
#secondary{}
#secondary a:focus,
#secondary a:hover{color: rgba(255,255,255,.75);}
/* static sidebar */
#secondary .static{
background: #222 url(../../images/noise-patt-dark.png) 0 0 repeat;
margin-bottom: 40px;
}
#secondary .static .wrap{
background: transparent url(../../images/sb-bdr.png) 0 0 repeat-x;
padding: 20px;
}
#secondary .static,
#secondary .static .wrap,
.dynamic,
.dynamic>ul{
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
#searchForm{
border-bottom: #000 1px solid;
border-color: rgba(0,0,0,.25);
overflow: hidden;
padding: 10px 0 20px;
position: relative;
}
#searchForm label{
color: #666;
display: block;
left: 10px;
top: 15px;
}
#searchForm input[type="text"]{
float: left;
margin-right: 20px;
width: 198px;
}
#searchForm input[type="submit"]{
background-image: url(../../images/btn/magnifier.png);
background-position: 11px 6px;
background-repeat: no-repeat;
display: block;
height: 28px;
float: left;
font-size: 0;
margin-top: -1px;
padding: 12px 0;
width: 40px;
}
#searchForm input[type="submit"]:focus,
#searchForm input[type="submit"]:hover{background-position: 11px -20px;}
#secondary .social{overflow: hidden;}
#secondary .social h5{
color: #888;
float: left;
font-family: 'Helvetica Neue', 'Helvetica-Neue', 'helvetica neue', 'helvetica-neue', Helvetica, Arial, sans-serif;
font-size: 12px;
margin: 20px 20px 0 0;
width: 100px;
}
#secondary .social ul{
float: left;
margin-top: 20px;
padding-left: 10px;
}
#secondary .social li{
display: block;
float: left;
line-height: 18px;
margin-left: 10px;
font-size: 0;
width: 20px;
}
#secondary .social li a{
background-color: transparent;
background-position: 0 0;
background-repeat: no-repeat;
display: block;
height: 18px;
-moz-transition: background-position .2s linear .1s;
-webkit-transition: background-position .2s linear .1s;
-ms-transition: background-position .2s linear .1s;
-o-transition: background-position .2s linear .1s;
transition: background-position .2s linear .1s;
}
#secondary .social .twitter a{background-image: url(../../images/icons/social/twitter-sb.png);}
#secondary .social .facebook a{background-image: url(../../images/icons/social/facebook-sb.png);}
#secondary .social .dribbble a{background-image: url(../../images/icons/social/dribbble-sb.png);}
#secondary .social .flickr a{background-image: url(../../images/icons/social/flickr-sb.png);}
#secondary .social .rss a{background-image: url(../../images/icons/social/rss-sb.png);}
#secondary .social li a:focus,
#secondary .social li a:hover{background-position: 0 -20px;}
#secondary .portRelated{
margin-right: -20px;
overflow: hidden;
}
#secondary .portRelated li{
display: block;
float: left;
margin: 0 20px 20px 0;
}
/* sidebar tabs */
#tabs{margin: 48px 0 40px;}
#tKeys{}
#tKeys li{
display: block;
float: left;
line-height: 18px;
}
#tKeys li a{
background: #111;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
-ms-border-top-left-radius: 2px;
-ms-border-top-right-radius: 2px;
-o-border-top-left-radius: 2px;
-o-border-top-right-radius: 2px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
color: #666;
display: block;
padding: 6px 10px;
text-transform: uppercase;
font-size: 11px;
font-weight: bold;
-moz-transition:
color .2s linear,
margin .2s linear,
padding .2s linear;
-webkit-transition:
color .2s linear,
margin .2s linear,
padding .2s linear;
-ms-transition:
color .2s linear,
margin .2s linear,
padding .2s linear;
-o-transition:
color .2s linear,
margin .2s linear,
padding .2s linear;
transition:
color .2s linear,
margin .2s linear,
padding .2s linear;
}
#tKeys li a:focus,
#tKeys li a:hover,
#tKeys li.active a{
background: #222 url(../../images/noise-patt-dark.png) 0 0 repeat;
color: #999;
margin-top: -4px;
padding-top: 10px;
}
#tConts{
background: #222 url(../../images/noise-patt-dark.png) 0 0 repeat;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
/* remove left border radius*/
-moz-border-radius-topleft: 0;
-webkit-border-top-left-radius: 0;
-ms-border-top-left-radius: 0;
-o-border-top-left-radius: 0;
border-top-left-radius: 0;
padding: 20px;
}
#tConts li{
display: block;
line-height: 18px;
}
#secondary .miniBlogList{margin: 0;}
#secondary .miniBlogList li{padding: 0;}
#secondary .miniBlogList img{margin-bottom: 20px;}
/* dynamic sidebar */
.dynamic{
background: #222 url(../../images/noise-patt-dark.png) 0 0 repeat;
margin: 40px 0;
}
#secondary .stHead{
background: transparent url(../../images/cross-patt-drk.png) 0 0 repeat-x;
margin: 20px 0;
}
.dynamic>ul{
background: transparent url(../../images/sb-bdr.png) 0 0 repeat-x;
padding: 10px 20px 0 20px;
}
#secondary .col2Links{
margin-bottom: 40px;
overflow: hidden;
}
#secondary .col2Links .links{
float: left;
margin: 0 20px 0 0;
width: 130px;
}
#secondary .col2Links .links+.links{margin-right: 0;}
#secondary .dynamic .col2Links .links li:last-child{margin-bottom: 0;}
#secondary .dynamic .miniBlogList{margin-bottom: 40px;}
#secondary .dynamic .tags{margin-bottom: 30px;}
#secondary .dynamic .tags{color: #;}
#secondary .tweet_list li{color: #888;}
#secondary .tweet_time a{color: #666;}
#secondary .col2Links .links a:focus,
#secondary .col2Links .links a:hover,
#secondary .dynamic .tags a:focus,
#secondary .dynamic .tags a:hover,
#secondary .tweet_time a:focus,
#secondary .tweet_time a:hover{color: #f0a911;}
/* |||||||||| g. Pagination |||||||||| */
.pager{
height: 30px;
margin: 60px 0;
overflow: hidden;
text-align: center;
}
#primary .pager{margin-bottom: 0;}
.pager li{
line-height: 18px;
padding: 0;
margin-right: -3px;
}
.pager a{
background: #111;
border-right: rgba(255,255,255,.1) 1px solid;
color: #888;
display: inline-block;
height: 30px;
line-height: 30px;
padding: 0 12px;
-moz-transition: background-color .2s linear .1s;
-webkit-transition: background-color .2s linear .1s;
-ms-transition: background-color .2s linear .1s;
-o-transition: background-color .2s linear .1s;
transition: background-color .2s linear .1s;
}
.pager a:focus,
.pager a:hover{
background: #f0a911;
color: #000;
}
.pager .active a,
.pager .active a:focus,
.pager .active a:hover{
background: #222;
color: #444;
cursor: default;
}
.pager li:first-child a{
-moz-border-radius-topleft: 2px;
-moz-border-radius-bottomleft: 2px;
-webkit-border-top-left-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-ms-border-top-left-radius: 2px;
-ms-border-bottom-left-radius: 2px;
-o-border-top-left-radius: 2px;
-o-border-bottom-left-radius: 2px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.pager li:last-child a{
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomright: 2px;
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-right-radius: 2px;
-ms-border-top-right-radius: 2px;
-ms-border-bottom-right-radius: 2px;
-o-border-top-right-radius: 2px;
-o-border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-right: none;
}
/* |||||||||| h. Price Boxes |||||||||| */
.priceBoxes{margin: 80px 0 80px 60px;}
.priceBoxes article{
background: #222 url(../../images/noise-patt-dark.png) 0 0 repeat;
float: left;
margin-right: 40px;
width: 260px;
}
.priceBoxes article,
.priceBoxes .wrap{
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
.priceBoxes .wrap{
background: transparent url(../../images/sb-bdr.png) 0 0 repeat-x;
padding: 10px 20px 0;
position: relative;
}
.priceBoxes hgroup{
background: transparent url(../../images/price-circle.png) center top no-repeat;
width: 120px;
margin: 20px auto;
padding-top: 20px;
text-align: center;
}
.priceBoxes h1{
color: #acacac;
font-family: Lato, Arial, Helvetica, sans-serif;
font-weight: bold;
font-style: italic;
font-size: 36px;
margin: 0;
}
.priceBoxes h1,
.priceBoxes h1 a{
color: #acacac;
}
.priceBoxes h1 sup{
color: #666;
font-size: 16px;
margin-left: -4px;
vertical-align: super;
-moz-transition: color .2s linear;
-webkit-transition: color .2s linear;
-ms-transition: color .2s linear;
-o-transition: color .2s linear;
transition: color .2s linear;
}
.priceBoxes hgroup h1 a:focus,
.priceBoxes hgroup h1 a:hover{color: #fff;}
.priceBoxes h1 a:focus sup,
.priceBoxes h1 a:hover sup{color: #acacac;}
.priceBoxes h3{
font-size: 18px;
margin-top: 30px;
}
.priceBoxes hr{
background: transparent url(../../images/cross-patt-drk.png) 0 0 repeat-x;
height: 10px;
border: none;
}
.priceBoxes .features{margin-top: -6px;}
.priceBoxes .features li{
background: transparent url(../../images/pb-dvr.png) center bottom no-repeat;
color: #888;
display: block;
line-height: 32px;
text-align: center;
}
.priceBoxes .features li:last-child{background: none;}
.priceBoxes .btn{
background: transparent url(../../images/btn/price-btn.png) 0 0 no-repeat;
color: #fff;
color: rgba(255,255,255,.75);
display: block;
height: 32px;
line-height: 32px;
margin: 14px auto 20px;
padding: 0;
width: 94px;
text-align: center;
-moz-text-shadow: 1px 1px rgba(0,0,0,.25);
-webkit-text-shadow: 1px 1px rgba(0,0,0,.25);
-ms-text-shadow: 1px 1px rgba(0,0,0,.25);
-o-text-shadow: 1px 1px rgba(0,0,0,.25);
text-shadow: 1px 1px rgba(0,0,0,.25);
-moz-transition:
background-position .2s linear,
color .2s linear;
-webkit-transition:
background-position .2s linear,
color .2s linear;
-ms-transition:
background-position .2s linear,
color .2s linear;
-o-transition:
background-position .2s linear,
color .2s linear;
transition:
background-position .2s linear,
color .2s linear;
}
.priceBoxes .btn:focus,
.priceBoxes .btn:hover{
color: rgba(255,255,255,.85);
background-position: 0 -32px;
}
.priceBoxes .bubble{
background: transparent url(../../images/pb-bubble.png) 0 0 no-repeat;
color: #fff;
color: rgba(255,255,255,.75);
font-size: 11px;
height: 35px;
line-height: 13px;
margin: 0;
padding: 10px 10px 10px 15px;
position: absolute;
right: -1px;
text-align: center;
top: -1px;
width: 30px;
}
.priceBoxes .priceNote{
clear: both;
color: #666;
float: none;
font-family: Lato, Arial, Helvetica, sans-serif;
font-style: italic;
padding-top: 10px;
}
/* |||||||||| 4. Pages |||||||||| */
/* |||||||||| a. Home |||||||||| */
.promoMsg{
margin: 40px 0;
overflow: hidden;
}
.elDvr{
background: transparent url(../../images/promo-dvr.png) left bottom no-repeat;
border: none;
height: 20px;
}
.promoMsg h2{
color: #111;
float: left;
font-weight: normal;
font-size: 24px;
margin: 0;
width: 690px;
}
.promo3+.elDvr{margin-top: -10px;}
.elDvr+.promoMsg h2{margin-bottom: 18px;}
.promoMsg .actBtn{
background: transparent url(../../images/btn/actBtn.png) 0 0 no-repeat;
color: #fff;
display: block;
float: right;
font-size: 16px;
line-height: 20px;
margin-top: 30px;
padding: 14px 0;
-moz-text-shadow: 1px 1px 0px rgba(0,0,0,.25);
-webkit-text-shadow: 1px 1px 0px rgba(0,0,0,.25);
-ms-text-shadow: 1px 1px 0px rgba(0,0,0,.25);
-o-text-shadow: 1px 1px 0px rgba(0,0,0,.25);
text-shadow: 1px 1px 0px rgba(0,0,0,.25);
text-align: center;
width: 184px;
}
.promoMsg .actBtn:focus,
.promoMsg .actBtn:hover{
-moz-text-shadow: 1px 1px 0px rgba(0,0,0,.35);
-webkit-text-shadow: 1px 1px 0px rgba(0,0,0,.35);
-ms-text-shadow: 1px 1px 0px rgba(0,0,0,.35);
-o-text-shadow: 1px 1px 0px rgba(0,0,0,.35);
text-shadow: 1px 1px 0px rgba(0,0,0,.35);
}
.promo3{
margin: 40px -40px 40px 0;
overflow: hidden;
}
.promo3 li{
display: block;
float: left;
line-height: 18px;
margin-right: 40px;
width: 300px;
}
.promo3 li:last-child{margin-right: 0;}
.promo3 img{
display: block;
margin: 0 auto;
}
.promo3 h4{
font-size: 18px;
font-weight: 700;
text-align: center;
}
.promo3.images h4{text-align: left;}
.promo3 .textBtn{
display: inline-block;
font-weight: bold;
margin-bottom: 18px;
}
.promo3 .textBtn strong{font-size: 14px;}
.caseStd{overflow: hidden;}
.caseStd > div{
width: 32%;
display: inline-block;
}
.caseStd h3{
font-size: 18px;
font-weight: 700;
margin: 0;
}
.caseStd .meta{margin: 6px 0;}
.caseStd img{
display: block;
margin-right: 20px;
}
.caseStd .half .inwrap a {
display: block;
float: left;
}
/* |||||||||| b. About |||||||||| */
.aboutDesc{
overflow: hidden;
padding-right: 380px;
}
.aboutDesc figure{
float: right;
margin-right: -380px;
}
.aboutDesc p{margin-top: 0;}
.workProcess{margin: 40px 0;}
.workProcess ul{
margin-right: -40px;
overflow: hidden;
}
.workProcess li {
background-color: transparent;
background-position: 0 20px;
background-repeat: no-repeat;
display: block;
float: left;
line-height: 18px;
margin: 0 40px 18px 0;
padding-left: 70px;
width: 230px;
}
.workProcess .step1 {background-image: url(../../images/process/1.png);}
.workProcess .step2 {background-image: url(../../images/process/2.png);}
.workProcess .step3 {background-image: url(../../images/process/3.png);}
.ourTeam{margin: 40px 0;}
.ourTeam ul{
margin-right: -40px;
overflow: hidden;
}
.ourTeam li{
display: block;
float: left;
line-height: 18px;
margin: 0 40px 18px 0;
width: 130px;
}
.ourTeam figcaption{
font-family: 'Helvetica Neue', 'Helvetica-Neue', 'helvetica neue', 'helvetica-neue', Helvetica, Arial, sans-serif;
line-height: 16px;
font-size: 12px;
font-style: normal;
padding-top: 6px;
}
.ourTeam figcaption small{
color: #888;
display: block;
font-size: 11px;
}
/* clients */
#clients{
height: 230px;
margin: 40px 0;
position: relative;
}
#clients ul{
margin-right: -40px;
overflow: hidden;
}
#clients li{
display: block;
float: left;
line-height: 18px;
margin-right: 40px;
width: 130px;
z-index: 1;
}
.prevSBtn,
.nextSBtn{
background-color: #111;
background-position: 10px 8px;
background-repeat: no-repeat;
font-size: 0;
display: inline-block;
padding: 5px 15px;
position: absolute;
-moz-transition: background-color .2s linear .1s;
-webkit-transition: background-color .2s linear .1s;
-ms-transition: background-color .2s linear .1s;
-o-transition: background-color .2s linear .1s;
transition: background-color .2s linear .1s;
top: 200px;
z-index: 99;
}
.prevSBtn{
background-image: url(../../images/btn/port/prev.png);
border-right: rgba(255,255,255,.1) 1px solid;
margin-right: -2px;
left: 460px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-bottomleft: 2px;
-webkit-border-top-left-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-ms-border-top-left-radius: 2px;
-ms-border-bottom-left-radius: 2px;
-o-border-top-left-radius: 2px;
-o-border-bottom-left-radius: 2px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.nextSBtn{
background-image: url(../../images/btn/port/next.png);
left: 492px;
margin-left: -1px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomright: 2px;
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-right-radius: 2px;
-ms-border-top-right-radius: 2px;
-ms-border-bottom-right-radius: 2px;
-o-border-top-right-radius: 2px;
-o-border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.prevSBtn:focus,
.prevSBtn:hover,
.nextSBtn:focus,
.nextSBtn:hover{
background-color: #1292db;
background-position: 10px -22px;
}
.prevSBtn.inactive,
.nextSBtn.inactive{
background-color: #444;
background-position: 10px 8px;
cursor: default;
}
/* |||||||||| c. Portfolio |||||||||| */
/* controls */
#portCntrlsBox{
margin: 40px 0;
overflow: hidden;
}
#sortKeys{
float: left;
margin-right: 40px;
width: 590px;
}
#sortKeys li{
line-height: 18px;
padding: 0;
margin-right: -3px;
}
#sortKeys li a{
background: #111;
border-right: rgba(255,255,255,.1) 1px solid;
color: #888;
display: inline-block;
height: 30px;
line-height: 30px;
padding: 0 12px;
-moz-transition: background-color .2s linear .1s;
-webkit-transition: background-color .2s linear .1s;
-ms-transition: background-color .2s linear .1s;
-o-transition: background-color .2s linear .1s;
transition: background-color .2s linear .1s;
}
#sortKeys li[class*="selected"] a,
#sortKeys .active a,
#sortKeys li a:focus,
#sortKeys li a:hover{
background: #1292db;
color: rgba(255,255,255,.75);
}
#sortKeys li:first-child a{
-moz-border-radius-topleft: 2px;
-moz-border-radius-bottomleft: 2px;
-webkit-border-top-left-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-ms-border-top-left-radius: 2px;
-ms-border-bottom-left-radius: 2px;
-o-border-top-left-radius: 2px;
-o-border-bottom-left-radius: 2px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
#sortKeys li:last-child a{
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomright: 2px;
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-right-radius: 2px;
-ms-border-top-right-radius: 2px;
-ms-border-bottom-right-radius: 2px;
-o-border-top-right-radius: 2px;
-o-border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-right: none;
}
#portCntrls{
float: left;
height: 30px;
padding-left: 192px;
width: 158px;
}
#btmPortCntrls{
height: 30px;
margin: 40px 0 80px;
overflow: hidden;
padding-left: 450px;
}
#portCntrls li,
#btmPortCntrls li{
display: block;
float: left;
height: 30px;
line-height: 30px;
margin-left: 10px;
overflow: hidden;
}
#portCntrls li a,
#btmPortCntrls li a,
.ppCntrls a,
#sbFeedback .ctrls a{
background-color: #111;
background-position: 0 0;
background-repeat: no-repeat;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
color: #888;
display: block;
float: left;
padding: 0 10px;
-moz-transition: background-color .2s linear .1s;
-webkit-transition: background-color .2s linear .1s;
-ms-transition: background-color .2s linear .1s;
-o-transition: background-color .2s linear .1s;
transition: background-color .2s linear .1s;
}
#portCntrls .portPager,
#btmPortCntrls .portPager,
.ppCntrls a,
#sbFeedback .ctrls a{font-size: 0;}
#portCntrls .portPager a,
#btmPortCntrls .portPager a,
.ppCntrls a,
#sbFeedback .ctrls a{
background-position: 10px 8px;
padding: 0 15px;
}
#portCntrls .portPager .prev,
#btmPortCntrls .portPager .prev,
.ppCntrls .prev,
#sbFeedback .ctrls .prev{background-image: url(../../images/btn/port/prev.png);}
#portCntrls .portPager .next,
#btmPortCntrls .portPager .next,
.ppCntrls .next,
#sbFeedback .ctrls .next{background-image: url(../../images/btn/port/next.png);}
#portCntrls .portPager a:focus,
#portCntrls .portPager a:hover,
#btmPortCntrls .portPager a:focus,
#btmPortCntrls .portPager a:hover,
.ppCntrls a:focus,
.ppCntrls a:hover,
#sbFeedback .ctrls a:focus,
#sbFeedback .ctrls a:hover{
background-color: #1292db;
background-position: 10px -22px;
}
#portCntrls li a.inactive,
#btmPortCntrls li a.inactive{
cursor: default;
background-color: #444;
}
#portCntrls li a.inactive:focus,
#portCntrls li a.inactive:hover,
#btmPortCntrls li a.inactive:focus,
#btmPortCntrls li a.inactive:hover{
background-color: #444;
background-position: 10px 8px;
}
#portCntrls .portPager .prev,
#portCntrls .portDT .grid,
#btmPortCntrls .portPager .prev,
.ppCntrls .prev,
#sbFeedback .ctrls .prev{
border-right: rgba(255,255,255,.1) 1px solid;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-ms-border-top-right-radius: 0;
-ms-border-bottom-right-radius: 0;
-o-border-top-right-radius: 0;
-o-border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
#portCntrls .portPager .next,
#portCntrls .portDT .list,
#btmPortCntrls .portPager .next,
.ppCntrls .next,
#sbFeedback .ctrls .next{
-moz-border-radius-topleft: 0;
-moz-border-radius-bottomleft: 0;
-webkit-border-top-left-radius: 0;
-webkit-border-bottom-left-radius: 0;
-ms-border-top-left-radius: 0;
-ms-border-bottom-left-radius: 0;
-o-border-top-left-radius: 0;
-o-border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
#portCntrls .portDT{font-size: 0;}
#portCntrls .portDT a{
margin: 0;
padding: 0 18px;
}
#portCntrls .portDT .grid{
background-image: url(../../images/btn/port/grid.png);
background-position: 12px 11px;
}
#portCntrls .portDT .grid.active,
#portCntrls .portDT .grid:focus,
#portCntrls .portDT .grid:hover{
background-color: #1292db;
background-position: 12px -19px;
}
#portCntrls .portDT .list{
background-image: url(../../images/btn/port/list.png);
background-position: 11px 10px;
}
#portCntrls .portDT .list.active,
#portCntrls .portDT .list:focus,
#portCntrls .portDT .list:hover{
background-color: #1292db;
background-position: 11px -20px;
}
/* Portfolio Message Box */
.portMessage{
background: transparent url(../../images/cross-patt-img.png) 0 0 repeat;
padding: 20px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
.portMessage h2{
font-weight: normal;
color: #222;
font-size: 24px;
margin: 0;
}
/* prettyPhoto Hints */
.prettyItemHover{
background-color: transparent;
background-position: center center;
background-repeat: no-repeat;
position: absolute;
left: 5px;
top: 5px;
display: block;
height: 190px;
width: 190px;
display: none;
}
.prettyItemHover.img{background-image: url(../../images/prettyPhoto/port-magnifier.png);}
.prettyItemHover.indoc{background-image: url(../../images/prettyPhoto/port-magnifier.png);}
.prettyItemHover.mov{background-image: url(../../images/prettyPhoto/port-magnifier.png);}
.prettyItemHover.flash{background-image: url(../../images/prettyPhoto/port-magnifier.png);}
#port{margin: 40px -40px -40px 0;}
#port:after{
clear: both;
content: '';
display: block;
float: none;
height: 0;
width: 0;
}
port+.pager{margin-top: 40px;}
/* thumb and its elements */
#port .thumb{
overflow: hidden;
position: relative;
}
#port .thumb .link,
#port .thumb .btn{
background: #222;
color: #fff;
color: rgba(255,255,255,.75);
line-height: 18px;
padding: 4px 6px;
position: absolute;
z-index: 99;
-moz-transition:
background-color .2s linear,
color .2s linear;
-webkit-transition:
background-color .2s linear,
color .2s linear;
-ms-transition:
background-color .2s linear,
color .2s linear;
-o-transition:
background-color .2s linear,
color .2s linear;
transition:
background-color .2s linear,
color .2s linear;
}
#port .thumb .btn{
-moz-border-radius-topleft: 0;
-moz-border-radius-bottomleft: 0;
-webkit-border-top-left-radius: 0;
-webkit-border-bottom-left-radius: 0;
-ms-border-top-left-radius: 0;
-ms-border-bottom-left-radius: 0;
-o-border-top-left-radius: 0;
-o-border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
left: 5px;
bottom: 25px;
margin: 0;
}
#port .thumb .link{
background: #222 url(../../images/links.png) 10px 8px no-repeat;
padding-left: 30px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-bottomleft: 2px;
-webkit-border-top-left-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-ms-border-top-left-radius: 2px;
-ms-border-bottom-left-radius: 2px;
-o-border-top-left-radius: 2px;
-o-border-bottom-left-radius: 2px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
right: 5px;
bottom: 25px;
}
#port .thumb .link:focus,
#port .thumb .link:hover,
#port .thumb .btn:focus,
#port .thumb .btn:hover{
background-color: #000;
color: #f0a911;
}
#port .thumb .link:focus,
#port .thumb .link:hover{background-position: 10px -12px;}
/* Featured Portfolio Items on Other Pages */
#port.featuredPorts{
height: 340px;
margin-bottom: 40px;
position: relative;
}
.featuredPorts .prevSBtn,
.featuredPorts .nextSBtn{top: 310px;}
/* Portfolio metas */
#port .meta a{color: #777;}
#port .meta a:focus,
#port .meta a:hover{color: #f0a911;}
#port .meta span{margin: 0 4px;}
/* 4 column portfolio */
.portCol4>li{
display: block;
float: left;
line-height: 18px;
margin: 0 40px 40px 0;
width: 215px;
}
/* explicitly set portfolio item height for quicksand plugin */
.portCol4.qsList>li{height: 290px;}
.portCol4 h3{
font-size: 16px;
font-weight: 700;
margin: 10px 0 0;
}
.portCol4 .meta{margin: 4px 0;}
.portCol4 .meta li{
display: block;
line-height: 18px;
}
/* prettyPhoto */
.portCol4 .prettyItemHover{
height: 205px;
width: 205px;
}
/* 3 column portfolio */
.portCol3>li{
display: block;
float: left;
line-height: 18px;
margin: 0 40px 40px 0;
width: 300px;
}
/* explicitly set portfolio item height for quicksand plugin */
.portCol3.qsList>li{height: 260px;}
.portCol3 h3{
font-size: 18px;
font-weight: 700;
margin: 10px 0 0;
}
.portCol3 .meta{margin: 4px 0;}
.portCol3 .meta li{
display: block;
line-height: 18px;
}
/* prettyPhoto */
.portCol3 .prettyItemHover{
height: 190;
width: 290px;
}
/* 2 column portfolio */
.portCol2{}
.portCol2>li{
display: block;
float: left;
line-height: 18px;
margin: 0 40px 40px 0;
padding-left: 220px;
width: 250px;
}
/* explicitly set portfolio item height for quicksand plugin */
.portCol2.qsList>li{height: 280px;}
.portCol2 .thumb{
float: left;
margin-left: -220px;
}
.portCol2 .thumb img{
height: auto;
width: 190px;
}
.portCol2 h3{
font-size: 18px;
font-weight: 700;
margin: 0 0 6px 0;
}
.portCol2 .meta{}
.portCol2 .meta li{
display: block;
line-height: 20px;
}
.portCol2>li p{margin-bottom: 26px;}
.portCol2 .meta .link a{
background: transparent url(../../images/links.png) 0 3px no-repeat;
padding-left: 20px;
}
.portCol2 .meta .link a:focus,
.portCol2 .meta .link a:hover{background-position: 0 -17px;}
/* prettyPhoto */
.portCol2 .prettyItemHover{
height: 190px;
width: 190px;
}
/* Portfolio Post */
#portSlides{
background: transparent url(../../images/cross-patt-img.png) 0 0 repeat;
height: 280px;
margin: 20px 0;
overflow: hidden;
padding: 5px;
position: relative;
}
#portSlides ul{}
#portSlides li{
display: block;
line-height: 18px;
}
.ppCntrls{
position: absolute;
width: 70px;
bottom: 20px;
right: 15px;
z-index: 999;
}
#sbFeedback{margin-bottom: 40px;}
#sbFeedback blockquote{
background-image: url(../../images/qt-top-drk.png);
color: #888;
}
#sbFeedback blockquote p{background-image: url(../../images/qt-btm-drk.png);}
#sbFeedback cite{color: #888;}
#sbFeedback .ctrls{
line-height: 28px;
overflow: hidden;
height: 28px;
}
.ppCntrls .prev,
.ppCntrls .next,
#sbFeedback .prev,
#sbFeedback .next{padding: 5px 16px;}
/* prettyPhoto */
#portSlides .prettyItemHover{
height: 280px;
width: 620px;
}
/* |||||||||| d. Blog |||||||||| */
/* Blog Lists */
.blogList{}
.blogList article{margin-bottom: 40px;}
.blogList article h2{margin-top: 0;}
.blogList article p{margin: 24px 0;}
.blogList .wrap{overflow: hidden;}
.blogList .wrap .meta{
background: #222;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
float: left;
height: 180px;
margin-right: 20px;
padding: 20px 5px;
text-align: center;
width: 60px;
}
.blogList .wrap .meta li{
border-bottom: #fff 1px solid;
border-color: rgba(255,255,255,.1);
display: block;
font-size: 11px;
line-height: 18px;
padding-bottom: 20px;
text-transform: uppercase;
}
.blogList .wrap .meta li+li{padding-top: 20px;}
.blogList .wrap .meta li:last-child{
border: none;
padding-bottom: 0;
}
.blogList .wrap .date{}
.blogList .wrap .date strong,
.blogList .wrap .cmnt strong{
display: block;
font-size: 24px;
}
.blogList .wrap .written a,
.blogList .wrap .video a,
.blogList .wrap .audio a,
.blogList .wrap .image a,
.blogList .wrap .slides a,
.blogList .wrap .link a,
.blogList .wrap .quote a{
background-color: transparent;
background-image: url(../../images/icons/blog-types/pencil.png);
background-position: center top;
background-repeat: no-repeat;
display: block;
font-size: 0;
height: 28px;
width: 32px;
margin: 0 auto;
-moz-transition: background-position .2s linear;
-webkit-transition: background-position .2s linear;
-ms-transition: background-position .2s linear;
-o-transition: background-position .2s linear;
transition: background-position .2s linear;
}
.blogList .wrap .written a{background-image: url(../../images/icons/blog-types/pencil.png);}
.blogList .wrap .video a{background-image: url(../../images/icons/blog-types/film.png);}
.blogList .wrap .audio a{background-image: url(../../images/icons/blog-types/audio.png);}
.blogList .wrap .image a{background-image: url(../../images/icons/blog-types/image.png);}
.blogList .wrap .slides a{background-image: url(../../images/icons/blog-types/slides.png);}
.blogList .wrap .link a{background-image: url(../../images/icons/blog-types/link.png);}
.blogList .wrap .quote a{background-image: url(../../images/icons/blog-types/quote.png);}
.blogList .wrap .written a:focus,
.blogList .wrap .written a:hover,
.blogList .wrap .video a:focus,
.blogList .wrap .video a:hover{background-position: center -30px;}
.blogList .wrap .audio a:focus,
.blogList .wrap .audio a:hover{background-position: center -34px;}
.blogList .wrap .image a:focus,
.blogList .wrap .image a:hover{background-position: center -32px;}
.blogList .wrap .slides a:focus,
.blogList .wrap .slides a:hover{background-position: center -33px;}
.blogList .wrap .link a:focus,
.blogList .wrap .link a:hover{background-position: center -28px;}
.blogList .wrap .quote a:focus,
.blogList .wrap .quote a:hover{background-position: center -29px;}
.blogList .wrap .meta li strong{
-moz-transition: color .2s linear;
-webkit-transition: color .2s linear;
-ms-transition: color .2s linear;
-o-transition: color .2s linear;
transition: color .2s linear;
}
.blogList .wrap img{float: left;}
.blogList .btmMeta{
background: #222;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
height: 30px;
overflow: hidden;
padding: 0 20px 0 10px;
}
.blogList .btmMeta .btn{
border-radius: 0;
float: left;
display: block;
line-height: 30px;
margin: 0;
padding: 0 10px;
width: 120px;
}
.blogList .btmMeta ul{
float: right;
margin-left: 20px;
text-align: right;
}
.blogList .btmMeta ul li{
color: #666;
line-height: 30px;
border-right: #fff 1px solid;
border-color: rgba(255,255,255,.1);
padding-right: 10px;
}
.blogList .btmMeta ul li:last-child{
border: none;
padding-left: 10px;
padding-right: 0;
}
.blogList .wrap .meta li a{color: #666;}
.blogList .wrap .meta li strong,
.blogList .wrap .meta li a strong,
.blogList .btmMeta li a{color: #888;}
.blogList .wrap .meta li a:focus,
.blogList .wrap .meta li a:hover,
.blogList .wrap .meta li a:focus strong,
.blogList .wrap .meta li a:hover strong,
.blogList .btmMeta li a:focus,
.blogList .btmMeta li a:hover{color: #f0a911;}
/* blog post */
.post{}
.post h1{margin-top: 0;}
.post .topMeta,
.post .btmMeta{
background: #222;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
height: 20px;
padding: 5px 20px;
}
.post .topMeta li{
color: #666;
border-right: #ccc 1px solid;
border-color: rgba(255,255,255,.1);
display: block;
float: left;
line-height: 20px;
padding: 0 8px;
}
.post .topMeta li:first-child{padding-left: 0;}
.post .topMeta li:last-child{
border: none;
padding-right: 0;
}
.post .topMeta .written a,
.post .topMeta .video a,
.post .topMeta .audio a,
.post .topMeta .image a,
.post .topMeta .slides a,
.post .topMeta .link a,
.post .topMeta .quote a{
display: block;
background: transparent;
background-image: url(../../images/icons/blog-types/mini-pencil.png);
background-position: center 3px;
background-repeat: no-repeat;
font-size: 0;
height: 20px;
width: 20px;
-moz-transition: background-position .2s linear;
-webkit-transition: background-position .2s linear;
-ms-transition: background-position .2s linear;
-o-transition: background-position .2s linear;
transition: background-position .2s linear;
}
.post .topMeta .audio a{background-position: center 5px;}
.post .topMeta .image a{background-position: center 4px;}
.post .topMeta .link a{background-position: center 1px;}
.post .topMeta .written a{background-image: url(../../images/icons/blog-types/mini-pencil.png);}
.post .topMeta .video a{background-image: url(../../images/icons/blog-types/mini-film.png);}
.post .topMeta .audio a{background-image: url(../../images/icons/blog-types/mini-audio.png);}
.post .topMeta .image a{background-image: url(../../images/icons/blog-types/mini-image.png);}
.post .topMeta .slides a{background-image: url(../../images/icons/blog-types/mini-slides.png);}
.post .topMeta .link a{background-image: url(../../images/icons/blog-types/mini-link.png);}
.post .topMeta .quote a{background-image: url(../../images/icons/blog-types/mini-quote.png);}
.post .topMeta .written a:focus,
.post .topMeta .written a:hover,
.post .topMeta .video a:focus,
.post .topMeta .video a:hover,
.post .topMeta .link a:focus,
.post .topMeta .link a:hover,
.post .topMeta .quote a:focus,
.post .topMeta .quote a:hover{background-position: center -17px;}
.post .topMeta .audio a:focus,
.post .topMeta .audio a:hover{background-position: center -19px;}
.post .topMeta .image a:focus,
.post .topMeta .image a:hover{background-position: center -19px;}
.post .topMeta .slides a:focus,
.post .topMeta .slides a:hover{background-position: center -18px;}
.post .topMeta li span,
.post .topMeta li a{color: #888;}
.post .topMeta li a:focus,
.post .topMeta li a:hover{color: #f0a911;}
.post .btmMeta{margin: 40px 0;}
.post .btmMeta .tags{
float: left;
margin: 0 20px 0 0;
width: 260px;
}
.post .btmMeta .tags li{
background: none;
color: #666;
padding: 0;
margin: 0 10px 0 0;
}
.post .btmMeta .tags li a{
background: none;
display: inline;
padding: 0;
}
.post .sharePost{
color: #666;
float: left;
width: 300px;
}
.post .sharePost span{
vertical-align: top;
margin-right: 10px;
}
/* |||||||||| i. Comments |||||||||| */
#comments{margin: 60px 0 40px;}
#comments ul{}
#comments li{
border-bottom: #ccc 1px dotted;
border-color: rgba(0,0,0,.25);
display: block;
line-height: 18px;
overflow: hidden;
padding: 20px 0;
}
#comments li:first-child{padding-top: 0;}
#comments>ul>li:last-child,
#comments .children li:last-child{
border: none;
padding-bottom: 0;
}
#comments .meta{
border-right: #ccc 1px solid;
float: left;
margin-right: 19px;
width: 140px;
text-align: center;
}
#comments .meta p{margin: 6px 0;}
#comments .meta p,
#comments .meta p a{color: #444;}
#comments .meta p small{
color: #666;
display: block;
font-size: 11px;
}
#comments .meta p span{
border-right: #ccc 1px solid;
padding-right: 4px;
margin-right: 4px;
}
#comments .meta p a:focus,
#comments .meta p a:hover{color: #f0a911;}
#comments .cmnt{
float: left;
width: 460px;
}
#comments .cmnt p{margin-top: 0;}
/* for nested comments */
#comments .children li{padding-left: 20px;}
#comments .children .cmnt{width: 440px;}
#comments .children .children .cmnt{width: 420px;}
#comments .children .children .children .cmnt{width: 400px;}
#comments .children .children .children .children .cmnt{width: 380px;}
#comments .children .children .children .children .children .cmnt{width: 360px;}
/* |||||||||| a. Comment Form |||||||||| */
#commentForm{margin: 60px 0 0;}
#commentForm form{}
#commentForm ul{}
#commentForm li,
#cntForm li{
display: block;
line-height: 18px;
margin-bottom: 20px;
position: relative;
}
#commentForm label,
#cntForm label{
display: block;
left: 10px;
top: 6px;
}
#commentForm input[type="text"],
#commentForm textarea,
#cntForm input[type="text"],
#cntForm textarea{
background-color: rgba(0,0,0,.05);
border-color: rgba(0,0,0,.35);
height: 18px;
}
#commentForm textarea,
#cntForm textarea{height: 160px;}
#commentForm input[type="text"]:focus,
#commentForm input[type="text"]:hover,
#commentForm textarea:focus,
#commentForm textarea:hover,
#cntForm input[type="text"]:focus,
#cntForm input[type="text"]:hover,
#cntForm textarea:focus,
#cntForm textarea:hover{
background-color: #fff;
border-color: rgba(0,0,0,.5);
}
#commentForm input[type="text"],
#cntForm input[type="text"]{width: 300px;}
#commentForm textarea{width: 598px;}
#commentForm input[type="submit"]{
line-height: 18px;
height: 30px;
margin-left: 498px;
width: 122px;
}
/* form validation error messages */
#commentForm li p,
#cntForm li p{
color: #f00;
margin-top: 6px;
}
/* |||||||||| e. Contact |||||||||| */
/* Portfolio Message Box */
.cntMessage{
background: transparent url(../../images/cross-patt-img.png) 0 0 repeat;
padding: 20px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
.cntMessage h4{
font-weight: normal;
color: #222;
font-size: 20px;
margin: 0;
}
.contact .half{position: relative;}
.contact .sending{
background-image: url(../../images/ajax-loader.gif);
}
.contact .success,
.contact .error{background-position: 20px center;}
.contact .sending,
.contact .success,
.contact .error{
position: absolute;
left: 0;
top: 200px;
font-weight: bold;
width: 80%;
display: none;
}
#cntForm{}
/* removing default .warning box styles */
#commentForm li.warning,
#cntForm li.warning{
background: none;
border: none;
padding: 0;
margin: 0;
}
#cntForm #subject,
#cntForm textarea{width: 448px;}
#cntForm input[type="submit"]{
line-height: 18px;
height: 30px;
margin-left: 360px;
width: 110px;
}
.half .address li{color: #666;}
.half .address .street{
background-image: url(../../images/icons/add/balloon-lt.png);
background-position: 2px 2px;
}
.half .address .phone{background-image: url(../../images/icons/add/sp-bubbles-lt.png);}
.half .address .email{background-image: url(../../images/icons/add/email-lt.png);}
.half .address .skype{background-image: url(../../images/icons/add/skype-lt.png);}
.cntPageSocial{
background: #111;
border-radius: 2px;
height: 30px;
margin: 40px 0;
overflow: hidden;
}
.cntPageSocial h5{
font-family: 'Helvetica Neue', 'Helvetica-Neue', 'helvetica neue', 'helvetica-neue', Helvetica, Arial, sans-serif;
color: #888;
float: left;
font-size: 12px;
margin: 0 20px 0 10px;
line-height: 30px;
width: 100px;
}
.cntPageSocial ul{
float: left;
margin-top: 7px;
padding-left: 184px;
}
.cntPageSocial li{
display: block;
float: left;
line-height: 18px;
margin-left: 10px;
font-size: 0;
width: 20px;
}
.cntPageSocial li a{
background-color: transparent;
background-position: 0 0;
background-repeat: no-repeat;
display: block;
height: 18px;
-moz-transition: background-position .2s linear .1s;
-webkit-transition: background-position .2s linear .1s;
-ms-transition: background-position .2s linear .1s;
-o-transition: background-position .2s linear .1s;
transition: background-position .2s linear .1s;
}
.cntPageSocial .twitter a{background-image: url(../../images/icons/social/twitter-sb.png);}
.cntPageSocial .facebook a{background-image: url(../../images/icons/social/facebook-sb.png);}
.cntPageSocial .dribbble a{background-image: url(../../images/icons/social/dribbble-sb.png);}
.cntPageSocial .flickr a{background-image: url(../../images/icons/social/flickr-sb.png);}
.cntPageSocial .rss a{background-image: url(../../images/icons/social/rss-sb.png);}
.cntPageSocial li a:focus,
.cntPageSocial li a:hover{background-position: 0 -20px;}
.cntPageSocial+figure figcaption{text-align: right;}
/* |||||||||| f. Other Pages |||||||||| */
/* search results page */
.searchFB{
background: transparent url(../../images/cross-patt-img.png) left top repeat;
font-size: 18px;
font-weight: normal;
color: #444;
margin: 0 0 40px 0;
padding: 10px;
text-align: center;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
.searchFB strong{color: #222;}
.searchFB big{
color: #222;
display: block;
font-weight: bold;
}
.searchResults{}
.searchResults article{margin: 0 0 40px;}
.searchResults h2{
margin-top: 0;
font-size: 24px;
}
.searchResults .meta{
background: rgba(0,0,0,.1);
padding: 0 10px 0 20px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
.searchResults .meta li{
border-right: rgba(0,0,0,.25) 1px solid;
color: #666;
line-height: 30px;
margin-right: 10px;
padding-right: 10px;
}
.searchResults .meta li:last-child{
margin-right: 0;
padding-right: 0;
border-right: none;
}
.searchResults .meta a{color: #444;}
.searchResults .meta a:focus,
.searchResults .meta a:hover{color: #f0a911;}
.highlight{
background: #999;
color: #fff;
padding: 0 4px;
}
/* 404 error page */
.e404{
text-align: center;
margin: 40px 0 80px;
}
.e404 h1{
font-size: 78px;
color: #000;
margin: 0;
}
.e404 h2{
color: #555;
margin: 10px 0;
}
.e404 h3{
font-weight: normal;
color: #555;
margin: 0;
}
/* |||||||||| 5. Others |||||||||| */
/* Archives */
.archives h3{
color: #444;
margin-top: 0;
}
.archives .linkList,
.archives .miniBlogList,
.archives .tags{margin-bottom: 40px;}
.archiveList{margin: 20px 0 40px;}
.archiveList li{
display: block;
line-height: 24px;
}
.archiveList ul{
border-left: #000 2px solid;
border-color: rgba(0,0,0,.25);
margin-left: 4px;
padding-left: 16px;
}
.linkList{}
.linkList li{
display: block;
line-height: 24px;
}
.archiveList a,
.linkList a{color: #444;}
.archiveList a:focus,
.archiveList a:hover,
.linkList a:focus,
.linkList a:hover{color: #f0a911;}
/* |||||||||| 6. Third Party Styles |||||||||| */
/* Twitter widget */
#sbTweets,
.query{}
.tweet_list{padding-bottom: 10px;}
.tweet_list li{
border-bottom: #000 1px dotted;
border-color: rgba(0,0,0,.5);
display: block;
line-height: 18px;
padding: 10px 0 10px 70px;
}
.tweet_list li:first-child{padding-top: 0;}
.tweet_list li:last-child{
border: none;
padding-bottom: 0;
}
.tweet_list .tweet_avatar {
display: block;
float: left;
height: auto;
margin: 0 0 0 -70px;
}
.tweet_list .tweet_time{
display: block;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
}
#tweets .tweet_list .tweet_time a{color: #444;}
.tweet_list .tweet_avatar img,
.flickr_badge_image img{
background: transparent url(../../images/cross-patt-img.png) 0 0 repeat;
padding: 5px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
/* for page footer widget */
#tweets ul{display: block;}
#tweets ul li{
display: none;
border: none;
margin-bottom: 20px;
padding: 10px 20px 10px 90px;
width: 330px;
}
#tweets ul li:first-child{display: block;}
/* flickr widget */
#flickr_badge_wrapper{}
#flickr_badge_wrapper{
margin-right: -20px;
overflow: hidden;
}
.flickr_badge_image{
float: left;
height: 80px;
margin: 0 20px 20px 0;
width: 80px;
}
.flickr_badge_image img{
height: 70px;
width: 70px;
}
/*
* jQuery Nivo Slider v2.7.1
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
*/
/* The Nivo Slider styles */
.nivoSlider{position:relative;}
.nivoSlider img{
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice{
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box{
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption{
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width: 100%;
z-index:8;
-moz-transition: height .2s linear;
}
.nivo-caption p{
padding:5px;
margin:0;
}
.nivo-caption a{display:inline !important;}
.nivo-html-caption{display:none;}
/* PLEASE check Box slides sub-section on Slides section (at the top of this file)*/
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a{
display: none;
position:relative;
z-index:9;
cursor:pointer;
}
.nivo-controlNav a.active{font-weight:bold;}
/* Elastic Slider */
.ei-slider{
position: relative;
width: 100%;
height: 400px;
margin: 0 auto;
}
.ei-slider-loading{
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index:999;
background: rgba(0,0,0,0.9);
color: #fff;
text-align: center;
line-height: 400px;
}
.ei-slider-large{
height: 100%;
width: 100%;
position:relative;
overflow: hidden;
}
.ei-slider-large li{
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
height: 100%;
width: 100%;
}
.ei-slider-large li img{width: 100%;}
.ei-title{
position: absolute;
right: 55%;
margin-right: 10%;
top: 40%;
}
.ei-title h2,
.ei-title h3{
background: #000;
background: rgba(0,0,0,.75);
padding: 10px;
text-align: right;
margin: 6px 0;
}
.ei-title h2{
font-size: 20px;
line-height: 1.2;
}
.ei-title h3{
font-size: 16px;
font-family: Lato, Arial, Helvetica, sans-serif;
font-style: italic;
line-height: 1.4;
color: #ccc;
}
.ei-slider-thumbs{
height: 8px;
margin: -8px auto 0;
position: relative;
z-index: 10;
}
.ei-slider-thumbs li{
position: relative;
float: left;
height: 100%;
width: 100px;
}
.ei-slider-thumbs li.ei-slider-element{
top: 0px;
left: 0px;
position: absolute;
height: 100%;
z-index: 11;
text-indent: -9000px;
background: #1292db;
}
.ei-slider-thumbs li a{
display: block;
text-indent: -9000px;
background: #000;
background: rgba(0,0,0,.9);
width: 100%;
height: 100%;
cursor: pointer;
-webkit-transition: background 0.2s ease;
-moz-transition: background 0.2s ease;
-o-transition: background 0.2s ease;
-ms-transition: background 0.2s ease;
transition: background 0.2s ease;
}
.ei-slider-thumbs li a:hover{background-color: rgba(0,0,0,.25);}
.ei-slider-thumbs li img{
position: absolute;
bottom: 50px;
opacity: 0;
z-index: 999;
max-width: 100%;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-box-reflect:
below 0px -webkit-gradient(
linear,
left top,
left bottom,
from(transparent),
color-stop(50%, transparent),
to(rgba(255,255,255,0.3))
);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.ei-slider-thumbs li:hover img{
opacity: 1;
bottom: 8px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
/* Please delete these demo codes from your production version. */
#demo{
position: fixed;
left: 0px;
top: 100px;
z-index: 99999;
background: #222;
background-color: rgba(0,0,0,.9);
border: #000 1px solid;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
padding: 4px 20px 20px;
width: 448px;
}
#demo .cntrl{
background: #111;
background-color: rgba(0,0,0,.9);
display: block;
height: 32px;
width: 32px;
padding: 5px;
position: absolute;
right: -43px;
top: 150px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomright: 2px;
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-right-radius: 2px;
-ms-border-top-right-radius: 2px;
-ms-border-bottom-right-radius: 2px;
-o-border-top-right-radius: 2px;
-o-border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
#demo h5{
font: bold 14px/1.2 Arial, Helvetica, sans-serif;
color: #999;
padding-bottom: 4px;
border-bottom: rgba(255,255,255,.1) 1px solid;
}
#demo h5 small{
display: block;
font-weight: normal;
font-size: 10px;
color: #999;
}
#themeColors{
overflow: hidden;
}
#themeColors li{
float: left;
display: block;
line-height: 24px;
height: 24px;
width: 24px;
border: #000 1px solid;
margin: 0 4px 4px 0;
}
#themeColors li a{
display: block;
height: 24px;
width: 24px;
}
#themeColors li .default{background: #1292db;}
#themeColors li .green-pink{background: #11ad41;}
#themeColors li .orange-green{background: #e94025;}
#themeColors li .paste-coffee{background: #0c958a;}
#themeColors li .violet-metalred{background: #3950c7;}
#demo .active a,
#demo li a:focus,
#demo li a:hover{color: #fff;}
#headerBGColor{overflow: hidden;}
#headerBGColor li{
float: left;
display: block;
line-height: 18px;
border: #000 1px solid;
margin-right: 10px;
width: 74px;
}
#headerBGColor li a{
display: block;
border: rgba(255,255,255,.05) 1px solid;
background-color: rgba(255,255,255,.35);
padding: 4px 20px;
color: rgba(255,255,255,.75);
text-align: center;
}
#headerBGColor li a.active,
#headerBGColor li a:focus,
#headerBGColor li a:hover{
background-color: #111;
color: #fff;
}
#headerPatterns,
#contentPatterns,
#footerPatterns{
overflow: hidden;
}
#headerPatterns li,
#contentPatterns li,
#footerPatterns li{
display: block;
float: left;
width: 24px;
height: 24px;
margin: 0 2px 2px 0;
border: #000 1px solid;
}
#headerPatterns li a,
#contentPatterns li a,
#footerPatterns li a{
border: rgba(255,255,255,.05) 1px solid;
background: transparent;
background-repeat: repeat;
background-position: 0 0;
display: block;
height: 24px;
width: 24px;
}
#headerPatterns li[data-type="dark"]{display: none;}
/* remove image button */
#demo .none{background-image: url(../../../assets/demo.jpg);}
/* content patterns */
#demo li[data-type="light"] .default,
#contentPatterns li .default{background-color: #fff;background-image: url(../../images/noise-patt.png);}
#demo li .brilliant{background-image: url(../../images/patterns/light/brillant.png);}
#demo li .clean_textile{background-image: url(../../images/patterns/light/clean_textile.png);}
#demo li .corrugation{background-image: url(../../images/patterns/light/corrugation.png);}
#demo li .embossed_paper{background-image: url(../../images/patterns/light/embossed_paper.png);}
#demo li .flowertrail{background-image: url(../../images/patterns/light/flowertrail.png);}
#demo li .frenchstucco{background-image: url(../../images/patterns/light/frenchstucco.png);}
#demo li .gplaypattern{background-image: url(../../images/patterns/light/gplaypattern.png);}
#demo li .greyfloral{background-image: url(../../images/patterns/light/greyfloral.png);}
#demo li .hexellence{background-image: url(../../images/patterns/light/hexellence.png);}
#demo li .lghtmesh{background-image: url(../../images/patterns/light/lghtmesh.png);}
#demo li .light_toast{background-image: url(../../images/patterns/light/light_toast.png);}
#demo li .light_wool{background-image: url(../../images/patterns/light/light_wool.png);}
#demo li .lil_fiber{background-image: url(../../images/patterns/light/lil_fiber.png);}
#demo li .little_triangles{background-image: url(../../images/patterns/light/little_triangles.png);}
#demo li .lyonnette{background-image: url(../../images/patterns/light/lyonnette.png);}
#demo li .reticular_tissue{background-image: url(../../images/patterns/light/reticular_tissue.png);}
#demo li .rough_diagonal{background-image: url(../../images/patterns/light/rough_diagonal.png);}
#demo li .scribble_light{background-image: url(../../images/patterns/light/scribble_light.png);}
#demo li .shinecaro{background-image: url(../../images/patterns/light/shinecaro.png);}
#demo li .shinedotted{background-image: url(../../images/patterns/light/shinedotted.png);}
#demo li .subtle_stripes{background-image: url(../../images/patterns/light/subtle_stripes.png);}
#demo li .tapestry_pattern{background-image: url(../../images/patterns/light/tapestry_pattern.png);}
#demo li .tex2res1{background-image: url(../../images/patterns/light/tex2res1.png);}
#demo li .tex2res3{background-image: url(../../images/patterns/light/tex2res3.png);}
#demo li .tex2res5{background-image: url(../../images/patterns/light/tex2res5.png);}
#demo li .triangles_pattern{background-image: url(../../images/patterns/light/triangles_pattern.png);}
#demo li .weave{background-image: url(../../images/patterns/light/weave.png);}
#demo li .white_tiles{background-image: url(../../images/patterns/light/white_tiles.png);}
#demo li .wide_rectangles{background-image: url(../../images/patterns/light/wide_rectangles.png);}
#demo li .worn_dots{background-image: url(../../images/patterns/light/worn_dots.png);}
/* Footer Patterns */
#demo li[data-type="dark"] .default{background-image: url(../../images/noise-patt-dark.png);}
#demo li .cartographer{background-image: url(../../images/patterns/dark/cartographer.png);}
#demo li .classy_fabric{background-image: url(../../images/patterns/dark/classy_fabric.png);}
#demo li .dark_dotted{background-image: url(../../images/patterns/dark/dark_dotted.png);}
#demo li .dark_geometric{background-image: url(../../images/patterns/dark/dark_geometric.png);}
#demo li .dark_matter{background-image: url(../../images/patterns/dark/dark_matter.png);}
#demo li .dark_Tire{background-image: url(../../images/patterns/dark/dark_Tire.png);}
#demo li .dvsup{background-image: url(../../images/patterns/dark/dvsup.png);}
#demo li .irongrip{background-image: url(../../images/patterns/dark/irongrip.png);}
#demo li .outlets{background-image: url(../../images/patterns/dark/outlets.png);}
#demo li .txture{background-image: url(../../images/patterns/dark/txture.png);}
#demo li .zigzag{background-image: url(../../images/patterns/dark/zigzag.png);}
/* RADAR PARLAMENTAR - PERSONALIZAÇÕES */
.votoAbertoDesc {
text-align: justify;
overflow: hidden;
}
.generoMain .half {
margin-top: 30px;
}
#linkLei {
text-align: center;
}
/* PLENARIA */
.container_flex {
display: flex; /* or inline-flex */
}
/*.votoParlamentar {*/
/*flex-grow: 4;*/
/*}*/
/*.filtrosVotosVotacao {*/
/*flex-grow: 3;*/
/*}*/
.myflex-spacer {
width: 10px;
}
.botao.ativado {
background-color: #444;
}
.com-margem {
margin: 20px;
}