style.css

/*
Theme Name: Windley
Description: Custom Windley Theme 2014.
Version: 1.0
Author: Andrew Macklin
*/

/*-------------RESETS----------*/

html, body{
	height:100%;
    min-width:300px;
}

html,body,h1,h2,h3,h4,h5,h6,a,img,ul, ol, li{
	margin:0;
	padding:0;
	border:0;
	outline:0;
}

html{
    overflow-y:scroll;
}
/*-------------HTML TAGS----------*/

body{
    background-color:#000;
}

body,input,textarea{
    font-family:Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    color:#f3ecdc;
    font-size:18px;
}

.hentry p, .hentry li{
    line-height:1.4em;
}

input,textarea, .gform_wrapper textarea, .gform_wrapper input[type=text], .gform_wrapper input[type=url], .gform_wrapper input[type=email], .gform_wrapper input[type=tel], .gform_wrapper input[type=number], .gform_wrapper input[type=password] {
    color:#0d2e4a;
    font-size:16px!important;
}

input:hover,textarea:hover,input:active,textarea:active,input:focus,textarea:focus{

}

.gform_footer input[type=submit]{
    color:#f3ecdc;
    background-color:#0e2c48;
    font-size:20px!important;
    padding:5px 12px;
    border-radius:8px;
    text-shadow:#000 0 0 2px;
    transition:all 0.3s;
}

input[type="submit"]{
    cursor:pointer;
}

.gform_footer input[type="submit"]:hover,.gform_footer input[type="submit"]:active,.gform_footer input[type="submit"]:focus{
    color:#fff;
    background-color:#7599ba;
    text-shadow:#000 0 0 8px;
}

textarea{

}

h1,h2,h3,h4,h5,h6, h1>a,h2>a,h3>a,h4>a,h5>a,h6>a{
	font-weight:normal;
    text-decoration:none;
    transition:all 0.3s;
    font-variant:small-caps;
}

h1{
	font-size:36px;
    color:#fff;
}
h2{
	font-size:30px;
}

h1>a:link, h2>a:link, h3>a:link, h4>a:link, h5>a:link, h6>a:link, h1>a:visited, h2>a:visited, h3>a:visited, h4>a:visited, h5>a:visited, h6>a:visited{
    color:#fff;
    text-decoration:none;
}

h1>a:hover,h2>a:hover,h3>a:hover,h4>a:hover,h5>a:hover,h6>a:hover,
h1>a:active,h2>a:active,h3>a:active,h4>a:active,h5>a:active,h6>a:active,
h1>a:focus,h2>a:focus,h3>a:focus,h4>a:focus,h5>a:focus,h6>a:focus{
    color:#e3be73;
}

a:link, a:visited{
    text-decoration:none;
    color:#e3be73;
    transition:all 0.3s;
}

a:hover, a:active, a:focus{
	text-decoration:underline;
}

figure{

}

figcaption{

}

blockquote{
   background: rgba(255,255,255,0.4);
    line-height: 1.6em;
    padding: 5px 20px;
    border: 1px solid #a6926a;
    text-shadow: #000 0 0 3px;
}


hr, .rule{
    width:85%;
    height:1px;
    border-top:1px dotted #837e76;
    margin:auto;
}


/*-----------------Classes---------------------*/
.wrapper{
    width:90%;
    max-width:1020px;
    min-width:300px;
    margin:auto;
}

.fx{
	transition:all 0.3s;
}

.fxslow, .menu a{
	transition:all 0.6s cubic-bezier(.35, .36, .15, 1.01);
}


/*----------------BACKGROUNDS-------------------*/

body{ /*make this default if not set - used for projects */
    /*background-image:url(images/background/projects.jpg);*/
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:fixed;
    background-position:center;
}

.home{
    /*background-image:url(images/background/home.jpg);*/
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:fixed;
    background-position:center;
}

.page-id-847{ /*awards*/
    /*background-image:url(images/background/awards.jpg);*/
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:fixed;
    background-position:center;
}

.page-id-847 .two_third ul{
    margin-bottom:20px;
}

.page-id-847 .two_third ul li, .page-id-12 .two_third ul li{
    margin-bottom:7px;
}




