@charset "utf-8";
/* CSS Document */

/* Written by Kyle Hamilton of candpgeneration.com
       CSS3 transitions - animated dropdown menu without javascript that plays nice in IE7+, FF, CHROME, SAFARI
       The original bare bones version can be found at: http://candpgeneration.com/CSS-dropdowns/CSS3-dropdown.html
*/

    /* the main menu */
    .navigation {
        display:inline-block;
		height: 100%;
        z-index:10000;

    }

    .navigation > ul{
        display: -webkit-box;
        -webkit-box-orient: horizontal;

        display: -moz-box;
        -moz-box-orient: horizontal;

        display: box;
        -moz-box-orient: horizontal;
    }
    .navigation > ul{
		background: transparent url(../grfx/peter_robertson_design_logo.png) top right no-repeat;
		background-size: 75%;
		background-image:none \9;
		float: left;
        font-weight: normal;
		height: inherit;
        list-style :none;
        margin:0; 
        padding:0; /* gets rid of any inherited margins and padding */
        position:relative;
		width: 100%;
        z-index:1000;
    }
    .navigation > ul > li { 
       /* -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;*/
		*background: transparent url(../grfx/5pxfadewhite.png) 0px 0px repeat;
        float : left;
        font-size: 1em; /* this is here and not above, so that the subs can be made smaller using a % if desired */
		height: inherit;
        position : relative;
		text-align: center;
		width: 20%;
    }

    .navigation div.logo {
		position: absolute \9;
		right: 0px \9;
		top:0px \9;
		width:100% \9;
		z-index: 202 \9;
	}

    .navigation div.logo img {
		float: right;
		height: auto \9;
		width:50% \9;
	}
   .navigation > ul > li > a span {
		display: inline-block;
	   	width: 100%;
   }
   .navigation > ul.mobNav > li > a span {
		font-size: 200%;
   }

    .navigation > ul > li + li{
        margin-left: 0.3125em;
    }
    .navigation > ul > li > a {
        color:#6b6b6b; 
        display:block;
		font-weight: bold;
		height: inherit;
	    line-height: 2em;       
	    padding:0px 10%;
        text-decoration:none;
		text-shadow: 0px -2px 2px rgba(255, 255, 255, 0.5);



    }
	
    .navigation > ul > li > a:hover{
        background-color:#939393; /* grey */
        color:#ffffff;
        display:block;
        /* make the background-color fade in on roll-over */
        -webkit-transition: background-color 0.9s ease;
        -moz-transition: background-color 0.9s ease;
        -o-transition: background-color 0.9s ease;
        -ms-transition: background-color 0.9s ease;
        transition: background-color 0.9s ease;
    }


    /* the show/hide effects */
    /* the drop-down box */

    .navigation ul ul{

        left: -750%;
        width:1400%; 

        position:absolute;
        z-index:100;

        height: 0;
        overflow: hidden;
        -webkit-transition: height 0.3s ease-in;
        -moz-transition: height 0.3s ease-in;
        -o-transition: height 0.3s ease-in;
        -ms-transition: height 0.3s ease-in;
        transition: height 0.3s ease-in;
    }


    /* don't display tertiary box yet */
    .navigation > ul > li:hover ul ul, .navigation > ul > li > a:hover ul ul{
        height:0;

    }
    /* tertiary drop-down box */
    .navigation ul ul ul{
        left:50%;
        width:100%;
    }

    .navigation > ul > li:hover ul, .navigation > ul > li > a:hover ul,
    .navigation ul ul li:hover > ul, .navigation ul ul li a:hover > ul{
       height:220px;

    }

    /* drop-down item styles */
    .navigation ul ul li{
        background-color:#eaeaea; /* grey */
        width:auto;

        /* make the background-color fade in on roll-over */
        -webkit-transition: background-color 0.3s ease;
        -moz-transition: background-color 0.3s ease;
        -o-transition: background-color 0.3s ease;
        -ms-transition: background-color 0.3s ease;
        transition: background-color 0.3s ease;

    }
    .navigation ul ul li.mobDesNav{
		background-color:#dedede; /* grey */
    }
    /* unfortunate ie7 gap fix */
    .ie7 .navigation ul ul li{
        margin-bottom:-3px;
    }
    .navigation ul ul li:hover {
        background-color:#999;
    }

    .navigation ul > li > ul > li.subMnu > a {
		background: transparent url(../grfx/nav_sm_arrw.png) center right no-repeat;
		padding-right:15px;
	}


    .navigation ul ul li a {
        display:block;
        text-decoration:none;
        margin:0 7.0588235294117647058823529411765%;
        padding:5px 0;
        color:#4c4c4c; /* grey */

    }

    /* The following six rules set the lines in between menu items.
       To make this play nice in IE, we will not be using nth-child
       but the "+" sibling slector.
    */
    .navigation ul ul ul li a{
        border:none !important;
    }
    .navigation ul ul ul li + li a{
        border-top:1px dotted #999 !important;
    }
    .navigation ul ul li + li a{
        border-top:1px dotted #999;
    }
    .navigation ul ul li:hover + li a{
        border-top:1px solid #eaeaea;
    }
    .navigation ul ul ul li:hover + li a{
        border: 0 !important;
    }
    .navigation ul ul ul li:hover + li{
        border-top:1px solid #999 !important;
    }


    .navigation ul ul li a:hover, .navigation ul ul li:hover > a {
        color:#ffffff; /* white */

    }
	.navigation > ul > li > a span.dblClck {
		background: none;
		display: none;
		width: auto;
	}
	.navigation > ul > li > a:hover span.dblClck {
		background: block;
		display: block;
		width: auto;
	}

@media screen and (max-width: 636px) {
	.navigation ul.dskTabNav {
		display: none;
		height: 0px;
		text-indent: -99999em;
		width: 0px;
	}

/*    .navigation ul ul li {
        position: relative;
		z-index: 822230667;

    }*/
    .navigation ul ul li a {
        padding:12px 0;

    }
    .navigation > ul > li:hover ul, .navigation > ul > li > a:hover ul,
    .navigation ul ul li:hover > ul, .navigation ul ul li a:hover > ul{
       height:auto;

    }

}

@media screen and (min-width: 637px){
	.navigation ul.mobNav {
		display: none;
	}
    .navigation > ul{
		background-size: 50%;
	}
    .navigation > ul > li { 
		text-align: left;
    }
	.navigation ul li a {
		font-size: 80%;
	}
    .navigation > ul > li > a {
		line-height: 5em;
	}
    .navigation ul ul{
		left: 0;
        width:200%;/* you need a width to accomodate tertiary menus */ 
	}
    .navigation ul ul li{
		width: 50%;
	}
}
@media screen and (min-width: 961px) {
	.navigation ul.mobNav {
		display: none;
	}
	.navigation ul li a {
		font-size: 100%;
	}
   .navigation > ul > li > a span {
        background: rgba(255,255,255,0) url(../grfx/header_bar_arrws.png) 100% 55% no-repeat;
        background-image: url(../grfx/header_bar_arrws.png) \9;
		background-position: 90% center \9;
		background-repeat:no-repeat \9;
	}
	
    .navigation > ul > li { 
    }
}