/* CSS file for Tillywig, created Feb 10, 2009. Mary Ecsedy, Circuit
Riders LLC. */


/* The basic browser viewport window. To see its extent change the
background-color to ff00ff. */

	body {
		margin: 0;
		padding: 0;
		background-color: #ffffff;
		font-size: 100%;  
		text-align: center; 
	}

	
/* Default rules for the most common HTML elements. */

	body, h1, h2, h3, h4, h5, h6, ol, ul, li, p {
		font-family: arial, sans-serif;
                background-color: #ffffff;
                color: #000000;
	}





/* Additional default heading rules.  */

        h1 {
                color: #145db6;
                font-size: 120%;
                font-weight: bold;
                text-align: left;
                margin: 10px 0px 5px 0px;  /* Top, Right, Bottom, Left. Always in that order.*/
                padding: 0px 0px 10px 0px;
        }


        h2 {
                color: #145db6; 
                font-size: 115%;
                font-weight: bold;
                text-align: left;
                margin: 20px 18px 10px 0px;
                padding-bottom: 5px;
                border-bottom: 1px solid #25c0e0;
        }

        h2 a {
            color: inherit;
            font-size: inherit;

        }
        h3 {
                color: #082549; 
                font-size: small;
                font-weight: bold;
                margin: 20px 0px 0px 0px;
                padding-top: 0px;
        } 










/* Default paragraph rule. */
        p { 
                background-color: #ffffff;
                color: #000000;
                margin: 0px 20px 10px 0px;
                font-size: small;
                font-weight: normal;
                text-align: left;
                padding-right: 10px;
        } 




/* Default link rules. */

	a { 
                color: #000000; 
                text-decoration: none;
                font-size: small;
        }

	a:focus, a:hover, a:active {
		color: #145db6;
        /*        font-size: small; */
	}





/* Default image rule. This suppresses the default border. */

        img { 
                border: 0px;
        }



/* Unordered, i.e., bulleted, lists. Currently not used.
        
        ul li { 
                background-color: #ffffff;
                color: #000000;
                font-size: x-small;
        } */










/* The Container div holds everything else. */

	#container {
                margin: 1em auto;
		width: 800px;
		text-align: left;
                padding: 0px;
		border: 0px solid #ff00ff; 
	}







/* The Header div holds the logo at the top of each page. */

	#header {
                background-image: url(../images/Top_banner.jpg);
                background-repeat: no-repeat; 
		height: 128px;
		background-color: transparent;
		color: #ccffff;
                margin: 18px;
                padding: 0px;
		border: 0px solid #02b2d7; 
	}







/* Mainnav is the div that holds the horizontal navigation links below
the header. The links themselves are stored in mainnav.inc. You can
update the links on all pages on the site at the same time by updating
that one file. */

/*IMPORTANT NOTE: This div has a NEGATIVE top margin setting so it
appears to float over the Top_banner.jpg header image. The
background-color is transparent instead of white to let the underlying
header image show through. */

	#mainnav {
                background-color: transparent; 
                color: #f07228;
		text-align: left ;
                margin: -60px 20px 20px 90px;
                padding: 0px;
                border: 0px solid #b4a5c8;
                font-size: 8px;
		font-family: arial, sans-serif;
        position: relative;
	}


    #logo-link { 
       /* height: 100px; width: 800px; position: absolute; top: 0; */
    }



/* The following rules control the layout and behavior of the mainnav
links. */

        #mainnav ul { 
                background-color: transparent; 
                color: #f07228;
		list-style-type: none;
        }

	#mainnav li{
                background-color: transparent; 
                color: #f07228;
		display: inline;
	}
	
	#mainnav li a {
                background-color: transparent;
		color: #f07228; /* Orange */
		text-decoration: none;
                font-weight: bold;
		margin: 0px 5px 0px 5px;
	}

	#mainnav li a:hover {
		text-decoration: none; 
                background-color: transparent;
		color: #25c0e0; /* Star Blue */
	}


/* This is a Span Class that is used to style the "|" character
between the mainnav links. */

        .green-bar {
                color: #a4d258;
                font-size: 24px;

                border: 0px solid #ff00ff;
        }









/* The lcol div is the left column. */

	#lcol {
                clear: both;
		float: left;
                margin: 0px 0px 18px 18px;
                padding-top: 5px;
                font-size: small;
		width: 210px;	
                border: 0px solid #ff0000; /* Red borderline. Change 0px to 1px to see it.*/
	}