/*----------------HEADER-------------------*/

#header_wrapper{
    width:100%;
    position:fixed;
    left:0;
    top:0;
    /*background:rgba(13, 46, 74, 0.9);*/
    background: rgba(241, 241, 241, 1);
    min-width:300px;
    z-index:9999;
}

.home_link{
    float:left;
    padding:17px 0 25px;
}

.home_link .logo{
    width:100%;
    height:100%;
    max-width:310px;
}


/*-----------------TOP NAV---------------------*/
#masthead ul{
	list-style:none;
    font-size:1em;
    text-transform: uppercase;
    font-weight:900;
    font-family: "Open Sans";
    float:right;
    padding-top:42px;
    height:55px;
    background-color: transparent;
    padding-left:-150px;
}

#masthead ul ul{
    padding-top:0px;
}

#masthead ul ul li{
    margin:0 0;
}

.menu-item {
    padding: 0 20px 0 20px;
}

#masthead li{
	float:left;
	margin:0 10px 0 10px;
}

#masthead ul a:link, #masthead ul a:visited{
    color:#a6926a;
}

#masthead ul a:active, #masthead ul a:focus, #masthead ul a:hover{
    color:#FFFFFF;
    text-decoration:none;
}


/* Navigation Menu */
	.menu ul {
		margin: 0;
		text-indent: 0;
	}
	.menu li a,
	.menu li {
		display: inline-block;
		text-decoration: none;
	}
	.menu li a {
		border-bottom: 0;
		color: #6a6a6a;
		white-space: nowrap;
	}
	.menu li a:hover {
		color: #000;
	}
	.menu li {
		margin: 0 40px 0 0;
		position: relative;
	}
	.menu li ul {
		display: none;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 100%;
		z-index: 1;
	}
	.menu li ul ul {
		top: 0;
		left: 100%;
	}
	.menu  li:hover > ul {
		border-left: 0;
		display: block;
	}
	.menu li ul li a {
		background: #000;
		border-bottom: 1px solid #a6926a;
		display: block;
		font-size: 30px;
		padding: 8px 10px;
		width: 180px;
		white-space: normal;
	}
    .menu li ul li:last-child a{
       border-bottom:none;
    }
	.menu li ul li a:hover {
		background: #000;
		color: #fff;
	}
	.menu .current-menu-item > a,
	.menu .current-menu-ancestor > a,
	.menu .current_page_item > a,
	.menu .current_page_ancestor > a {
		color: #8a7958 !important;
		font-weight: bold;
	}
	.menu-toggle {
		display: none;
	}


/*----------------HOMEPAGE--------------------*/

.splashText {
    width:100%;
    display: inline-block;
    text-align: center;
    background-color: ;
}

.splashText>h1 {
    font-family: "Open Sans";
    font-weight:900;
    font-size:2.5em;
    color: #e3be73;
    font-variant: normal;

}

.splashText>h2 {
    font-family: "Merriweather";
    font-size:1.5em;
    font-variant: normal;
    color:#ffffff;
}

.ctaButtonWrapper {
    width: 100%;height:40px;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}
.ctaButton {
    padding: 10px 40px;
    margin: 40px 10px 10px 10px;
    float: left;
    border-radius: 3px 3px 5px 5px;
    font-family: "Open Sans";
    text-transform: uppercase;
    font-weight:900;
    font-size: 1.25em;
    color: #ffffff !important;
    text-decoration: none;
    background-color: #b3a369;
    border-bottom: 4px solid #7e6e38;
    text-shadow: 0px 0px 5px #7f6f39;
    transition: all 0.1s;
    -webkit-transition: all 0.1s;
}

.ctaButton:hover,
.ctaButton:focus {
    text-decoration: none;
    color: #fff;
}

.ctaButton:active {
    transform: translate(0px,5px);
    -webkit-transform: translate(0px,5px);
    border-bottom: 1px solid #5e532b;
}

.heroboxes {
    margin-top: 200px;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    clear: both;
}
.herobox {
    margin:0 15px 0 15px;
    max-width: 333px;
    border-top:2px solid #ffffff;
}
.herobox h1 {
    font-style: italic;
    font-family: "Open Sans";
    font-weight:900;
}
.herobox p {
    font-family: "Merriweather";
    font-size: 16px;
    line-height:1.45em;
}

