@charset "UTF-8";


/* ---- colors 

#C2B8AE - Container & Footer beige
#333	- Nav Background
#794226 - Brown
#c01517	- link color
#9A7D59	- heading first word style
---- */

/* ---- Fonts ----- */

@font-face {
    font-family: 'AG_BenguiatRegular';
    src: url('../fonts/agbcb-webfont.ttf');
    src: url('../fonts/agbcb-webfont.ttf?#iefix') format('embedded-opentype'),
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Shojumaru';
    src: url('../fonts/shojumaru-regular-webfont.ttf');
    src: url('../fonts/fonts/shojumaru-regular-webfont.ttf?#iefix') format('embedded-opentype'),
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bilbo';
    src: url('../fonts/Bilbo-Regular.otf');
    src: url('../fonts/fonts/Bilbo-Regular.otf?#iefix') format('embedded-opentype'),
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Komika';
    src: url('../fonts/komtxt.ttf');
    src: url('../fonts/komtxt.ttf?#iefix') format('embedded-opentype'),
    font-weight: normal;
    font-style: normal;
}



/* ---------------VIDEO GENERAL STYLES-------------*/

#wrapper {
margin:0;
background:url(../images/backgrounds/lightbambooforest.jpg) repeat-x;
background-attachment:fixed;
}

video { 
outline: none; 
-moz-outline-style: none;
 }


.videoBanner {

}

/* ---------------VIDEO MENU-------------*/

#videoCollection{
font-family: 'Shojumaru';
font-size: 1.7em;
color: #eee;
line-height:.5em;
padding-top:20px;
margin-left:2px;
text-shadow:#000 0 0 7px;

}
#videoCollection2 {
font-family: 'Shojumaru';
font-size: 1em;
color: #eee;
line-height:.5em;
margin-left:2px;
padding-bottom:20px;
text-shadow:#000 0 0 7px;

}


#videoMenu {
width:100%;
height:600px;
float:left;
background:#794226;
background: linear-gradient(left, #603220 4%, #794226 63%);
background: -o-linear-gradient(left, #603220 4%, #794226 63%);
background: -moz-linear-gradient(left, #603220 4%, #794226 63%);
background: -webkit-linear-gradient(left, #603220 4%, #794226 63%);
background: -ms-linear-gradient(left, #603220 4%, #794226 63%);


padding:5px 5px 25px 5px;
margin:0 auto;
border-radius: 0 20px 20px 0;
-moz-box-shadow:    4px 8px 5px 5px #777;
  -webkit-box-shadow: 4px 8px 5px 5px #777;
  box-shadow:         4px 8px 5px 5px #777;
}

.videoLeft h3 {
width:80%;
font-size:1.5em;
font-weight:  bold;
padding:10px;
text-align: center;
}

.videoList {
width:100%;
margin:1px;
padding:7px;

}


#videoMenu > ul > li {
width:80%;
height:20px;
padding-top:10px;
border-bottom:1px dotted white;
list-style-type: none;
margin-left:4px;
}



#videoMenu > ul > li > a {
font-family: 'Komika';
font-size:1em;
color: #cccccc;
text-decoration: none;


}

#videoMenu > ul > li > a:hover{
color: #ffffff;
text-decoration: none;
font-weight:bold;

}




.videoMenuCat {

}

.videoMenuLink {

}

/* ---------------VIDEO HOME PAGE-------------*/

#videoWrapper {
width:100%;
float:left;
height:100%;
border: 1px solid black;
padding:1px;
margin:1px;
}

.videoCenter {
width:66%;
height:100%;
float:left;
margin:10px 0 0 10px;
padding-left:5px;

}

.videoLeft {
width:155px;
height:100%;
float:left;
margin:10px 0 0 -7px ;
padding:5px;

}

.videoRight {
width:125px;
height:330px;
margin:10px 0 0 0;
padding:1px;
float:right;
background: #fff url(../images/kanji-right.jpg)no-repeat;

}

video {
margin: 0 auto;
width:100%;
}