/* The bulleted list under Browse. */

        #lcol ul { 
                list-style-type: none;
                margin: 7px 0px 0px 25px;
                padding: 0px;
         }


        #lcol li a:link, #lcol li a:visited { 
                background-image: url(../images/star.jpg); /* Blue Star */
                background-position: left;
                background-repeat: no-repeat;
                display: block;
                margin: 0px 0px 0px -20px;
                padding: 2px 0px 2px 20px;
                background-color:#ffffff;
                color: #145d86;
                text-decoration: none;
                font-weight: normal;
        }

        #lcol li a:hover, #lcol li a:visited:hover { 
                background-image: url(../images/star_orange.jpg); /*Orange Star */
                background-position: left;
                background-repeat: no-repeat;
                background-color: #ffffff;
                color: #f07228;
                text-decoration: none;
        }


        #lcol li a:active { 
                background-color: #afd4d4;
                color: #ffffff;
                text-decoration: none;
        }


        #lcol ul li { 
                font-size: 7px; /* Fixed-font for design sake. */
        }



/* The is the blue divider line in lcol. */
        .blue-line-210 { 
                background-color: #ffffff;
                color: #25c0e0;
                border-top: 1px solid #25c0e0;
                margin: 10px 0px 0px 0px;
                padding: 0px 0px 0px 0px;
        }



/* Paragraph text within the lcol div. */

        #lcol p {
                margin-left: 0px;
                padding: 0px;
        }







/* Search box */

        .search-box { 
               padding: 5px 0px 5px 0px;
               border: 1px solid #25c0e0;
               
        }








/* Main contents area of the page. */
 
	#contents {
		margin: 0px 0px 0px 252px;
                color: #000000;
		background-color: #ffffff;
                padding: 0px;
		border: 0px solid #ff0000; 
	}







/* This is a trick to make sure the layout is not affected by the
float on top-awards above. */

        .clearboth { 
                clear: both; 
        }




/* Footer. */

	#footer {
		clear: both;
		margin: 36px 0 18px 0 ;
		background-color: #ffffff;
                color: #145db6;
                font-size: x-small;
                text-align: center;
                border-top: 1px solid #a4d258; /* Green top border line. */
	}


        #footer p {
                background-color: #ffffff;
                color: #3d3d3d;
                margin: 5px 15px 15px 0px;
                font-size: x-small;
                font-weight: normal;
                text-align: center;
                letter-spacing: 0.1em;
        }


/* The following rules control the layout and behavior of the links in
the footer. */

        #footer ul { 
                background-color: transparent; 
                color: #145db6;
		list-style-type: none;
        }

	#footer li{
		display: inline;
        white-space: nowrap;
	}
	
	#footer li a {
                background-color: transparent;
		color: #145db6; /* Blue */
		text-decoration: none;
                font-weight: bold;
		margin: 1em .5em 0em .5em;
	}

	#footer li a:hover {
		text-decoration: none; 
                background-color: transparent;
		color: #f07228; /* Orange */
	}







/* The following sections contain the rules required to implement the
unique design elements and layout on each page. */



/* HOME PAGE RULES */

/* 2013 design */
#mainpage-top {
    position: relative;
    width:533px;
    height:232px;
    background: url(../images/mainpage/home_awards.jpg) top center no-repeat #0b3796;
}

#mainpage-top h1 strong { color: white; }

#mainpage-top h1 {
    position: absolute;
    top: 12px; left: 54px;
    right: 54px;
    padding:0; margin:0;

    text-align: center;
    background-color: yellow;
    color: #80deea;
    background: none;
    font-size: 22px;
    line-height: 1.5em;
}

#mainpage-bottom {
    margin: 20px 0;
}


#mainpage-bottom .category-box {
    text-align: center;
    width: 180px;
    float: left;
    border: none;
}

#mainpage-bottom .category-box a.text-link {
   display: block;
   font-weight: bold;
   clear:both;
   text-align: center;
   margin: 4px 0;
   min-height: 3.5em;
   font-size: 14px;
   border: none;
   color: #145DB6;
}

#mainpage-bottom .category-box + .category-box {
    border-left: 1px solid #5dcfe9;
}

#mainpage-bottom .category-box img { margin: 6px; }
#mainpage-bottom .category-box:hover img { 
    width: 113px; height: 113px; margin:0;
    -webkit-transform:rotate(12deg);
    -moz-transform:rotate(12deg);
    transform:rotate(12deg);
}
#mainpage-bottom .category-box:hover a.text-link { color: #f07228; }

