/*
Theme Name: Come To Port
Theme URI: http://www.designcrumbs.com/
Description: Come To Port, designed and developed by Design Crumbs.
Version: 1.0
Author: Design Crumbs
Author URI: http://www.designcrumbs.com/
*/

/* Basic styles */
*
{
	margin:0;
	padding: 0;
}

@font-face {
    font-family: "Helvetica Light";
	src: url("fonts/heln-light.eot"); /*IE*/
    src: url("fonts/heln-light.ttf");
    }

@font-face {
    font-family: "Helvetica Roman";
	src: url("fonts/heln-light.eot"); /*IE*/
    src: url("fonts/heln-roman.ttf");
    }



html
	{
		font-family: verdana, arial, serif;
		font-size:10pt;
		color:#000000;
	}
	
h1,h2,h3,h4,h5,h6,.menu, .footer {
	font-family: 'Droid Sans', arial, serif;
}
	
body
{
	margin-bottom: 20px;
	margin: 0;
	text-align: left;
	padding: 0;
	background:url(images/background.png) #e5e5e5 top center repeat-x;
	color:#262626;
}

a {color:#000; text-decoration:underline;}
a:hover{text-decoration:none;}

img
{
	margin:0;
	padding:0;
	border:0;
}

.alignnone {
	border:solid 1px #000;
}

img.left
{
	float:left;
	margin:0;
}
img.right
{
	float:right;
	margin:0;
}

.alignright
{
float:right;
margin:0 0 15px 15px;
}

.alignleft
{
float:left;
margin:0 15px 15px 0;
}

.block {
	display:block;
	padding:0;
	margin:0;
}

.right {
	float:right;
}

.left {
	float:left;
}

.biopic {
	display:block;
	margin:-35px 0 0 390px;
	position:absolute;
	z-index:100;
}

/* Container */

#container
{
	width: 960px;
	margin: 0 auto -25px;
	position:relative;
	z-index:50;
}
/* Header */

#header
{
	padding: 0 10px 9px;
	border-bottom:1px solid #4b3a31;
	text-align: left;
	margin-top: 0;
	background-repeat: no-repeat;
	background-position: left top;
	width:940px;
	height:80px;
}
.logo {
	height: 60px;
	padding: 0;
	margin-top:20px;
	float: left;
}
.banner {
	height:370px;
	width:940px;
}

.pagetitle {
	border-top:1px solid #23150f;
	padding:9px 10px 0;
	margin-bottom:20px;
	width:940px;
	text-shadow:-1px -1px 1px #000000;
}
	
.welcometext {
color:#FFFFFF;
font-size:11pt;
line-height:13pt;
margin-top:5px;
text-align:center;
width:940px;
}

/* MENU -------------------------------------------------------------------------- */

.menu {
float:right;
height:80px;
padding:0;
max-width:580px;
margin-left:20px;
}

      .menu ul {
        margin: 15px 0 0;
        padding: 0px;
        list-style: none;
      }
       
      .menu ul li,
      .menu ul li a {
        float: left;
        display: block;
		padding-bottom:10px;
      }
       
      .menu ul li a {
        margin: 10px 10px 0;
        padding: 5px 10px;
        font-size: 15px;
        color: #fff;
        text-decoration: none;
      }

      .menu ul li a:hover,
      .menu .current_page_item a, .menu .current_page_item a:visited, .menu .current_page_parent a, .menu ul li.current_page_parent ul li a:hover {
         color: #fff;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
      }

	.menu ul li.current_page_parent ul li a, .menu ul li.current_page_item ul li a {
         background:transparent;
      }

	.menu ul li a:hover,
	.menu ul li.current_page_item a,
	.menu ul li.current_page_item ul li a:hover,
	.menu ul li.current_page_parent a,
	.menu ul li ul li.current_page_item a,
	.menu ul li.current_page_parent ul li a:hover {
        background: #211810; }

	#content blockquote
	{
		background:url(../images/blockback.png) #473628 top left no-repeat;
		border:1px solid #331f14;
	}

/* DROP DOWN MENUS */
#nav li ul {
 width: 15em;
 display:none;
 margin-top:45px;
padding-top:20px;
z-index:99;
}
#nav li
{
  position:relative;
}
#nav li:hover ul, #nav li.sfhover ul {
 display:block;
 position:absolute; 
 left:0px !important; left:-15em;
}
#nav li:hover ul
{
left: auto;
}
#nav li ul li {
 background: url(images/transblack.png);
 border-bottom:1px solid #262626; 
 border-left:1px solid #262626; 
 border-right:1px solid #262626;   
 position:relative;
 line-height:18px; 
 width:20em;
}