.video p {
margin-bottom: 1.5em;
font-size: .75em; }



h2.video {
font-family: 'shojumaru';
font-size:1.9em;
font-weight:normal;
font-style: normal;
padding:25px 0 5px 20px;
}

.video h4.red {
color:#c01517;
font-size:.8em;
font-weight:bold;
font-style:normal;
padding: 15px 0 15px;
background:#fff url(images/brown_flower.png)no-repeat;
background-size:20px 20px;
text-indent: 27px;
line-height:5%;
}


.featuredVideo {
width: 92%;
float:left;
margin:30px 20px;
padding:10px;
background: #333333;
}

h2.featuredLabel {
background: #666;
padding: 5px 0 0 10px;
line-height:.5em;
width:60%;
font-family:'Bilbo';
font-size:2em;
text-shadow:
    
    /* Simulated effect for Firefox and Opera
       and nice enhancement for WebKit */
   -1px -1px 0 #000,  
    1px -1px 0 #000,
   -1px  2px 0 #000,
    1px  2px 0 #000;
color:#ffffff;
margin: 10px 0 15px 5px;
border: 1px solid black;
border-radius: 0 0 70px 0;
}

h2.featuredVideoTitle {
font-family:"Helvetica";
font-size:1.1em;
font-weight:bold;
color:#ffffff;
padding:20px 0 4px 5px;
}

.featuredVideoDesc {
font-family: 'shojumaru';
font-size:1.9em;
font-weight:normal;
font-style: normal;
padding:25px 0 5px 20px;
}

.videoDescription {
background: #555;
padding:15px;
text-align:left;
font-size:.85em;
color: #fff;
border: 1px solid black;
width:75%;
border-radius: 25px 0 70px 0;
}

.tip {
font-family: 'shojumaru';
font-size:1.9em;
color: #d2bf66;
text-shadow:
    
    /* Simulated effect for Firefox and Opera
       and nice enhancement for WebKit */
   -1px -1px 0 #000,  
    1px -1px 0 #000,
   -1px  2px 0 #000,
    1px  2px 0 #000;
}


.videoGrid {
width:95%;
float:left;
display:inline;
clear:both;
margin:15px 20px;
padding:1px;
border: 1px solid black;
background: #333333;
}

.gridCategory {
width:100%;
float:left;
clear:both;
border:1px solid black;

}

.smallVideoBox {
width:30%;
height:160px;
margin: 10px 5px 5px 5px;
float:left;
display:inline;
padding:3px;
background: #333333;

}




a.videoLinkBox {
width:100%;
text-decoration:none;
color:#aaaaaa;
float:left;
margin:1px;

}

a.videoLinkBox:hover, a.videoLinkBox:hover img.videoThumbs {

color:#ffffff;

}

a.videoLinkBox:hover img.videoThumbs {
border: 1px solid #ffffff;
}





.videoThumbs {
border: 1px solid black;

}


.videoThumbTitle {
width:200px;
font-weight:bold;
font-size:.8em;

}


.videoThumbDesc {
font-weight:normal;
font-size:.7em;
width:200px;

}

.videoThumbDate {

}






p.videoIntro {

}



a.seeAllLink {
width:30%;
height:15px;
margin-right:68%;
float:right;
text-decoration:none;
display:block;
clear:right;
font-size:1.1em;
margin-top: -10px;
}


a.seeAllLink:hover {

text-decoration:underline;
color:#ff2200;

}



/* ---------------VIDEO CATEGORIES-SEARCH RESULTS PAGE-------------*/

.searchBar {

}

.searchIcon {

}


.videoCatTitle {

}


#videoCount {

}

#videoCatThumb {

}


/* ---------------SELECTED VIDEO PAGE-------------*/

.mainVideo {

}


/* -----------------------------------------
   ----------Mobile Styles Styles-----------
   ----------------------------------------- */
