/*

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

lasg is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
TESTING
*/

/******************************************************************
Site Name: Philip Beesley Studio Inc.

Stylesheet: Global Styles
includes:
-CSS Reset
-Global Elements
-Header
-Navigation
-Main Grid Pages
-About Page
-Press Page
-News Page
-Contact Page
-Media Queries

External Stylesheets:
-Sculpture / Project Individual Pages - styles/sculptures/index.css
-Publication Write-up Pages - styles/pub_global/index.css

Typography:
-Typekit
-Regular = 400
-Bold = 700

******************************************************************/

/*****************************************************************************
*                                CSS Reset                                    *
******************************************************************************/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*****************************************************************************
*                                Global Elements                               *
******************************************************************************/

html {
    font-size:14.3px;
    font-weight: 400; 
}

body, a  {
    color:#fbfbfb;
    font-size:1em; 
    line-height:1.45em;
    font-family: "europa",sans-serif; 
    text-decoration:none;
}

strong {
    font-weight: 700; 
}

ol {
    list-style-type:upper-roman;
    margin-left: 2em;
}

blockquote {
    font-size:1.3em;
    line-height:1.5em;
}

.quote-sub {  /*for listing of source after a quote */
    margin: 1em 0 4em 0;
    font-size: 0.9em;
}

.quotes  { /*div surrouncing a list of quotes */
    max-width:40em;
    width:100%;
    float: left;
    padding: 6% 0 0 3%;
}

p {
    margin: 1em 0 1em 0;
}

em {    
    font-style:italic;
}

h1 { 
    font-size:1.35em;
    text-transform:uppercase;
    margin-bottom:1em;
    font-weight:400;
}

h2 {   
    font-size:1.1em;
    font-weight:700;
}

h3 {   
    font-size:1em;
    font-weight:700;
}

a {
    border-bottom: 1px dotted gray;
    text-decoration:none;
}

/*a:hover {
    color: #c4c4c4;
     -webkit-transition: color .25s ease-in-out;
    -moz-transition: color .25s ease-in-out;
    -ms-transition: color .25s ease-in-out;
    -o-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out;
}*/

img, img a {
    border-style: none;  
    max-width: 100%;
    height: auto;
}

img.in-text {
    float:left;
    padding: 1.3em 1em 1em 0;
}

#thumbnails img:hover, .flag img:hover, .vimeoBadge img:hover, #press-images img:hover, #thumbs img:hover { /*#thumbs is from old static template */
    opacity: 0.8;
    filter: alpha(opacity=80);
    transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

#logo, #menu, #content {
    float: left;
    width: 100%;
}

#page {
    max-width: 1075px;
    margin-left: auto;
    margin-right: auto;
    width:100%;
    height:100%;
    text-align:left;
}

#content {
    float:left;
    background-color:#080808;
    width:99%;
    min-height: 700px;  /* Change this when responsive templates all used */
}

a.button {
    color:#fff;
    font-size: 0.8em;
    padding: 1% 4%;
    background-color:#080808;
    border:0;
}

a.button:hover {
    background-color:#2e2e2e;    
    -webkit-transition: color 0.14s ease-in-out;
    -moz-transition: color 0.14s ease-in-out;
    -ms-transition: color 0.14s ease-in-out;
    -o-transition: color 0.14s ease-in-out;
    transition: color 0.14s ease-in-out;
}


/********FORMS*********/

input {
    padding: 0.5em 1em;    
    margin: 1em 0 0;    
    font-size: 0.9em;
}

input.button {
    background: #A7A7A7;
    border: 0;    
    color: #fff;
    cursor: pointer;
}

/*****************************************************************************
*                                Header                                      *
******************************************************************************/

#logo {
    padding:0.6% 0 0.6% 3%;
    float:left; 
    display:block;
    width:96%;
}

#logo a {
    color:#080808;
    font-weight: 700;    
    font-size: 1em;
    border:0;
}

.logo-gray {
    color: #b0b0b0;
}

.divider {
    padding: 0 1% 0 1%;
    font-weight:normal;
}

/*****************************************************************************
*                                Navigation                                     *
******************************************************************************/

#menu {
    background-color:#080808;
    float:left;
    width:96%;
    height:auto;    
    padding-left:3%;
}

.nav-collapse li a {
    font-size:0.9em;
}

.tab {
    float:left;
    padding: 0.6% 3% 0.6% 0;    
}

.tab a.title {
    color:#fbfbfb;
    float: left;
    font-size: 1em;
    font-weight: 400;
    border:0;
}