.herobutton{
    display: inline-block;
    border:1px solid #FFFFFF;
    color: #FFFFFF !important;
    border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    font-family: "Open Sans";
    letter-spacing: 1px;
    font-weight:600;
    width: auto;
    height: auto;
    font-size: 16px;
    padding: 10px 30px;
    text-shadow: 0 0 3px #9C9C9C;
    background-color: unset;
}

.herobutton:hover, .herobutton:active{
    border:1px solid #FFFFFF;
    color: #ffffff;
    box-shadow: inset 0 1px 0 0 #FFFFFF,inset 0 -1px 0 0 #FFFFFF,inset 0 0 0 1px #FFFFFF;
    -moz-box-shadow: inset 0 1px 0 0 #FFFFFF,inset 0 -1px 0 0 #FFFFFF,inset 0 0 0 1px #FFFFFF;
    -webkit-box-shadow: inset 0 1px 0 0 #FFFFFF,inset 0 -1px 0 0 #FFFFFF,inset 0 0 0 1px #FFFFFF;
    background-color: unset;
}

#bgFeature {
    font-family: "Open Sans";
    font-size:.75em;
    text-decoration: underline;
    text-transform:capitalize !important;
    color: #ffffff;

}

#bgFeatureLocation {
    font-family: "Merriweather", serif;
    font-size:.75em;
    color: #ffffff;
}

.bgFeatureBox {
    float: right;
    padding: 0 10px 0 0;
    text-align: right;
    clear: both;

}
/*-----------------FOOTER---------------------*/



#colophon{
    width:100%;
    /*position:fixed;
    left:0;
    bottom:0;*/
    background:rgba(0,0,0,0.75) !important;
    padding:10px 0 2px;
    min-width:300px;
}

.home #colophon{
    position:fixed;
    left:0;
    bottom:0;
}

#colophon ul{
    list-style:none;
    text-align:center;
}

#colophon .pic_menu li, #colophon .text_menu li{
    display:inline-block;
}

#colophon .pic_menu li:first-child, #colophon .pic_menu li:nth-child(2),#colophon .text_menu li:first-child, #colophon .text_menu li:nth-child(2){
    margin-right:2%;
}

#colophon .pic_menu li:first-child a{
    background-image:url(images/civil-button.jpg);
    background-repeat:no-repeat;
    height:140px;
    margin-right:2%;
}

#colophon .text_menu li:first-child a, #colophon .text_menu li:nth-child(2) a{
    margin-right:2%;
}


#colophon .pic_menu li:nth-child(2) a{
    background-image:url(images/commercial-button.jpg);
    background-repeat:no-repeat;
    height:140px;
    margin-right:2%;
}


#colophon .pic_menu li:last-child a{
    background-image:url(images/residential-button.jpg);
    background-repeat:no-repeat;
    height:140px;
}

#colophon .pic_menu a{
    width:248px;
    background-color:#000;
    text-align:center;
    display:block;
    border:2px solid #000;
    font-family:Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    font-size:26px;
    line-height:1.2em;
    font-variant:small-caps;
    color:#fff;
    text-shadow:#000 0 0 6px;
    text-decoration:none;
}

#colophon .pic_menu a:hover, #colophon .pic_menu a:active, #colophon .pic_menu a:focus{
    border:2px solid #a6926a;
    color:#fff;/*#a6926a;*/
    text-shadow:#000 0 0 2px;
}

/*#colophon .text_menu a:hover, #colophon .text_menu a:active, #colophon .text_menu a:focus{
    color:#a6926a;
}*/

.pusher {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -152px; /* the bottom margin is the negative value of the footer's height */
}

#colophon, .push{
    height:152px;
}

/*-------------------------WORDPRESS CORE-----------------*/

.alignleft{
    float:left;
    margin:10px;
}

.alignright{
    float:right;
    margin:10px;
}

/*-----------------------RESPONSIVE IMAGES------------------------*/
 #content img{
        max-width:100%;
        height:auto;
}
#content img.image-placeholder{
    max-width:100%!important;
    height:100%!important;
}


