﻿/*
Theme Name: Gridline
Version: 1.3.1
Description: Designed by <a href="http://www.ghostpool.com">GhostPool Designs</a>.
Author: GhostPool Designs
Author URI: http://www.ghostpool.com
License:
License URI:
*/

/*************************** General Styling ***************************/

/* Page Styling */


/* Text Styling */




/*************************** Grid Styling ***************************/

/* Grid */
#grid-wrapper {
float: left;
width: 100%;
}
#grid-container {
width: 900px;
left: 0;
top: 0;
position: relative;
width: 100%;
overflow: hidden;
}
.no-js #grid {
width: 900px;
position: relative;
margin: 0 auto;
}
.grid-panel {
display: none;
float: left;
width: 900px;
position: relative;
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
margin: 40px 0 30px 0;
}
.grid-panel.active-panel,
.no-js .grid-panel {
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1
}
.grid-panel div,
.grid-panel a{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
}
.grid-panel.active-panel div,
.no-js .grid-panel div,
.grid-panel.active-panel a,
.no-js .grid-panel a {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
}
.no-js .grid-panel {
display: block;
}
.grid-panel-bg {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}

/* Grid Item */
.grid-image {
float: left;
position: relative;
background: #262626;
margin: 0 10px 10px 0;
}
.grid-image .grid-hover {
display: none;
position: absolute;
z-index: 2;
background: #9DFFFE url(images/grid-hover-bg-dark.png);
padding: 30px;
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
}
.grid-panel.active-panel .grid-image:hover .grid-hover,
.no-js .grid-image:hover .grid-hover {
display: block;
z-index: 2;
}
.grid-image:hover .grid-hover:hover {
text-decoration: none;
}
.grid-item-title {
display: block;
font-weight: bold;
color: #000;
margin-bottom: 10px;
font-size: 12px;
text-transform: uppercase;
line-height: 15px;
}
.grid-item-desc {
display: block;
font-size: 11px;
color: #173439;
line-height: 15px;
}
.grid-item-link {
float: left;
position: absolute;
left: 0;
bottom: 0;
width: 20px;
height: 11px;
padding: 5%;
background: url(images/grid-item-page-icon.png) center center no-repeat;
border-right: 1px solid #6eb8c4;
}
.grid-item-link.grid-lightbox {
background: url(images/grid-item-search-icon.png) center center no-repeat;
}
.grid-item-cats {
float: right;
height: 10px;
position: absolute;
left: 0;
bottom: 0;
padding: 5%;
width: 90%;
display: block;
font-size: 10px;
border-top: 1px solid #6eb8c4;
color: #173439;
text-transform: uppercase;
text-align: right;
}

/* Prev/Next Grid Navigation */
#grid-nav {
width: 900px;
position: relative;
z-index: 3;
margin: 0 auto;
}
.no-js #grid-nav {
display: none !important;
}
#grid-prev {
display: none !important;
position: absolute;
left: -62px;
z-index: 3;
float: left;
background: #84FFFE url(images/sprite.png) no-repeat 7px -62px;
width: 25px;
height: 25px;
}
#grid-next {
display: none !important;
position: absolute;
right: -50px;
z-index: 3;
float: right;
background: #84FFFE url(images/sprite.png) no-repeat -53px -62px;
width: 25px;
height: 25px;
}
#grid-container:hover #grid-prev,
#grid-container:hover #grid-next {
display: block !important;
}


/*************************** Portfolio Grid Template Page ***************************/

#page-text {
float: left;
margin-top: 30px;
width: 900px;
}
#page-text h1 {
float: left;
color: #fff;
font-size: 26px;
background: #353535;
padding: 20px 20px 8px 20px;
margin: 0;
}
#page-text h1 p {
line-height: 30px;
}





/*************************** WP Admin Bar ***************************/

#wpadminbar ul li {
border-bottom: 0;
border-top: 0;
}