#port-submenu a {
	float:left;
	margin-right:20px;
	color:#695d55;
	text-decoration:none;
	font-size:15px;
}

#port-submenu a:hover, #port-submenu a.selected {
	color:#FFFFFF;
}

/* Home Perks */

.perk1 {
	width:300px;
	height:64px;
	float:left;
	margin:18px 20px 18px 0;
}

.perk2 {
	width:300px;
	height:64px;
	float:left;
	margin:18px 20px 18px 0;
}

.perk3 {
	width:300px;
	height:64px;
	float:left;
	margin: 18px 0;
}

.perks h3 {
	margin-bottom: 9px;
}

.perks h3 a {
	text-decoration:none;
}

.perks h3 a:hover {
	text-decoration: underline;
}


/* Content Area */

#content
{
	margin: 0;
	background:url(images/contentback.png) repeat-y center top;
	width:940px;
	padding:10px;
}

.contenttop {
	width:960px;
	height:10px;
	display:block;
	margin-top:10px;
	background:url(images/contenttop.png) top center no-repeat;
}

.contentbottom {
	width:960px;
	height:10px;
	display:block;
	background:url(images/contentbottom.png) top center no-repeat;
}

p
{
	margin-bottom: 10px;
	line-height: 1.6em;
}

h1 {
	font-size:34pt;
	margin-top:20px;
	color:#FFF;
	font-weight:100;
}

h1.hometitle {
	text-align:center;
}
	
#content h2,h3,h4,h5,h6 {
	margin-bottom: 10px;
	display:block;
	padding-top:5px;
	text-transform:uppercase;
}

#content ul, #content ol
{
	margin-bottom: 20px;
	padding-left: 25px;
}

#content blockquote
{
	margin-bottom:20px;
	padding:15px;
	color:#FFFFFF;
}

#content .post-content-blog
{
	border-bottom:1px dotted #262626;
	margin-bottom:30px;
	padding-bottom:20px;
}

#content .post h2 a
{
	color: #262626;
	text-decoration:none;
}

#content .post h2 a:hover
{
	color: #262626;
	text-decoration: underline;
}

#content .posthead {
	padding-bottom:10px;
}

#content .posttitle {
	float:left;
	max-width:480px;
}

#content .posttitle h2
{	
   	margin-bottom: 5px;
}

#content .postinfo {
	font-size: .8em;
}

#content .postcomments {
	float:right;
	padding: 6px 5px 4px;
	background: url(images/postcommentsback.png) no-repeat;
	width:120px;
	height:30px;
	display:inline;
	text-align: center;
}

#content .postcomments a {
	color: #FFF;
	text-decoration: none;
}

/* Primary Content */

#primaryContentContainer
{
	float:left;
	width: 610px;
	text-align:left;
	padding-left:10px;
}

#content ul {
list-style-image: url(images/arrow.png);
}

/* ===================================================== Portfolio ======================= */

#portsinglepost {
	margin-top:30px;
}

#portleft
{
	float:left;
	width: 580px;
	text-align:left;
	padding-left:10px;
}

#portright {
	float:right;
	width:330px;
	margin:0 10px 0 0;
}

#portitem {
	width:578px;
	border:1px solid #9f9f9f;
	background:#FFFFFF;
}

#portitem img {
	border:5px solid #FFFFFF;
	width:568px;
}