div.tab a.title:hover {
    color:#c4c4c4;
    -webkit-transition: color 0.14s ease-in-out;
    -moz-transition: color 0.14s ease-in-out;
    -ms-transition: color 0.14s ease-in-out;
    -o-transition: color 0.14s ease-in-out;
    transition: color 0.14s ease-in-out;
}

/********************Responsive Nav: See styles/responsive-nav.css**********************/


/*****************************************************************************
*                               Main Grid Pages                               *
******************************************************************************/

/* Grid page thumbs are in 'Images' folder, thumbs load through 'section name'_grid.css */

.img-wrap {   /*this will come into effect with new grid pages */
    height:60px;
    overflow:hidden;
    margin-bottom: 0.3em;
}

#sculpture-grid {
    float:left;
    margin-left:-1%;
    width: 101%;
}

#sculpture-grid h1, #content h1.press-title {
    color:#080808;
    font-weight: 400;
    margin: 2% 0 1% 1%;
    font-size: 1em;
}

#sculpture-grid h2 {
    color: #080808;
    margin: 1% 1% 0% 1%;
    padding: 0 0 0.5em;
    border-bottom: 1px dotted #BFBFBF;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 1em;

}

#sculpture-grid a {
    border:0;
    position:relative;
}

#sculpture-grid a img.download {
    width: 15px;
    height: auto;
    position: absolute;
    bottom: 5px;
    right:0;
    padding: 5px;
}

#feature-row {
    margin-bottom:0.5%;
}

#secondary-row, #feature-row {
    float:left;
    width:100%;
}

div.flag {
    float:left;
    width:18%;
    padding:1% 1% 0.5%;
    min-width: 194px; 
}

.flag img {  /*fixes grid being thrown off in IE for variable size flag images */
    width:194px;
    height:60px;
    overflow:hidden;
}

p.title {
    color:#080808;
    font-weight:700;
    font-size:0.85em;
    margin:0;
    line-height:1.3em;
}

p.sub {
    color:#6b6b6b;
    margin:0;
    font-size: 0.75em;
    line-height:1.2em;    
}

p.blank {
    color:transparent;
    margin:0;
    font-size:0.55em;
}

/*****************************************************************************
*               Sculpture / Project Individual Pages                          *
******************************************************************************/

/* See styles/sculptures/index.css */

/*****************************************************************************
*                             Publication Pages                               *
******************************************************************************/

/* See styles/sculptures/pub_global.css */

/*****************************************************************************
*                                     About                                    *
******************************************************************************/

#column-left, #column-right {
    width:48%;
    float:left;
}

#column-left {
    margin-right:4%;
}

.section-header {
    float:left;
    width:100%;
}

.section-header h2 {
    color:#080808;
    margin: 3% 0;
    float:left;
}

.left-title {
    float:left;
}

.download-button {
    float:right;
    margin: 3% 0;
    padding: 1% 4%;
    border:1px solid #6b6b6b; /*-- #c6c6c6 -->*/
    font-size: 0.75em;   
}

.download-button2 {

	display: inline;
    border: 1px solid #6b6b6b;
    padding: 0.3em 0.8em;
    float: center;
    margin: 3% 0;
    font-size: 1em;
    text-align: center;
}

/*****************************************************************************
*                                     Press                                    *
******************************************************************************/

#press-images  {
    width: 28%;
    float:left;
    padding-right:2%;
    border-right: 1px solid gray;
}

#press-images  a {
    border:0;
}

#press-links{    
    padding-left:2%;
    float:left;
    width:67%;
}

#press-links p {
    margin: 0.3em 0 1.5em 0;
    font-size:0.85em;
    font-weight:700;
}

#press-images img, #press-login {
    margin-bottom: 7%;
}

#press-login {
    background-color:#d9d9d9;
    padding: 5%;
}

#press-login h3 {
    font-size: 1em;
}

#press-login p{
    margin: 1em 0 1em 0;
    font-size: 100%;
    text-overflow: none;
    white-space: unset;
}

.white-content #content #press-login a.button {
    color:#fbfbfb;
}


/*****************************************************************************
*                              News Page                                      *
******************************************************************************/

.news-header {
    margin:2% 0 1% 1%;
    color:#080808;
}

#videos, #flickr, #lectures, #notices, #newsletter, #notices a {
    color: #080808;
}

