/*
Theme Name: Tim Flower
Theme URI: http://underscores.me/
Author: Ilai
Author URI: http://bruv.co.nz
Description: Original WordPress theme for Tim Flower
Version: 1.0-wpcom
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tim-flower
Domain Path: /languages/
Tags:

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.

 Tim Flower is based on Underscores http://underscores.me/, (C) 2012-2014 Automattic, Inc.

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
	font-family:'Alegreya Sans SC', sans-serif;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* Structure */


#masthead {
	
	width:100%;
	max-width:900px;
	margin:20px auto 0px auto;
	height:155px;
	text-align:center;
}

.menuline {
	width:100%;
	
        text-align: center;
        padding:0px;
	margin-bottom:5px;
}

#contentarea {
	margin:0px auto;
	width:100%;
	max-width:900px;
}

/* Navigation */


.menuline ul  {
    font:16px 'Alegreya Sans SC', sans-serif;
    margin:0px;
}

.menuline ul li {
	display:inline-block;	
	margin:0px 15px;
}

.menuline ul li:first-child {
    margin-left:-40px;
}

.menuline ul li a {
    text-decoration: none;
    color:#000;
    text-transform: uppercase;
}

.menuline ul li a:hover {
    color:#cc3300;
}



.menuline ul li.selected, .menuline ul li a.selected, .menuline .current-cat {
    text-decoration:underline;
}


    /* Accordian Style Pages */
    
    
.full-page-div {

    display:none;
    
    margin:30px 0px;
    
    width:100%;
    
    text-align:center;
    
    background:#f5f5f5;
    
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    
    
    box-shadow: 
    inset 0px 6px 8px -9px #999,
    inset 0px -6px 8px -9px #999;

}


    
    
.page-popup {
    position: relative;
    background: #FFF;
    padding: 20px;
    width: auto;
    max-width: 800px;
    margin: 20px auto;
}



h1.page-title {
    text-transform: lowercase;
}


/* Work Items */

.work-item {
    position: relative;
    width:100%;
    max-width:900px;
    height:170px;
    margin:30px 0px;
    overflow: hidden;
}

.work-item > a {
    display: block;
    width:100%;
    height:100%;
}


.work-item-overlay {
    position: absolute;
    height:65px;
    bottom: -65px;
    width:100%;
    background: rgba(0,0,0,.6);
     -webkit-transition: all 200ms ease-out;  
    -moz-transition: all 200ms ease-out;  
    -o-transition: all 200ms ease-out;  
    -ms-transition: all 200ms ease-out;  
    transition: all 200ms ease-out;  
}

.work-item > a:hover {
    /*transform: translateY(-50px); */
}

.work-item > a:hover .work-item-overlay {  
    -moz-transform: translateY(-100%);  
    -o-transform: translateY(-100%);  
    -webkit-transform: translateY(-100%);  
    transform: translateY(-100%);  
}  


.work-item-icon {
    float:left;
    margin-right:10px;
}
.work-item-icon img {
    margin:10px;
}
.work-item-description {
    padding:2px;
    float:left;
    font:16px 'Alegreya Sans SC', sans-serif;
    font-weight:300;
    color:#fff;
    
}

.work-item-description .title {
   font-weight:500;
   font-size:18px;
}



  

 #footer {
        margin-top:10px;
        text-align:center;
        font:10px Arial, Helvetica, sans-serif;
        color:#666;
    }








/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

/* Smaller than 480 (mobile) */
@media screen and (max-width: 640px) {
    /* Style adjustments for viewports that meet the condition */
    
    /* Structure */
    


    .menuline {
           min-height:80px;
	   margin-bottom:20px;
	   
	  
    }
    

    /* Navigation */
    
    
    .menuline ul  {
        font:18px 'Alegreya Sans SC', sans-serif;
        margin-left:-40px;
    }
    
    .menuline ul li {
            display: list-item;
            list-style: none;
            margin:10px 0px;
            
    }
    
    .menuline ul li:first-child {
        margin-left:0px;
    }
    
    .menuline ul li a {
        text-decoration: none;
        color:#000;
        background: #eee;
        padding:3px 10px;
        border-radius:5px;
    }
    
  
    
    
    
    /* Work Items */
    
    .work-item {
        width:100%;
	max-width: 300px;
        margin:30px auto;
        overflow: hidden;
    }
    
      .work-item > a > img {
	
	position: absolute;
	clip:rect(0px,300px,170px,0px);
	
	
	
      }
    
    
    
    
    .work-item > a:hover .work-item-overlay {  
    -moz-transform: translateY(0%);  
    -o-transform: translateY(0%);  
    -webkit-transform: translateY(0%);  
    transform: translateY(0%);  
}  
    
    
    .work-item-icon img {
        height:30px;
        margin:3px;
    }
    
    
    
    .work-item-overlay {
        position: absolute;
        height:45px;
        bottom: 0%;
        padding:5px 0px;
    }
    
    .work-item-icon {
        margin-right:5px;
    }

    .work-item-description {
        float:left;
        font:11px 'Alegreya Sans SC', sans-serif;
        font-weight:300;
        color:#fff;
        
    }
    
    .work-item-description .title {
       font-weight:500;
       font-size:12px;
    }

    .full-page-div iframe{
 width: 100%    !important;
  height: auto   !important;
}
   
    

}

/*iPad in LANDSCAPE */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 

 /* Work Items */
    

    
    
    .work-item > a:hover .work-item-overlay {  
    -moz-transform: translateY(0%);  
    -o-transform: translateY(0%);  
    -webkit-transform: translateY(0%);  
    transform: translateY(0%);  
}  
    
    
    .work-item-icon img {
        height:30px;
        margin:5px;
    }
    
    
    
    .work-item-overlay {
        position: absolute;
        height:55px;
        bottom: 0%;
        padding:5px 0px;
    }
    
    .work-item-icon {
        margin-right:5px;
    }

    .work-item-description {
        float:left;
        font:12px 'Alegreya Sans SC', sans-serif;
        font-weight:300;
        color:#fff;
        
    }
    
    .work-item-description .title {
       font-weight:500;
       font-size:13px;
    }


}
/*iPad in PORTRAIT */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {


 #container {
            width:100%;
            margin:0px;    
    }

 /* Work Items */
 
 
    
    .work-item {
        width:100%;
	max-width: 600px;
        margin:30px auto;
        overflow: hidden;
    }
    
      .work-item > a > img {
	
	position: absolute;
	clip:rect(0px,600px,170px,0px);
	
	
	
      }
    
    
    
    
    .work-item > a:hover .work-item-overlay {  
    -moz-transform: translateY(0%);  
    -o-transform: translateY(0%);  
    -webkit-transform: translateY(0%);  
    transform: translateY(0%);  
}  
    
    
    .work-item-icon img {
        height:30px;
        margin:3px;
    }
    
    
    
    .work-item-overlay {
        position: absolute;
        height:45px;
        bottom: 0%;
        padding:5px 0px;
    }
    
    .work-item-icon {
        margin-right:5px;
    }

    .work-item-description {
        float:left;
        font:11px 'Alegreya Sans SC', sans-serif;
        font-weight:300;
        color:#fff;
        
    }
    
    .work-item-description .title {
       font-weight:500;
       font-size:12px;
    }

 }





@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}