/*-------------------------CONTENT-----------------*/

#page img{
	border:#38383a 8px solid;
}
#page-12 img, .project_info img, .one_third img{
	border:0!important;
}


#page_push{
    /*only exists on home page */
}

#page,#blog,#category{
    /*padding:40px 3%;*/
    padding-top:40px;
    padding-bottom:40px;
    width:82%;
    margin:0px auto 40px;
    background:rgba(0,0,0,0.7);
    min-width:300px;
}

#page ul,#blog ul,#category ul,#page ol,#blog ol,#category ol{
    margin-left:20px;
}

#pageup{
    height:195px;
}

div.hentry{
    padding: 0 3%;
}

#page h1{
    background-color:#0d0d0b;
    margin-left:-3%;
    margin-bottom:30px;
    padding:0 4%;
    clear:both;
}
.cat_header{
    background-color:#0d0d0b;
    margin-bottom:30px;
    padding:0 4%;
    clear:both;
}

.post{
    margin-bottom:30px;
    position:relative;
}

.attachment-265x155xthumb_f{/*featured images of 265 x 155*/
    border:#38383a 8px solid;
    transition:all 0.3s;
    float:left;
    margin-right:1%;
    width:265px;
    overflow:hidden;
}

.attachment-265x155xthumb_f:hover,.attachment-265x155xthumb_f:focus,.attachment-265x155xthumb_f:active{/*featured images of 265 x 155*/
    border:#a6926a 8px solid;
}

.read_more{
    margin:0;
}

.excerpt p{
    margin:10px 0;
}

#construction_inner{
    position:absolute;
    top:540px; /*to pic base is 398*/
    left:0px;
    padding:0 1% 0px;
    text-align:center;
    width:25%;
}

#construction_inner img{

}

.one_fourth .ngg-navigation, .projct_info .ngg-navigation{
    display:none!important;
}

/*--------------CATEGORY-----------*/
#category h1{
    font-size:36px;
    font-variant:small-caps;
}

.setsize{
    float:right;
    width:67%;
    min-height:185px;
}
.cat_thumb_container{
    float:left;
}


.next{
   float:right;
    margin-right:4%;
}

.prev{
   float:left;
    margin-left:4%;
}

.archive_nav a{
    font-size:16px;
    background-color: #0E2C48;
    border-radius: 8px;
    color: #F3ECDC;
    padding: 5px 12px;
    text-shadow: 0 0 2px #000000;
    transition: all 0.3s ease 0s;
    border:2px solid #fff;
}

.archive_nav a:hover, .archive_nav a:focus, .archive_nav a:active{
    background-color:#7599ba;
    text-shadow:0 0 8px #000;
    text-decoration:none;
}
.prevpost{
    float:left;
    margin-left:3%;
}

.nextpost{
    float:right;
    margin-right:3%;
}

.prevpost a, .nextpost a{
    display:block;
    padding:10px;
    line-height:1em;
    color:#f4c361;
    background:rgba(0,0,0,0.6);
    border-radius:50%;
}

.prevpost a:hover, .nextpost a:hover,.prevpost a:active, .nextpost a:active,.prevpost a:focus, .nextpost a:focus{
    text-decoration:none;
    background:rgba(0,0,0,0.8);
    color:#fff;
}

.cat_title_single{
    position:relative;
    top:-18px;
    font-size:14px;
}
/*----------------COLUMNS-------------------*/

.project_info h4{
    font-size:20px;
    font-variant:normal;
}
.project_info h4, .project_info p{
    line-height:18px;
    margin:1em 0;
    width:90%;
}

/*----------------LIGHTBOX THEME-------------------*/
.DOP_NextGENThumbnailGallery_ImageWrapper {
    -webkit-border-radius: 0px!important;
    -moz-border-radius: 0px!important;
    border-radius: 0px!important;
    padding: 0 0 10px!important;
}

/*------------------SOLILOQUY-----------------*/
.soliloquy-container ul{
   margin-left:0!important;
}

.soliloquy-container img{
   width:auto;
    height:auto;
    max-width:auto
    max-height:auto;
}