#videos h3, #flickr h3, #lectures h3, #featured h3, #notices h3, #newsletter h3 {
    margin-bottom:1em;
    font-size:1.1em;
}

#flickr h3, #recent-work h3 {
    margin-left:1%;
}

#video-player iframe {
    width:100%;
    height:470px;
}

#lectures, #flickr, #videos, #notices, #newsletter {
    width:31.33%;
    float:left;
    margin:1%;
}

#notices, #newsletter {
    width:48%;
    margin-top:0;
}

#lectures h4 {
    padding: 0;
    font-weight: 700;
    line-height: 1.3;
}

#lectures a, #featured a, #notices a {
    color:#080808;
    text-decoration:underline;
}

#lectures a:hover {
    color:#080808;
}

#lectures h5 {
    margin: 0;
}

#lectures p {
    padding-bottom: 3%;
    margin-top:0;
}

#featured {
    color:#080808;
    width: 62.66%;
    float: left;
    margin: 1%;
}

#flickr iframe, #videos iframe, iframe.flickr-embed-frame, .flickr-embed .flickr-embed-photo, .flickr-embed .is-slideshow {
    width:100%;
    float:left;
    height:200px !important;
    margin: 0;
}

#flickr h4, #videos h4 {
    margin-bottom:2%;
    font-size: 0.9em;
}

#videos a {
    width:48%;
    float:left;
    margin:1%;
}


/***********Remove following when news page is ready */


#flickr-albums {
    float:left;
    width:100%;
}

#flickr-albums a {    
    font-size:0.85em;    
    background-color: #080808;    
    color: #fff;    
    display: block;    
    padding:1%;
    margin-top: -5px; 
}

#flickr-left iframe, #flickr-right iframe,  #badge iframe, #single-video iframe {
    width:100%;
    height:350px;
}

#flickr-left, #flickr-right, #badge, #single-video  {
    float:left;
    margin: 0 1% 1% 1%; 
}

#flickr-left, #badge { 
    width:37%; 
}

#flickr-right, #single-video {    
    width: 59%;
}

/*****************************************************************************
*                                Contact Page                              *
******************************************************************************/

.white-content #content {
    background-color:#fff;
}

.white-content #content p, .white-content #content a, .white-content #content h1, .white-content #content h3 {    
    color:#080808;
}

.white-content #content a:hover {
    color: #c4c4c4;
}

.white-content h1{
    font-weight: 400;
    margin: 2% 0 1% 0;
    font-size: 1em;
}

div#contact-info {
    float:left;
    margin-left: 2%;
}

div#left-image {
    float:left;  
    padding-right: 2%;  
    border-right: 1px solid gray;
}


/*****************************************************************************
*                               Site Map                                     *
******************************************************************************/

.site-map h2 a {
    border-bottom:0;
}

.site-map li {
    color:#080808;
}

.site-map h2 {    
    margin-bottom:0.5em;
}

.site-map #sculptures, .site-map #projects, .site-map #publications, .site-map #about, .site-map #press, .site-map #news {
    width:30.33%;
    margin-right:3%;
    float:left;
    margin-bottom:1em;
}


/*****************************************************************************
*                                MEDIA QUERIES                               *
******************************************************************************/

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */

@media only screen and (min-width: 480px) and (max-width: 767px) {
    #logo a {
        width:100%;
        float:left;
        padding-left:0;
    }
    
    #logo {
        padding:3%;
    }
    
    .divider {
        display:none; /*Removes | character from logo */
    } 
}


/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */

@media only screen and (max-width: 479px) {
    
    #logo a {
        width:100%;
        float:left;
        padding-left:0;
    }
    
    #logo {
        padding:3%;
    }
    
    .divider {
        display:none; /*Removes | character from logo */
    } 
    
     div#menu{
        height:100%;
    }
    
    div.tab {
        width:50%;
        height:auto;
    }
    
    div.tab a.title {
       padding:3%;
    }
    
    #sculpture-grid, #column-left, #column-right, #tabs, .site-map #sculptures, .site-map #projects, .site-map #publications, .site-map #about, .site-map #press, .site-map #news  {
        float: left;
        margin: 1%;
        width: 98%;
    }
        
    #lectures, #flickr iframe, #videos iframe, #flickr-left iframe, #flickr-right iframe,  #badge iframe, #single-video iframe {
        width: 98%;
    }
    
    #flickr, #videos, #videos a, #press-images, #press-links, #notices, #newsletter, #featured  {
        width: 100%;
    }
    
    #press-images {
        border-right:0;
    }
}