/*
Theme Name: My port theme 2.0
Theme URI: http://smallestdecisions.net
Description: Portfolio theme
Author: me
Author URI: http://smallestdecisions.net
*/
/*Reset*/

*					{ margin: 0; padding: 0; }
html, body			{ height: 100% }
body					{ background: black url(charcoal_pattern_bg_darker.jpg) repeat top;} 
ul li					{list-style: none;} 
a					{outline: none; text-decoration: none;}
a img				{border: none;}
img					{vertical-align: middle;}
table					{border-collapse: collapse;}

/*Utility*/

.floatLeft			{float: left;}
.floatRight			{float: right;}
.clear				{clear: both;}
.button				{border: 1px solid black; background: white; color: black; padding: 3px;}
.button:hover		{border: 1px solid white; }

#searchsubmit		{margin: 0 0 -8px 0;}

/*Typography*/
a, a:visited		{color: white; text-decoration: underline;}
a:hover				{color: #9B0B0B; text-decoration: none;}  

/*Structure*/
#page-wrap			{margin: 0px auto;  font-size: 62.5%; font-family: 'Droid Serif', Trebuchet MS, serif; color: #d9d9d9;}/*color: #cccccc;*/
#main-col			{padding: 8px 0; font-size: 1.6em; line-height: 1.6em;} /*line-height: 1.8em;*/
#main-col-inside	{ position: relative; padding: 0px 0 0 0;} 
.inside				{width: 1024px; margin: 0px auto; } 

#page-content		{background: url(dotted_border_vert_gray_pat.png) repeat-y top; padding: 0 30px; position: relative;} 
#page-content-port	{background: url(dotted_border_vert_gray_pat.png) repeat-y top; padding: 0 20px; position: relative;}
#page-content-contact {background: url(dotted_border_vert_gray_pat.png) repeat-y top; padding: 0 30px; position: relative;} /*added 2014*/
#top-dots			{position: absolute; top: -26px; width: 1025px; height: 26px; background: url(dotted_border_top_gray_pat.jpg) no-repeat top;}
#bottom-dots		{position: absolute; bottom: -26px; width: 1025px; height: 26px; background: url(dotted_border_bottom_gray_p.jpg) no-repeat bottom;}

/*try removing dot border*/
#page-content		{background-image: none;} 
#page-content-port	{background-image: none;}
#page-content-contact {background-image: none;} 
#top-dots, #bottom-dots	{display: none;}

/*Header*/
#header				{height: 300px;} 
#header-inside h1	{font-size: 44px; height: 50px; padding: 10px 0; color: white; }
#header-inside 		{position: relative;}
#skip				{text-indent: -99999px;}
#sig				{display:none;font-size: 2.2em; color: white; position: absolute; bottom: 10px;}

/*Menu*/
#menu-bar			{height: 267px;} 
#main-nav			{list-style: none; text-indent: -99999px;}
#main-nav li			{display: inline; float: left;}
#main-nav li.page-item-3 a  {background: url(sprite_logo2.jpg) no-repeat top; width: 279px; height: 267px;}
#main-nav li.page-item-14 a {background: url(sprite_port.jpg) no-repeat top; width: 164px; height: 267px;}
#main-nav li.page-item-226 a {background: url(sprite_about.jpg) no-repeat top; width: 127px; height: 267px;}
#main-nav li.page-item-564 a {background: url(sprite_contact.jpg) no-repeat top; width: 170px; height: 267px;} 
#main-nav li.page-item-2 a {background: url(sprite_faq.jpg) no-repeat top; width: 111px; height: 267px;} 
#main-nav li.page-item-384 a {background: url(sprite_services.jpg) no-repeat top; width: 173px; height: 267px;}
#main-nav li a, #main-nav li a:visited {background-position: top; display: block;}
#main-nav li a:hover			{background-position: bottom;}
#main-nav li.current_page_item a {background-position: bottom;}
#main-nav li.current_page_parent a {background-position: bottom;}

/*Footer*/
#footer				{height: 115px; padding-top: 50px; font-size: 1.6em; line-height: 1.6em;} /* was height 250px */
#footer-inside		{padding-top: 25px; color: white; position: relative;}
#foot-nav			{width: 500px; float: left; padding-left: 20px;}
#foot-nav li			{display: inline;}
#foot-nav a, #foot-nav a:visited {padding: 6px 25px 6px 0px; } 
#foot-nav li.current_page_item a {color: #9B0B0B; text-decoration: none;}
#foot-nav li.current_page_parent a {color: #9B0B0B; text-decoration: none;}
#searchbar			{width: 250px; float: right; margin: 0 250px 0 0;} /* position: absolute; top: 35px; right: 30px;  */
#footer-credits p 	{padding-left: 20px;}
#logo-small			{position: absolute; width: 128px; height: 131px; background: url(logo_small.jpg) no-repeat top; right: 5px; bottom: 5px;}
#footer-backtotop		{display: none;}

/*Specific page styling*/
/*main page*/
#firstline			{font-size:1.4em; font-weight:normal; padding: 0 0 8px 0;} 
#intro				{width: 462px; float: left;  padding: 0 20px 0 0;}
#intro h2			{font-size: 1.4em; margin: 0 0 20px 0; border-bottom: 2px #222222 dotted;} 
#featured-project	{width: 462px; float: right; padding: 0 0 10px 0; } 
#featured-project h2	{font-size: 1.4em; margin: 0 0 20px 0; border-bottom: 2px #222222 dotted;}
#featured-project p	{padding: 0 0 0px 10px;} 
#featured-project h3  {font-size: 1.1em; margin: 15px 0 5px 10px; border-bottom: 2px #222222 dotted;}
#featured-project a	{font-size: 1.0em;}
#featured-thumb		{width: 290px; height: 150px; border: 2px white solid; margin: 0 0 8px 0; overflow: hidden;}

/*services separate page*/
#services-page h2	{font-size: 1.4em;}
#services-page h3	{font-size: 1.2em; margin: 0 0 10px 0; border-bottom: 2px #222222 dotted;} 
#services-page li		{padding-left: 8px; padding-bottom: 6px;}
#services-page ul 	{padding-left: 8px; padding-bottom: 3px; text-indent: -1em;} 

/*FAQ page*/
.question			{font-weight: bold; font-size: 1.2em; color: white; margin: 0 0 20px 0; border-bottom: 2px #222222 dotted;}

/*Contact page*/
#contact input:focus, #contact select:focus, #contact textarea:focus {background:#EBEBEB;}
.buttons			{margin: 9px 0 0 0;} /*10px*/
#contact p.error	 {color: #9B0B0B; font-size: .8em; padding: 0 0 5px 0;} /*added 2014, for jquery form, check the sizing/padding*/
/*for jquery validation version */
#contactForm				{padding: 15px 0 0 35px;} /*was 20px*/
ul.forms li					{padding: 0 0 9px 0;} /*was 10px*/
.anti-spam-notice			{font-size: 15px;}  /*added 2014, for jquery form*/
.active-label				{font-weight: bold;}
.missing-input				{border: red 2px solid;}
.error						{font-size: 16px; position: relative; top: 5px;}
.none						{display: none;} 

/*Portfolio page, new design*/
#categories			{font-size: 1.2em; padding: 0 20px;}
#categories-links	{padding: 10px 0 10px 20px;} /*was padding: 10px 0 30px 20px; changed 2014*/
#categories-links li	{display: inline;}/*padding: 10px 10px 10px 20px; padding: 10px 20px 10px 20px;*/
#categories-links li a  {padding: 10px 35px;}
/*.categorygroup		{height: 450px;} */
.top				{font-size: .6em; margin: 5px 0 35px 20px; clear:both;} /*margin: 0 0 55px 0;*/
.site				{width: 310px; float: left; padding: 0 0 25px 18px; } 
.site-thumb			{width: 290px; height: 150px; overflow: hidden; border: 2px white solid;} 
.site h3				{color: white; font-size: 1.2em; padding: 10px 4px 4px 4px;}
.site p				{font-size: .8em; padding: 0 0 0 5px;}
.outsidelink		{font-size: 0.7em !important; color: #d9d9d9 !important; font-style: italic; line-height: 10px; margin-left: 10px}
#portfolio h2		{color: white; font-size: 1.4em; padding: 10px 0 35px 20px; border-top: 2px #222222 dotted;}/*10px 0 35px 0*/
#portfolio a			{font-size: 1.4em;}
#portfolio			{padding: 20px 0 0 0;} /*added 2014 after the line with a full description page link up top*/
#thumb-theme1		{display: none;}
/*#cat-weddingbus		{height: 760px;}*/
/*#cat-blogs			{height: 760px;}*/

/*Portfolio single page*/
.website-details	{border-top: #222222 2px dotted; padding: 35px 30px 30px 30px; margin: 10px 0 0 0;}/*padding: 20px 30px 20px 30px;*/
.website-details h3	{color: white; font-size: 1.5em; font-weight: normal; padding: 0px 0px 20px 4px;}
.thumbnail			{width: 400px; padding-right: 25px; padding-bottom: 15px; float: left;} /* height: 300px; */
.thumbnail-ani		{width: 400px; float: left; border: white 2px solid; margin-bottom: 15px; margin-right: 25px;}
.thumbnail img		{border: white 2px solid;}
.description		{} /*was width: 500px; float: right; */
.description-ani	{} /* width: 500px; padding-left: 10px; float: right; */
.prev-next-design	{display: none; text-align: center; padding: 60px 0 0 0;} /*padding: 20px 0 0 0; */
.prev-next-design a	{padding: 3px 5px 3px 5px;}
.testimonial		{padding: 15px 0px 5px 0px;}
#site-aam	{border-top: 0; padding-top: 20px;} /*remove top border on first project*/
#site-ssc .thumbnail {padding-bottom: 45px;}/*to prevent awkward line wrap break*/
#ani-whiteroom		{padding-bottom: 20px;}
/*add heights for each site ID to speed up direct link to project page load from port page*/
#site-aam			{height: 1064px;}
#site-evilhr		{height: 782px;}/*height: 672px;*/
#site-fab4eyes		{height: 859px;}
#site-hrfarm		{height: 480px;}
#site-career		{height: 910px;}
#site-fasttrack		{height: 731px;}
#site-rustic		{height: 506px;}
#site-asbaker		{height: 552px;}
#site-bkgmoney		{height: 603px;}
#site-saj			{height: 353px;}
#site-derekkelly	{height: 365px;}
#site-layne			{height: 365px;}
#site-ssc			{height: 603px;}
#site-icc			{height: 365px;}
#site-jli			{height: 481px;}
#site-roberts		{height: 365px;}
#ani-chess			{height: 365px;}
#ani-whiteroom		{height: 365px;}

/* with prev-next arrows and original padding on .website-details
#site-aam			{height: 1230px;}
#site-evilhr		{height: 948px;}
#site-fab4eyes		{height: 1025px;}
#site-hrfarm		{height: 672px;}
#site-career		{height: 1076px;}
#site-fasttrack		{height: 897px;}
#site-rustic		{height: 698px;}
#site-asbaker		{height: 718px;}
#site-bkgmoney		{height: 769px;}
#site-saj			{height: 519px;}
#site-derekkelly	{height: 531px;}
#site-layne			{height: 531px;}
#site-ssc			{height: 769px;}
#site-icc			{height: 531px;}
#site-jli			{height: 647px;}
#site-roberts		{height: 531px;}
#ani-chess			{height: 531px;}
#ani-whiteroom		{height: 531px;}*/

/*media queries*/

@media (max-width: 1025px) {
/*general*/
#top-dots, #bottom-dots 		{display: none;}
#page-content, #page-content-port, #page-content-contact {background-image: none;}
.inside		{width: 99%; max-width: 100%;}
img			{max-width: 100%;}

/*navigation*/
#header					{height: auto;}
#main-nav li.page-item-14 a {width: 161px;}
#main-nav li.page-item-226 a {width: 123px;}
#main-nav li.page-item-564 a {width: 157px;} 
#main-nav li.page-item-2 a {width: 107px;} 
#main-nav li.page-item-384 a {width: 157px;}

/*home page*/
#intro, #featured-project	{width: 49%;}
#intro	{padding-right: 0px;}

/*portfolio pages*/
.site	{padding-left: 15px; width: 300px;}
.website-details {height: auto!important;}
.thumbnail			{padding-bottom: 30px;}
#site-ssc .thumbnail {padding-bottom: 30px;}
.thumbnail-ani		{margin-bottom: 30px!important;}

/*footer*/
#searchbar		{margin-right: 220px; width: 245px;}
}

@media (max-width: 1015px) {
/*navigation*/
#main-nav li.page-item-14 a {width: 164px; height: 117px;}
#main-nav li.page-item-226 a {width: 127px; height: 117px;}
#main-nav li.page-item-564 a {width: 170px; height: 117px;} 
#main-nav li.page-item-2 a {width: 111px; height: 117px;} 
#main-nav li.page-item-384 a {width: 173px; height: 117px;}

#main-nav li			{padding-left: 20px;}

#main-nav li a:hover			{background-position: 0px -268px;}
#main-nav li.page-item-564 a:hover	{background-position: -1px -268px;}
/*#main-nav li.page-item-3 a*/
#main-nav li.current_page_item a {background-position: 0px -268px;}
#main-nav li.current_page_parent a {background-position: 0px -268px;}

#categories-links li a 	{padding: 10px 20px;}
.site					{padding-left: 80px; width: 370px; height: 290px;}/*height 270 without page-wrap font increase*/
#portfolio h2			{padding: 10px 0 20px 20px;}

#foot-nav				{width: 462px;}
#foot-nav a, #foot-nav a:visited		{padding-right: 20px;}
#searchbar				{margin-right: 145px;}
}

@media (max-width: 980px) {
/*portfolio pages*/
.site					{padding-left: 65px;}
}

@media (max-width: 940px) {
/*portfolio pages*/
.site					{padding-left: 40px;}
}

@media (max-width: 900px) {
/*navigation*/
#main-nav li			{padding-left: 15px;} 

/*portfolio pages*/
.site					{padding-left: 10px; width: 360px;}

/*footer*/
#searchbar		{margin-right: 134px; width: 225px;} /*was margin-right: 140px*/
#foot-nav			{width: 432px;}
#foot-nav a, #foot-nav a:visited  {padding-right: 15px;}
}

@media (max-width: 840px) {
/*general*/
#page-wrap				{font-size: 75%;}/*increase overall font size*/

/*navigation*/
#header					{margin-bottom: 10px;}
#menu-bar				{height: auto;} /*height: 167px;*/
#main-nav li.page-item-3 a  {background: url(sm_logo2.jpg) no-repeat top; width: 175px; height: 167px;}
#main-nav li.page-item-14 a {width: 164px; height: 50px; background-position: 0px -55px;}
#main-nav li.page-item-226 a {width: 127px; height: 50px; background-position: 2px -55px;}
#main-nav li.page-item-564 a {width: 170px; height: 50px; background-position: -8px -55px;} 
#main-nav li.page-item-2 a {width: 111px; height: 50px; background-position: -3px -55px;} 
#main-nav li.page-item-384 a {width: 173px; height: 50px; background-position: -8px -55px;}

#main-nav li {padding: 5px 10px 0px 15px;} /*padding: 5px 10px 10px 15px;*/
#main-nav li.page-item-3		{padding-left: 10px;}
#main-nav li a:hover			{background-position: 0px -322px;}
#main-nav li.page-item-564 a:hover	{background-position: -9px -322px;}
#main-nav li.page-item-384 a:hover	{background-position: -8px -322px;}
#main-nav li.page-item-2 a:hover {background-position: -3px -322px;} 
#main-nav li.page-item-226 a:hover	{background-position: 2px -322px;}
/*#main-nav li.page-item-3 a:hover	{background-position: 0px -267px;}*/
#main-nav li.page-item-3 a:hover		{background-position: top;}

/*portfolio pages*/
#categories			{font-size: 1.0em;}
#page-content-port	{padding-left: 10px; padding-right: 10px;}
#portfolio a			{font-size: 1.2em;} /*adjusted after page-wrap increase font size*/
.site			{width: 345px; height: 310px;} /*height value increase needed with bigger page wrap font size*/
#site-aam			{padding-top: 5px;} /*first project on details page*/
#portfolio h2		{font-size: 1.2em;} /*adjusted after page-wrap font increase*/

#services-page h2	{font-size: 1.2em;} /*adjusted after page-wrap font increase*/

/*home page*/
#firstline				 {font-size: 1.0em;}
#intro, #featured-project {float: none; width: 100%;}
#intro h2, #featured-project h2	{font-size: 1.2em;} /*adjusted after page-wrap font increase*/
#featured-project		{padding-top: 15px;}
#featured-thumb			{float: left; margin-right: 25px;}
#featured-project h3		{border-bottom: 0;}

/*footer*/
#footer					{padding-top: 0; font-size: 1.34em;}/*font size adjust back to 16px with the 75% page-wrap increase*/
#footer-nav				{position: relative;}
#searchbar				{position: absolute; left: 20px; top: 30px; width: 300px;}
#footer-credits			{margin-top: 35px;}
#footer-backtotop		{display: inherit; position: absolute; right: 10px; top: 140px;}
#footer-backtotop a		{padding: 10px;}
}

@media (max-width: 780px) {
#categories-links li a  {padding: 10px 5px;}
.site			{width: 320px;}
}

@media (max-width: 720px) {
#main-nav li {padding: 5px 10px 0 15px;}

.site			{width: 305px;}
.thumbnail, .thumbnail-ani	{float: none; margin: 0 auto; padding-right: 0;}
}

@media (max-width: 680px) {
/*navigation*/
#main-nav li				{padding-bottom: 10px;}
#main-nav li.page-item-14 a {background: url(sm_port.jpg) no-repeat top; width: 132px; height: 32px;}
#main-nav li.page-item-226 a {background: url(sm_about.jpg) no-repeat top; width: 91px; height: 32px;} /*width: 95px;*/
#main-nav li.page-item-564 a {background: url(sm_contact.jpg) no-repeat top; width: 121px; height: 32px;} /*width: 125px;*/
#main-nav li.page-item-2 a {background: url(sm_faq.jpg) no-repeat top; width: 81px; height: 33px;} 
#main-nav li.page-item-384 a {background: url(sm_services.jpg) no-repeat top; width: 128px; height: 32px;} /*width: 136px;*/
#main-nav li a:hover			{background-position: top;}
#main-nav li.page-item-564 a:hover, #main-nav li.page-item-226 a:hover, #main-nav li.page-item-2 a:hover, #main-nav li.page-item-384 a:hover	{background-position: top;}

/*general*/
#page-content, #page-content-contact	{padding-left: 20px; padding-right: 20px;}

/*portfolio pages*/
.site				{width: 100%; height: 180px; margin-bottom: 10px;} /*was height: 155px; before page-wrap font increase*/
.site .site-thumb	{float: left; margin-right: 20px; margin-bottom: 55px;} /*added margin-bottom after page-wrap font increase*/

/*footer*/
/*#foot-nav			{width: 355px;}*/
/*#searchbar			{top: 55px;}*/
#logo-small			{width: 64px; height: 66px; background: url(sm_logo_small.jpg) no-repeat top; bottom: 50px;}
}

@media (max-width: 600px) {
/*general*/
#main-col-inside	{overflow: hidden;}

/*navigation*/
#main-nav li			{padding: 5px 10px 0 10px;}
#main-nav li.page-item-3		{margin-right: 10px;}

/*portfolio pages*/
#page-content-port	{padding-left: 10px; padding-right: 10px;}/*padding-left: 15px; padding-right: 15px;*/
#categories-links li 	{line-height: 40px;}
#categories-links li a {padding-top: 15px;}
.site				{height: auto; padding-left: 5px;}
.site .site-thumb	{margin-bottom: 45px;}/*margin-bottom: 20px; before increasing page-wrap font size*/
.website-details	{padding-left: 5px!important; padding-right: 5px!important;}

/*contact page*/
#contactForm		{padding: 15px 0 0 5px;}
#comments			{width: 95%;}

/*footer*/
#foot-nav			{width: 300px; margin-bottom: 20px;}
#footer-inside		{padding-bottom: 20px;}
#searchbar			{top: 55px;}
#logo-small			{bottom: 75px;}
}

@media (max-width: 550px) {
/*navigation*/
#main-nav li			{padding: 5px 5px 0 10px;}
#main-nav li.page-item-3		{margin-right: 2px;}

/*portfolio pages*/
.site					{width: 100%; padding-left: 0px; padding-right: 0px; margin-bottom: 15px;}
.site .site-thumb			{float: none; margin-left: 10px; margin-bottom: 5px;}

/*footer*/
#logo-small			{bottom: 95px;}
}

@media (max-width: 440px) {
/*navigation*/
#main-nav li			{padding: 2px 4px 0 4px;}
#main-nav li.page-item-3		{padding-left: 5px;}

/*portfolio pages*/
.site				{padding-left: 0!important; padding-right: 0!important;}
.thumbnail			{margin: 0;}
#site-aam .thumbnail,#site-aam .thumbnail img	{width: 300px; height: 225px;}
#site-evilhr .thumbnail,#site-evilhr .thumbnail img	{width: 300px; height: 225px;}
#site-fab4eyes .thumbnail,#site-fab4eyes .thumbnail img	{width: 300px; height: 225px;}
#site-hrfarm .thumbnail,#site-hrfarm .thumbnail img	{width: 300px; height: 182px;}
#site-career .thumbnail,#site-career .thumbnail img	{width: 300px; height: 225px;}
#site-fasttrack .thumbnail,#site-fasttrack .thumbnail img	{width: 300px; height: 225px;}
#site-rustic .thumbnail,#site-rustic .thumbnail img	{width: 300px; height: 225px;}
#site-asbaker .thumbnail,#site-asbaker .thumbnail img	{width: 300px; height: 225px;}
#site-bkgmoney .thumbnail,#site-bkgmoney .thumbnail img	{width: 300px; height: 190px;}
#site-saj .thumbnail,#site-saj .thumbnail img	{width: 300px; height: 195px;}
#site-derekkelly .thumbnail,#site-derekkelly .thumbnail img	{width: 300px; height: 225px;}
#site-layne .thumbnail,#site-layne .thumbnail img	{width: 300px; height: 225px;}
#site-ssc .thumbnail,#site-ssc .thumbnail img	{width: 300px; height: 197px;}
#site-icc .thumbnail,#site-icc .thumbnail img	{width: 300px; height: 225px;}
#site-jli .thumbnail,#site-jli .thumbnail img	{width: 300px; height: 182px;}
#site-roberts .thumbnail,#site-roberts .thumbnail img	{width: 300px; height: 225px;}
#ani-chess .thumbnail-ani, #ani-whiteroom .thumbnail-ani {width: 300px; height: 225px; overflow:hidden;}

/*footer*/
#foot-nav			{width: 220px;}
}

@media (max-width: 350px) {
/*general*/
#page-content, #page-content-contact	{padding-left: 10px!important; padding-right: 10px!important;}

/*navigation*/
#header					{margin-bottom: 15px;}
#main-nav li.page-item-3 a  {background: url(ex_sm_logo2.jpg) no-repeat top; width: 125px; height: 119px;}
#main-nav li.page-item-14 a {background: url(ex_sm_port.jpg) no-repeat top; width: 103px; height: 25px;}
#main-nav li.page-item-226 a {background: url(ex_sm_about.jpg) no-repeat top; width: 74px; height: 25px;} 
#main-nav li.page-item-564 a {background: url(ex_sm_contact.jpg) no-repeat top; width: 98px; height: 25px;} 
#main-nav li.page-item-2 a {background: url(ex_sm_faq.jpg) no-repeat top; width: 61px; height: 25px;} 
#main-nav li.page-item-384 a {background: url(ex_sm_services.jpg) no-repeat top; width: 103px; height: 25px;} /*width: 106px;*/
#main-nav li			{padding: 2px 5px 0 5px;}/*{padding: 2px 5px 0 8px;}*/
#main-nav li.page-item-3	{padding-left: 10px;}

/*portfolio pages*/
.site				{padding: 0 0 25px 0;}
.site .site-thumb	{margin-left: 0; margin-right: 0;}

/*footer*/
#footer-credits		{margin-top: 40px;}
#searchbar			{width: 222px;}
#footer-backtotop	{top: 160px;}
}