#mainpage-bottom .separator {
    float: left;
}

/* end 2013 design */

/* Layout for the Top Award Designations on the the HOME page,
index.php. */

        .top-awards {  
                float: left;
                width: 172px;
                text-align: center;
                margin: 3px;
        }



/* Colored boxes of text below the Tow Award Designations on Home
page. There may be an issue with the images and their embedded color
profile. I used srgb, so these colors are slightly different than the
ones in Anni's spec. -Mary */

.mainpage-awardbox {
    color: #ffffff;
    text-align: center;
    font-size: 10pt;
    padding: 0px 10px 15px 10px;
}


#mpmedal1 {  background-color: #145db6; /* blue */ }

#mpmedal2 {  background-color: #79a423; /* green */ }

#mpmedal3 { background-color: #e87235;  /* orange */ }

#mpmedal4 {  background-color: #ee4037; /* red */ }

#mpmedal5 {  background-color: #692765; /* violet */ }

#mpmedal6 { background-color: #35a9b6; /* teal */ }










/* AWARD WINNERS PAGE RULES */

#awards-top-container {
    
}

.awards-top-link-box {
    float: left; width: 265px; margin: 4px 4px 6px;
}

.awards-top-link-box a, .awards-top-link-box > div {
    height: 80px;
    display: block;
    width: 265px;
}


#awards-top-link-toys { background:url(../images/awards-page/toys.jpg); }
a#awards-top-link-toys:hover { background:url(../images/awards-page/toys-roll.jpg); }
div#awards-top-link-toys:hover { background:url(../images/awards-page/empty-toys.jpg); }

#awards-top-link-audio { background:url(../images/awards-page/audio.jpg); }
a#awards-top-link-audio:hover { background:url(../images/awards-page/audio-roll.jpg); }
div#awards-top-link-audio:hover { background:url(../images/awards-page/empty-audio.jpg); }

#awards-top-link-book { background:url(../images/awards-page/book.jpg); }
a#awards-top-link-book:hover { background:url(../images/awards-page/book-roll.jpg); }
div#awards-top-link-book:hover { background:url(../images/awards-page/empty-book.jpg); }

#awards-top-link-multimedia { background:url(../images/awards-page/multimedia.jpg); height: 90px; }
a#awards-top-link-multimedia:hover { background:url(../images/awards-page/multimedia-roll.jpg); }
div#awards-top-link-multimedia:hover { background:url(../images/awards-page/empty-multimedia.jpg); height: 90px;}

#awards-top-link-mobile { background:url(../images/awards-page/mobile.jpg); }
a#awards-top-link-mobile:hover { background:url(../images/awards-page/mobile-roll.jpg); }
div#awards-top-link-mobile:hover { background:url(../images/awards-page/empty-mobile.jpg); }

#awards-top-link-software { background:url(../images/awards-page/software.jpg); height: 90px; }
a#awards-top-link-software:hover { background:url(../images/awards-page/software-roll.jpg); }
div#awards-top-link-software:hover { background:url(../images/awards-page/empty-software.jpg); height: 90px; }

#awards-top-link-health { background:url(../images/awards-page/health.jpg); }
a#awards-top-link-health:hover { background:url(../images/awards-page/health-roll.jpg); }
div#awards-top-link-health:hover { background:url(../images/awards-page/empty-health.jpg); }

#awards-top-link-archive { background:url(../images/awards-page/archive.jpg); }
a#awards-top-link-archive:hover { background:url(../images/awards-page/archive-roll.jpg); }

h2.category-header-main {
    border-bottom: none !important;
    text-transform:uppercase;
    font-size: 30px; font-weight: bold;
    margin: 0;
    /* color: #315b81; */
    color: #145db6
}
/* These rules govern the layout and style of the Award Winners products. */


    .categorySeparator {
        border-top: 1px solid #25c0e0; /* This creates the blue line at the end of each category group. */
        padding-top:170px;
        width: 530px;  
    }