#portdetails {
	background: url(images/portrightmid.png) left top repeat-y;
	width: 	290px;
	text-align:left;
	font-size: 14pt;
	padding:0 20px;
}

#portdetails .singledetail {
	padding: 20px 0;
}

#portdetails .singledetail p {
	margin:0;
	padding:0;
}

#portdetails h2 {
	text-transform:uppercase;
	margin-bottom:20px;
	font-size: 17pt;
}

.backtoportmargin {
	margin-top:40px;
}

#backtoport {
	background:url("images/portrightmid.png") repeat-y scroll left top transparent;
	font-size:16pt;
	margin:0;
	padding:0 20px 0;
	text-transform:uppercase;
}

#backtoport img {
	margin:3px 20px 0 0;
	float:left;
}

#backtoport a {
	text-decoration:none;
}

#backtoport a:hover {
	color: #45aa58;
}

.nextprev {
	width:330px;
}

/* ===================================================== Singleport Styles for Hover over ======================= */

/* --- Container configuration ---------------------------------------------------------- */
#portdisplay {
	margin:0 20px;
}

.singleport {
	width:250px;
	height:170px;
	padding: 7px 7px 31px;
	overflow: hidden;
    position: relative;
	float:left;
	display:inline;
}

.portmargin {
	margin:0 20px 30px;
}

.homemargin {
	margin:0 20px 10px;
}

.singleport .singleportoverlay {
	background:url(images/singleport.png) top left no-repeat;
	position:absolute;
	z-index:50;
	top:0;
	left:0;
	width:250px;
	height:170px;
	padding: 7px 7px 31px;
	display:block;
}

/* This is so that the 2nd thumbnail in each row fits snugly. You will want to add a similar
   class to the last thumbnail in each row to get rid of the margin-right. */
.no-margin {
    margin-right: 0;
}

/* --- Link configuration that contains the image and label ----------------------------- */
.singleport a {
    display: block;
    position: relative;
	text-decoration:none;
}

.singleport a img {
    height: 177px;
	left:-5px;
	top:-3px;
    position: relative;
    width: 260px;
	z-index:40;
	background:#FFFFFF;
}

/* --- Label configuration -------------------------------------------------------------- */
.singleport a span {
    display: none;
    font-size: 12pt;
    font-weight: bold;
    height: 100px;
    padding-top: 70px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    width: 250px;
    z-index: 100;
}
    .singleport a span em {
        display: block;
        font-size: 0.8em;
        font-weight: normal;
    }

/* --- Dark hover background ------------------------------------------------------------ */
.dark-background {
	background: #39281A; /* The Fallback */
    background: rgba(15, 15, 15, 0.6);
    color: #fff;
    text-shadow: #000 0px 0px 20px;
}
    .dark-background em {
        color: #ccc;
    }



/* ===================================================== Sidebar Styles ======================= */

#sidebar {
	float: right;
	width: 	280px;
	margin-left:20px;
	padding-left:20px;
	text-align:left;
	background:url(images/sidebarback.png) left center no-repeat;
	min-height:365px;
}

#sidebar h2 {
	text-shadow:-2px -2px 1px #FFFFFF;
}

#sidebar h2 a {
	text-decoration:none;
	}
	
#sidebar a {
	color: #339900;
	font-style:italic;
	text-decoration: underline;
}

#sidebar a:hover {
	text-decoration: none;
}

#sidebar-submenu a {
	display:block;
	padding:5px 0;
	color: #060606;
	text-decoration: none;
	font-style: normal;
	margin-right:30px;
}

#sidebar-submenu a:hover {
	color: #339900;
}

#sidebar-submenu a#mid {
	border-top:1px solid #F4F2F1;
	border-bottom:1px solid #F4F2F1;
}

#sidebar ul, .footer ul
{
	padding:0;
	list-style:none;
	list-style-image: none;
}

#sidebar ul ul
{
	margin:0;
	padding:0;
	list-style:none;
	list-style-image: none;
}