/*----------------NEXTGEN-------------------*/
.gform_wrapper .gfield_required {
    color: #eda911!important;
}
/*---------------CLEARFIX------------------------*/
.cf:before, .cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

#wprmenu_bar .bar_logo {
 float:right;
}

/*---------------MEDIA QUERIES------------------------*/
@media only screen and (max-width:1166px){
    .setsize{
        float:right;
        width:60%;
        min-height:205px;
    }

}

@media only screen and (max-width:1045px){
    /*---------HEADER--------*/
    .home_link .logo{
        width:80%;
        height:80%;
        max-width:310px;
    }

    #masthead ul {
        float: right;
        padding-top: 0px;
        padding-bottom:20px;
        font-size:30px;
        margin-top: 50px
    }
    #masthead ul ul{
        font-size:25px;
        margin-top:0;
    }

    /*---------CONTENT--------*/
    #page h1{
        width:80%;
        font-size:30px;
    }

    /*---------FOOTER--------*/
    #colophon .pic_menu a, #colophon .text_menu a{

        font-size:20px;
        width:225px;
    }
    #colophon .pic_menu li:first-child, #colophon .pic_menu li:nth-child(2), #colophon .text_menu li:first-child, #colophon .ptext_menu li:nth-child(2){
        margin-right:1%;
    }

}

@media only screen and (max-width:956px){
    .setsize{
        float:none;
        width:100%;
        min-height:auto;
    }
    .cat_thumb_container{
        float:none;
    }
}

@media only screen and (max-width:879px){
    .home_link .logo{
        width:100%;
        height:100%;
        max-width:245px;
    }
    #masthead ul {
        margin-top: 5%;
    }
}

@media only screen and (max-width:770px){

    #page, #blog, #category {
        margin: 0px auto 40px;
    }

#pageup{
    height:30px;
}

    #content ul, #content ol{
        margin-left:4%;
    }

    /*---------CLEAR FLOATS--------*/
    .one_fourth, .one_third, .one_half, .two_third, .three_fourth{
       float:none!important;
        width:100%!important;
        margin:auto;
    }

    #construction_inner{
       /* position:relative;
        bottom:0px;
        left:0px;
        padding:0 4% 0px;
        text-align:center;
        width:100%; */
        display:none;
    }


    /*---------CONTENT--------*/
    #page h1{
        width:90%;
        font-size:24px;
    }
    #category h1{
        clear:both;
        font-size: 28px;
        line-height: 2em;
    }
    .attachment-265x155xthumb_f{/*featured images of 265 x 155*/
        float:none;
        margin-right:auto;
        margin-left:auto;
        display:block;
        width:265px;
        overflow:hidden;
    }

    /*---------FOOTER--------*/
    #colophon ul{
        width:auto;
        margin:auto;
        text-align:center;
    }

    /*#colophon .pic_menu li{
        display:none;
        margin:auto;
    }*/

    #colophon .pic_menu li{
        clear:both;
        display:block!important;
        margin:auto!important;
    }

    #colophon .pic_menu li a, #colophon .pic_menu li:first-child a, #colophon .pic_menu li:last-child a, #colophon .pic_menu  li:nth-child(2) a{
         background-image:none;
        height:30px;
        margin:auto!important;
    }

    /*#colophon .text_menu li:first-child, #colophon .text_menu li:nth-child(2){
        margin-right:auto!important;
        margin:15px auto;
    }

    #colophon .text_menu li:first-child a, #colophon .text_menu li:last-child a, #colophon .text_menu  li:nth-child(2) a{
        height:auto;
        margin-bottom:10px;
    }


    #colophon .text_menu a{
        font-size:20px;
        padding:15px 0;
        margin:auto!important;
    }*/

    #colophon{
        padding-top:0;
    }

    .pusher {
        margin: 0 auto -103px; /* the bottom margin is the negative value of the footer's height */
    }

    #colophon, .push{
        height:103px;
    }

}

@media only screen and (max-width:450px){
    .two_third img, .alignleft, .alignright{
        width:80%;
        display:block;
        margin-left:auto;
        margin-right:auto;
        float:none;
    }
}