/******************************************************************
Site Name: Philip Beesley Architect Inc.
Author: Floating Tree Website Design | http://www.kristietaylor-muise.ca/

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%;
    background-color:#eee; 
    border:1px solid #c6c6c6;
    font-size: 0.75em;   
}

/*****************************************************************************
*                                     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%;
}

.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;
    }
}