/* This will add 170 pixels of height to a Category image header if
applied as a span class. */


        .category { 
                /* margin: 14px 0px 14px 0px;*/
                /* border:1px solid #f00; */
                padding:7px 0px 7px 0px;
                width: 530px;  
                text-align: left;
                background-color: #ffffff;
                border-top: 1px solid #25c0e0;
        }


        .product-image { 
                float: left;
                width: 100px;
                text-align: center;
                margin: 14px 15px 14px 0px;
                padding: 0px;
                border: 0px solid #ff66ff;
        }


        .product-info { 
                float: left;
                width: 270px;
                font-size: 10px;
                text-align: left;
                font-size: 10px;
                margin: 14px 0px 0px 0px;
                padding-right: 5px;
                border: 0px solid #ff8a00;
        }

        .product { 
                margin: 3px 20px 0px 0px;
                padding: 0px;
                background-color: #ffffff;
                color: #145db6;
                font-size: 13px; 
                font-weight: bold;
        }

        .price { 
                margin: 3px 0px 0px 0px;
                padding: 0px;
        }

        .mfg, .mfg a { 
                margin: 3px 0px 0px 0px;
                padding: 0px;
                font-size: 12px; 
        }


        .phone { 
                margin: 3px 0px 0px 0px;
                padding: 0px;                
        }


        .age { 
                float: left;
                width: 60px;
                height: 55px;
                vertical-align: middle;
                text-align: center;
                font-size: 12px; 
                margin: 14px 0px 0px 0px;
                border-left: 2px solid #145db6;
                border-right: 2px solid #145db6;
                padding-top: 15px;
        }


        .award { 
                float: left;
                width: 67px;
                height: 60px;
                vertical-align: middle;
                text-align: center;
                margin: 14px 0px 0px 2px;
                border: 0px solid #ff66ff;
        }


        .description { 

                margin: 100px 0px 10px 115px;
                text-align: left;               
                border: 0px solid #ff66ff;
        }

        .description p { 
                background-color: #ffffff;
                color: #000000;
                font-weight: normal;
                text-align: left;
                margin: 3px 0px 5px 0px;
                padding: 0px;
                font-size: 11px;
        }














/* SUBMISSIONS PAGE RULES */



/* Color class selectors based on the 3 main colors on the Home
page. Used to apply different colors to h2 on submissions page. */

        .toptoy { 
                color: #145db6; /* Top Toy Blue */
                font-weight: bold;
        }



        .LOL { 
                color: #79a423; /* LOL green */
        }



        .brain-child { 
                color: #f07228; /* Brain Child orange */
        }



/* Heading 2s on the Submissions page. */

        .toptoy h2 { 
                color: #145db6; /* Top Toy Blue */
                padding-top: 20px;
                margin: 20px 0px 5px 0px;
                border-top: 1px solid #25c0e0;
                border-bottom: 0px solid #25c0e0;
        }


        .LOL h2 { 
                color: #79a423; /* LOL green */
                padding-top: 20px;
                margin: 20px 0px 5px 0px;
                border-top: 1px solid #25c0e0;
                border-bottom: 0px solid #25c0e0;
        }


        .brain-child h2 { 
                color: #f07228; /* Brain Child orange */
                padding-top: 20px;
                margin: 20px 0px 5px 0px;
                border-top: 1px solid #25c0e0;
                border-bottom: 0px solid #25c0e0;                          
        }



/* Green star bullets in the Winner's Receive section of Submissions page. */

        .green-star-bullet p { 
                background-image: url(../images/star_green.jpg); /* Green star bullet */
                background-position: top left;
                background-repeat: no-repeat;
                margin: 0px 10px 0px 0px;
                padding: 2px 0px 2px 20px;
        }















/* Because sometimes you need an overide to force centering. This is
used on the 5th category image in award-winners.php, and the Downloads
button in submissions.php. */

        #center { 
                text-align: center;
        }

        .center { 
                text-align: center;
        }

        .left { 
                text-align: left;
        }

        .right { 
                text-align: right;
        }


/* Basic underline span class */

       .underline { 
                text-decoration: underline;
        }




/* Added by Matt. Format the Category headers on award-winners.php */

div.betweenCategories {
    border-top: 1px solid #25c0e0;
    height:170px;
    width: 530px;
}

td.categoryHeaderRight {
    text-align: right;
    padding: 0px 0px 10px 0px;
}

table.categoryHeader {
    width:530px;
}

div.small-year-banner {
    /* "2009 Tillywig Award Winners" - appears just over each category header image */
    /* color: #2e598e; */
    color: #145db6 !important;
    font-size:12pt !important;
    font-weight:bold;
}

      #nav-apply-now { 
        color: #145db6; 
      }