@font-face {
font-family: MomsTypewriter;
src: url('../font/moms-typewriter.ttf');
}

body {
    	background-image:url('../images/crubg3.jpg');
    	background-size: cover;
    	background-position: 50%;
    }
.clearDiv {
	clear: both;
}

#catalog {
	width: 960px;
	height: 560px;
	/*background-image: url('../images/library/cataloguebknd.jpg');*/
	padding:0;
}

#first-column {
	font-family: MomsTypewriter;
	font-size: 18px;
	width: 300px;
	height: 560px;
	float: left;
	/*background-image:url('../images/cru-grey.png');*/

	background-image: url("../images/col2-bg.png");
	padding:20px 0 0;
	box-sizing:border-box;
}

.first-colum-item {
	font-family: 'momstypewriterregular';
	color:black;
	width: 300px;
	padding: 12px 15px;
	box-sizing:border-box;
	cursor: hand;
	cursor: pointer;
	float: left;
}

.first-colum-item:hover, .second-column-item:hover {
	background-image: url("../images/welcome_header_double.png");
	background-size: 101% 100%;
}
.third-column-category .third-li:hover {
	cursor: pointer;
	background-image: url("../images/welcome_header_double.png");
	background-size: 101% 100%;
	color: black;
}
.third-column-category .third-li {
	font-family: "robotoregular";
	font-weight: 700;
}

#second-column li {
	padding: 8px 0 8px 7px;
	cursor: hand;
	cursor: pointer;
	font-family: 'robotoregular';
	font-weight:700;
}
#second-column li a{
	font-weight:400;
	color:#000;
}
#second-column li a:hover{
	font-weight:400;
	color:#fff;
}

.third-column-category li {
	color:#000;
	padding:10px 0 10px 10px;
	width:250px;
}


#first-column img {
	margin: -7px 0 0 0;
	float: left;
}


#second-column {
	font-family: MomsTypewriter;
	width: 360px;
	height: 560px;
	float: left;
	position: relative;
	overflow-y: scroll;
	box-sizing:border-box;
	background-image: url("../images/col1-bg.png");
}

.second-column-category {
	display: none;
	position: absolute;
	top: 0;
}

.third-column-category li:hover {
	color:#fff;
}

.selected-1, .selected-2 {
	color: #000;
	background-image: url("../images/welcome_header_double.png");
background-size: 101% 100%;
}
    .itemsubnav{
      text-indent: 30px;
    }
    .itemmainnav .text:hover {
      background-image: url("../images/welcome_header_double.png");
      background-size: 101% 100%;
    }

    .itemmainnav .text {
      padding: 8px 0px 8px 7px;
      cursor: pointer;
      font-family: "robotoregular";
      font-weight: 700;
      width: 100%;
      display: block;
    }
    .itemsubnav{
      display: none;
    }

    .selectednav .itemsubnav {
      display: block;
    }

.second-column-category ul, .third-column-category ul {
	width: 360px;
	padding:20px 25px 0 15px;
	box-sizing:border-box;
}

#third-column {
	width: 300px;
	height: 560px;
	float: left;
	position: relative;
	overflow: hidden;
	box-sizing:border-box;
	background-image: url("../images/col2-bg.png");
}

.third-column-category {
	display: none;
	overflow-x: hidden;
	overflow-y: scroll;
	height: 455px;
}

#home #content{
	background:none;
}
.third-column-category li a{
	color:#000;
    font-weight: 700;
    display: block;
    font-size: 12px;
}
.third-column-category li a:hover{
	color:#fff;
}
#latest, .arrow-box{
	display: none;
}

@media (max-width: 900px) {
	#catalog{
        position: relative;
        width: 100%;
        height: auto;
        overflow: hidden;
    }
    #catalog ul li {
        width: 100%;
    }

    #first-column{
        width: 100%;
    }
    #second-column{
    	background:white;
        opacity: 1;
        right: -100%;
        position: absolute;
        width: 90%;
        transition: all 1s ease 0s;
        	-webkit-transition: all 1s ease 0s;
	-moz-transition: all 1s ease 0s;
	-ms-transition: all 1s ease 0s;
	-o-transition: all 1s ease 0s;
    }
    #third-column{
    	background:lightgray;
        position: absolute;
        width: 80%;
        transition: all 1s ease 0s;
                	-webkit-transition: all 1s ease 0s;
	-moz-transition: all 1s ease 0s;
	-ms-transition: all 1s ease 0s;
	-o-transition: all 1s ease 0s;
        right: -100%;
    }
}