#sidebar li
{
	margin:5px 0;
	padding:0;
	list-style:none;
	list-style-image: none;
}

#sidebar form
{
	margin-bottom: 0;
	padding-top: 0;
	padding-right: 1em;
	padding-bottom: 0;
	padding-left: 0;
	width: 234px;
}

.widget {
	margin:0 0 20px;
}

/* Footer */
.footer {
	text-align:left;
	background:url(images/footerback.png) center top repeat-x;
	color:#FFFFFF;
	position:relative;
	z-index:10;
	font-weight:100;
	font-size:11pt;
}
.footer h2 a {text-decoration:none;}
.footer a { color:#FFFFFF; font-weight:normal; text-decoration: none;}
.footer a:hover {color:#d3d3d3;}
.footerparent {text-align:center; width:100%; height:220px; background:url(images/footerbokeh.png) center bottom no-repeat;}
.footermain {height:210px; padding:10px 0 0;}
.footermain #container {text-align:left; width:900px; padding:20px 30px 0; margin:0 auto;}
.footerlinks {margin:11px auto 0; width:940px; text-align:left;}
.footerlinks a { font-weight:normal; text-decoration:none;}
.footerlinks a:hover {text-decoration:underline;}

.footerthird {
float:left;
height:140px;
width:260px;
margin:0 20px;
padding:20px 0;
font-weight:100;
}

.footer h2 {
	margin-bottom:10px;
	font-size:20pt;
	font-weight:100;
}

.footer ul li {
	border-bottom: 1px solid #4f3d34;
	margin-bottom:10px;
}
.footer ul li a {
	border-bottom:1px solid #281a13;
	padding-bottom:6px;
	display:block;
}

.footer ul.tweets li {
	margin-bottom:0;
	border:none;
}
.footer ul.tweets li a {
	display:inline;
	padding:none;
	border:none;
}

/*extra*/

#s {
	border:1px solid #959595;
	color:#262626;
	padding:5px 5px 6px;
	width:140px;
	}
	
.elbutton {
	padding:0 5px;
	height:28px;
	color:#262626;	
	}
	
.clear
{
	clear: both;
}

#content li .cmtinfo
{
	font-size:0.9em;
	margin:0;
	padding:5px;
	border-bottom:#b4002f 0px dashed;
}

.cite
{
	margin-bottom:5px;
}

.cmtinfo {
	width:120px;
	background:url(images/commentback.png) no-repeat top right;
	float:left;
	display:inline;
	margin-bottom:20px;
}

.thecomment {
	width:460px;
	padding:15px 20px 8px;
	background:#f2f2f2;
	float:left;
	display:inline;
	margin-bottom:20px;
}

#content ol.commentlist
{
	margin:0;
	padding:0 1em;
}
#content ol.commentlist li
{
	padding:0.5em 0;
	margin:0;
}
#commentform
{
	margin:10px 0;
}

#comment {
width: 458px;
height: 120px;
border: 1px solid #262626;
}

.nocomments
{
	text-align:center;
	font-size:0.9em;
}

.elcommentform {
	padding:20px 20px 10px;
	background:#F2F2F2;
	border:1px solid #e9e9e9;
}

.trackback
{
	padding:0px 17px;
}
.feed
{
	padding:0px 17px;
}
.commentsfeed
{
	background:#efefef;
}
#content,#sidebar,#primarycontent, #footer, .widget {
    overflow: hidden;
}

.timesince {
	display:block;
	font-size:8pt;
	margin-top:5px;
}

.clear {
	clear:both;
}

.latestproject {
	background:url(images/latestback.png) top left no-repeat;
	padding: 10px;
	height:230px;
	width:600px;
	margin-bottom:20px;
}

.latestinfo {
	float:left;
	display:inline;
	padding-top:50px;
	color:#FFF;
	width:280px;
}

.latestinfo h3 {
	color:#32b04a;
}

.latestinfo a {
	color:#32b04a;
	text-decoration:none;
}

.latestinfo a:hover {
	text-decoration: underline;
}