@media only screen and (max-width:480px){


@charset "UTF-8";

@font-face {
    font-family: 'AG_BenguiatRegular';
    src: url('../fonts/agbcb-webfont.ttf');
    src: url('../fonts/agbcb-webfont.ttf?#iefix') format('embedded-opentype'),
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Shojumaru';
    src: url('../fonts/shojumaru-regular-webfont.ttf');
    src: url('../fonts/fonts/shojumaru-regular-webfont.ttf?#iefix') format('embedded-opentype'),
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bilbo';
    src: url('../fonts/Bilbo-Regular.otf');
    src: url('../fonts/fonts/Bilbo-Regular.otf?#iefix') format('embedded-opentype'),
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Komika';
    src: url('../fonts/komtxt.ttf');
    src: url('../fonts/komtxt.ttf?#iefix') format('embedded-opentype'),
    font-weight: normal;
    font-style: normal;
}




/* ---------------VIDEO MENU-------------*/

#videoMenu {
width:100%;
height:375px;
float:left;
background:#794226;
background: linear-gradient(left, #603220 4%, #794226 63%);
background: -o-linear-gradient(left, #603220 4%, #794226 63%);
background: -moz-linear-gradient(left, #603220 4%, #794226 63%);
background: -webkit-linear-gradient(left, #603220 4%, #794226 63%);
background: -ms-linear-gradient(left, #603220 4%, #794226 63%);


padding:5px 5px 25px 5px;
margin:0 auto;
border-radius: 0 20px 20px 0;
-moz-box-shadow:    4px 8px 5px 5px #777;
  -webkit-box-shadow: 4px 8px 5px 5px #777;
  box-shadow:         4px 8px 5px 5px #777;
}

.videoList {
width:100%;
height:200px;
margin:1px;
padding:7px;

}

#videoMenu > ul > li {
width:80%;
height:24px;
padding-top:10px;
border-bottom:1px dotted white;
list-style-type: none;
margin-left:4px;
}



#videoMenu > ul > li > a {
font-family: 'Komika';
font-size:1.3em;
color: #cccccc;
text-decoration: none;


}

#videoMenu > ul > li > a:hover{
color: #ffffff;
text-decoration: none;
font-weight:bold;

}



/* ---------------VIDEO HOME PAGE-------------*/

#videoWrapper {
width:100%;
float:left;
height:100%;
border: none;
padding:1px;
margin:1px;
}


h2.video {

font-family: 'shojumaru';
font-size:1.9em;
font-weight:normal;
font-style: normal;
padding:80px 0 5px 20px;
}

.videoLeft {
width:95%;
height:100px;
float:left;
clear:both;
margin:10px 0 0 -7px ;
padding:5px;

}

.videoCenter {
width:95%;
height:100%;
float:left;
margin:250px 0 0 -10px;
padding-left:0;

}

a.seeAllLink {
width:60%;
height:15px;
margin-right:37%;
float:right;
text-decoration:none;
display:block;
clear:right;
font-size:.9em;
margin-top: -10px;
}


a.seeAllLink:hover {

text-decoration:underline;
color:#ff2200;

}
.smallVideoBox {
width:78%;

margin: 10px 5px 28px 20px;
float:left;
display:inline;
padding:3px;
background: #333333;

}




a.videoLinkBox {
width:100%;
text-decoration:none;
color:#aaaaaa;
float:left;
margin:1px;

}

a.videoLinkBox:hover, a.videoLinkBox:hover img.videoThumbs {

color:#ffffff;

}

a.videoLinkBox:hover img.videoThumbs {
border: 1px solid #ffffff;
}





.videoThumbs {
border: 1px solid black;

}


.videoThumbTitle {
width:200px;
font-weight:bold;
font-size:.8em;

}


.videoThumbDesc {
font-weight:normal;
font-size:.7em;
width:200px;

}

.tip {
font-family: 'shojumaru';
font-size:1.9em;
color: #d2bf66;
text-shadow:
    
    /* Simulated effect for Firefox and Opera
       and nice enhancement for WebKit */
   -1px -1px 0 #000,  
    1px -1px 0 #000,
   -1px  2px 0 #000,
    1px  2px 0 #000;

}



.videoRight {
display:none;
}