/*  
Theme Name: Porter Panther
Theme URI: http://porterpanther.com
Description: A custom theme for porterpanther.com
Author: Gabriel Paez
Author URI: http://emaginorium.com
Version: 1.0
Tags:
*/

/*RESETS*/
*{padding:0; margin:0;}
ul{list-style-type:none;}
fieldset{border:none;}
a img{border:none;}

/*GENERIC GLOBAL STYLES*/
body{font-family:Garamond, Times New Roman, Times, serif; font-size:16px; color:#9a9a9a; line-height:18px;}
label{display:block;}
.clearfix{clear:both;}
a, a:visited, a[href^="mailto"], .btn{color:#9a9a9a; text-decoration:none;}
a:hover{color:#c4c4c4; text-decoration:underline;}
.btn{cursor:pointer;}

/*HEADERS*/
h1{font-size:30px; color:#f0e904; font-weight:normal; line-height:28px; margin-bottom:10px;}
p{margin-bottom:16px;}

/*GLOBAL*/
body{background-image: url('images/bg-tile.jpg'); background-repeat: repeat;}
#wrapper{background-image: url('images/bg.jpg'); width:1226px; height:894px; }
#container{position:absolute; left:45px; top:45px; width:947px; margin-bottom:45px;}

/*HEADER*/
#header{height:94px; width:100%; position:relative;  z-index:1;}
#headerimg{float:left;}
#headerimg a{display:block;}
#header #vignette{background-color:#000;}
#topnav{position:absolute; right:0; bottom:24px;}
#topnav a{color:#747474; font-weight:bold;}
#topnav a:hover{color:#f0e904; text-decoration:none;}
#topnav li{float:left; margin-left:15px; font-family:Arial, sans-serif; font-size:14px; text-transform:uppercase; position:relative;}
#topnav li.current_page_item a,
#topnav li.current_page_ancestor a{color:#f0e904;}
#topnav li ul{position:absolute; bottom:18px; width:53px;}
#topnav li ul{display:none;}
#topnav li:hover ul{display:block;}
#topnav li ul li{float:none; margin-left:0; font-size:11px; text-align:center; height:21px;}
#topnav li.current_page_item li a,
#topnav li.current_page_ancestor li a{color:#747474;}
#topnav li.current_page_ancestor li.current_page_item a{color:#f0e904;}

/*PAGE*/
.pg{position:absolute; top:78px; z-index:0; width:947px;}
.content{margin-top:18px;}
.content strong{font-size:16px; font-weight:normal; color:#ffffff;}
.content a, .content a[href^='mailto']{color:#9a9a9a; text-decoration:underline;}
.content a:hover{color:#c4c4c4; text-decoration:none;}

/*SIDEBAR*/
#sidebar {float:right;}
#sidebar .sideNav{margin-top:16px;}
#sidebar .sideNav li{margin-bottom:6px;}
#sidebar .sideNav a{display:block; width:197px; height:28px; background: url('images/side-nav-off.gif') no-repeat; font-family:Arial, sans-serif; font-size:14px; color:#9a9a9a; text-transform:uppercase;}
#sidebar .sideNav a:hover,
#sidebar .sideNav .current_page_item a{background: url('images/side-nav-on.gif') no-repeat; text-decoration:none; color:#3f3f3f;}
#sidebar .sideNav span{display:block; text-align:right; padding:5px 13px;}
.widget{border-top:solid #838383 1px; padding-top:7px; margin-top:24px; overflow:hidden;}
.widget .headline{font-family:Arial, sans-serif; font-size:15px; color:#f0e904; margin:5px; display:block;}
.widget .bod{display:block; line-height:19px;}
.widget a{position:relative; display:block;}
.widget a:hover{text-decoration:none;}
.widget .pTitle{position:absolute; bottom:0; left:0; width:197px; height:33px; background-color:#000; text-align:right;}
.widget .pTitle span{display:block; margin:9px 16px; font-family:Arial, sans-serif; font-size:14px; color:#f0e904;}
.widget .knob{background: url('images/corner-arrow.gif') no-repeat; width:8px; height:8px; position:absolute; bottom:5px; right:5px;  }

/*FOOTER*/
#footer{border-top: solid 1px #767676; font-family:Arial, sans-serif; font-size:11px; color:#767676; clear:both; margin-top:20px;}
#footer #leftFooter{float:left;}
#footer #rightFooter{float:right;}
#footer ul li{float:left; margin-top:8px; position:relative;}
#footer ul li{border-left:solid 1px #767676; margin-left:5px; padding-left:5px; line-height:10px;}
#footer ul li.first{border:none; margin-left:0; padding-left:0;}
#footer a, #footer .btn{color:#767676;}
#footer a:hover, #footer .btn:hover{color:#9a9a9a; text-decoration:none;}

#footer .creditPanel{left:51px; bottom:-14px;}
#footer .creditPanel{display:none; background: url('images/left-arrow.gif') no-repeat 0px 68px; position:absolute; width:11px; height:95px; }
#footer .creditPanel .creditInner{background-color:#f0e904; width:274px; height:95px; position:relative; left:11px; }
#footer .creditPanel .creditClose{background: url('images/yellow-close.gif') no-repeat; position:absolute; right:0; top:0; width:27px; height:25px; }
#footer .creditPanel .creditTitle{color:#212121; font-size:14px; padding:18px 22px 0 14px; letter-spacing:1px;}
#footer .creditPanel .credit{color:#565656; font-size:13px; padding:14px 22px 0 14px;}
#footer .creditPanel .credit a{color:#212121; text-decoration:underline;}
#footer .creditPanel .credit a:hover{text-decoration:none;}

/*HOME*/
#pgHome .content{width:562px;}
#pgHome .featured{float:right; width:352px; background: url('images/featured-work.gif') no-repeat 1px 0px; padding-top:22px; margin-top:18px;}
#pgHome .featured .divide{border-bottom:solid 1px #605d18; margin:9px 1px;}
#pgHome .featured a img{border:solid 1px #212121;}
#pgHome .featured a:hover img{border:solid 1px #f0e904;}
#pgHome .featured .left{float:left;}
#pgHome .featured .right{float:right;}
#pgHome .featured .item {position:relative;}
#pgHome .featured .item .knob{background: url('images/corner-arrow.gif') no-repeat; width:8px; height:8px; position:absolute; top:64px; right:5px;  }
#pgHome .featured .item .name{display:block; text-align:right; color:#f0e904; font-size:18px; margin-top:3px;}
#pgHome .featured .item .category{display:block; text-align:right; font-family:Arial, sans-serif; font-size:12px; color:#9a9a9a; text-transform:uppercase;}
#pgHome .widget{border-top:none; padding-top:0; margin-top:0;}
#pgHome .widget .pTitle{bottom:1px; left:1px; width:349px;}

/*ABOUT*/
#pgAbout .content{width:720px;}

/*WORK LANDING*/
#pgAbout .content{width:675px;}
#pgWorkLanding .sections a{display:block;}
#pgWorkLanding .sections .basicSection{float:left; margin-left:4px; margin-bottom:4px;}
#pgWorkLanding .sections .first{margin-left:0;}
#pgWorkLanding .sections .reel{border-top:solid 6px #f0e904;}

/*CONTACT*/
#pgContact .content{width:720px;}
#pgContact .link {margin-bottom:12px;}
#pgContact .link a{font-family:Arial, sans-serif; font-size:11px; color:#f0e904; text-transform:uppercase; font-weight:bold; text-decoration:none; padding-right:1px;}
#pgContact .link a:hover{text-decoration:underline;}
#pgContact .link:after{content:url('images/right-arrow.gif');}

/*THOUGHTS*/
#pgThoughts #thoughtGrid {position:relative;}
#pgThoughts #thoughtGrid .post{float:left; margin-right:30px; margin-bottom:30px; width:165px; height:108px; overflow:hidden; background-color:#000;}
#pgThoughts #thoughtGrid .post a{display:block; text-align:justify;}
#pgThoughts #thoughtGrid .post a:hover{text-decoration:none;}
#pgThoughts #thoughtGrid .post .headline{font-family:Arial, sans-serif; font-size:15px; color:#f0e904; margin:5px; display:block;}
#pgThoughts #thoughtGrid .post .bod{display:block; line-height:19px;}
#pgThoughts #thoughtGrid .last{margin-right:0;}
#pgThoughts #thoughtGrid a{display:block;}
#pgThoughts .navigation{float:right; font-family:Arial, sans-serif; font-size:12px; color:#fff; clear:both;}
#pgThoughts .navigation a img{vertical-align:text-bottom;}

/*THOUGHT*/
#pgThought .content{width:720px;}
#pgThought .customEmbed{margin-top:16px;}
#pgThought h1{font-family:Arial, sans-serif; font-size:20px; line-height:20px; font-weight:bold;}
#pgThought .back img{vertical-align:middle;}
#pgThought .back a{line-height:18px; font-family:Arial, sans-serif; font-size:12px; color:#fff;}
#pgThought .back a:hover{text-decoration:none; color:#9A9A9A;}

/*WORK*/
#pgWork .stage{width:100%; background-color:#000;}
#pgWork .stageSide{float:right; padding-left:20px; padding-right:10px; margin-top:150px;}
#pgWork .slimSide{width:135px;}
#pgWork .fatSide{width:330px;}
#pgWork .stageSide .client{font-family:Arial, sans-serif; font-size:18px; text-transform:uppercase; color:#959595; font-weight:bold;}
#pgWork .stageSide .categories{font-family:Arial, sans-serif; font-size:14px; color:#666;}
#pgWork .stageSide h1.project{font-size:24px; margin-top:8px;}

#pgWork .col{float:left; width:50%;}
#pgWork .copyGroup .creditCol{float:left; width:45%}
#pgWork .copyGroup{clear:left; padding-top:18px; padding-right:10px;}
#pgWork .copyGroup h3{font-family:Arial, sans-serif; font-size:14px; color:#fff; margin-bottom:10px;}
#pgWork .copyGroup .credit{padding-right:10px;}
#pgWork .copyGroup .credit .creditBy{float:left; padding-right:5px;}
#pgWork .copyGroup .credit .creditName{color:#fff; white-space:nowrap;}
#pgWork .copyGroup h2{font-family:Arial, sans-serif; font-size:18px; margin-bottom:10px; line-height:18px; color:#f0e904; font-weight:normal;}

/*BASENAV*/
#baseNavWrap{height:185px; overflow:hidden;}
#baseNav{width:100%; height:145px; background:url('images/base-nav-bg.png') repeat-x; position:fixed; bottom:0;}
#baseNav #baseNavBar{margin-top:7px; height:9px; width:100%; background-color:#3f3f3f; padding-left:5px;}
#baseNav #baseNavBar #showBtn{display:none;}
#baseNav .catMenu {float:left;}
#baseNav .catMenu .catBtn{margin-left:1px; margin-top:4px; width:90px; height:16px; background:url('images/base-cat.gif') no-repeat; text-align:right;}
#baseNav .catMenu .catBtn:hover,
#baseNav .catMenu .current_category_item{background:url('images/base-cat-selected.gif') no-repeat;}
#baseNav .catMenu .catBtn a{padding-right:11px; font-family:Arial, sans-serif; font-size:10px; color:#fff; line-height:14px; text-transform:uppercase;}
#baseNav .catMenu .catBtn:hover a,
#baseNav .catMenu .current_category_item a{text-decoration:none; color:#3f3f3f;}

#baseNav .strip{position: absolute; left:10px; right:10px;}
#baseNav .strip .navArrow{position: absolute; top:38px;}
#baseNav .strip .disabled{display:none;}
#baseNav .strip .nextPage{right:12px;}
#baseNav .strip .prevPage{left:103px;}
#baseNav .strip .scrollable{position: absolute; left:139px; right:49px; overflow:hidden; height:120px;}
#baseNav .strip .scrollable .items {width:20000em; position:absolute;} 
#baseNav .strip .scrollable .item{float:left; margin:7px 10px 0 0; border-top:solid 4px #000; padding-top:6px;} 
#baseNav .strip .scrollable .itemTitle{display:block; color:#fff; font-size:14px;} 
#baseNav .strip .scrollable .item a img{border:solid 1px #000;}
#baseNav .strip .scrollable .item a:hover img{border:solid 1px #f0e904;}
#baseNav .strip .scrollable .current_item{border-top:solid 4px #f0e904;}