body{
	background-image: url(images/320/background.png);
	background-repeat: no-repeat;
	background-position: center top;
	height: 1174px;
}

header{
	position: fixed;
	display: block;
	width: 320px;
	left: 50%;
	margin-left: -160px;
	height: 114px;
	background-image: url(images/320/header.png);
	background-repeat: no-repeat;
	z-index: 2000;
}
nav{
	position: absolute;
	top: 70px;
	left: 20px;
	z-index: 20000;
}

article{
	position: relative;
	display: block;
	width: 270px;
	left: 50%;
	margin-left: -135px;
	padding-top: 130px;
	height: 1030px;
}

#home{
    position: absolute;
    top: 0;
    left: 30px;
    width: 258px;
    height: 50px;
}

#menuToggle{
	display: block;
	background-image: url(images/320/menu_button.png);
	background-repeat: no-repeat;
	width: 36px;
	height: 24px;
}

nav ul{
	list-style: none;
	display: none;
	width: 233px;
	height: 281px;
	padding: 20px;
	z-index: 20000;
	background-image: url(images/320/menu_background.png);
	background-repeat: no-repeat;
}

nav ul.display{
	display: block;
}

nav ul li{
	text-indent: -30000px;
	width: 270px;
}

nav ul li a{
	display: block;
}
#mnuPaint{
	position: absolute;
	top: 60px;
	left: 20px;
	width: 126px;
	height: 38px;
	background-image: url(images/320/paint.png);
	background-repeat: no-repeat;
}
#mnuPaint:hover{
	background-image: url(images/320/paint_hover.png), url(images/320/paint.png);
	background-repeat: no-repeat, no-repeat;
}

#mnuDraw{
	position: absolute;
	top: 105px;
	left: 24px;
	width: 126px;
	height: 38px;
	background-image: url(images/320/draw.png);
	background-repeat: no-repeat;
}
#mnuDraw:hover{
	background-image: url(images/320/draw_hover.png), url(images/320/draw.png);
	background-repeat: no-repeat, no-repeat;
}

#mnuSculp{
	position: absolute;
	top: 150px;
	left: 22px;
	width: 126px;
	height: 38px;
	background-image: url(images/320/sculp.png);
	background-repeat: no-repeat;
}
#mnuSculp:hover{
	background-image: url(images/320/sculp_hover.png), url(images/320/sculp.png);
	background-repeat: no-repeat, no-repeat;
}

#mnuInstal{
	position: absolute;
	top: 190px;
	left: 22px;
	width: 126px;
	height: 38px;
	background-image: url(images/320/instal.png);
	background-repeat: no-repeat;
}
#mnuInstal:hover{
	background-image: url(images/320/instal_hover.png), url(images/320/instal.png);
	background-repeat: no-repeat, no-repeat;
}

#mnuPerfo{
	position: absolute;
	top: 233px;
	left: 23px;
	width: 126px;
	height: 38px;
	background-image: url(images/320/perfo.png);
	background-repeat: no-repeat;
}
#mnuPerfo:hover{
	background-image: url(images/320/perfo_hover.png), url(images/320/perfo.png);
	background-repeat: no-repeat, no-repeat;
}

#mnuVideo{
	position: absolute;
	top: 277px;
	left: 24px;
	width: 126px;
	height: 38px;
	background-image: url(images/320/video.png);
	background-repeat: no-repeat;
}
#mnuVideo:hover{
	background-image: url(images/320/video_hover.png), url(images/320/video.png);
	background-repeat: no-repeat, no-repeat;
}

#mnuAbout{
	position: absolute;
	top: 282px;
	left: 166px;
	width: 126px;
	height: 38px;
	background-image: url(images/320/about.png);
	background-repeat: no-repeat;
}
#mnuAbout:hover{
	background-image: url(images/320/about_hover.png), url(images/320/about.png);
	background-repeat: no-repeat, no-repeat;
}

section.home{
	position: relative;
	width: 273px;
	height: 254px;
	display: none;
}
section.home:nth-of-type(-n+3){
    display:block;
    margin-bottom: 30px;
}

section.home img{
	position: absolute;
	top: 8px;
	left: 5px;
	width: 265px;
	height: 206px;
}

section.home div{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 273px;
	height: 254px;
	background-image: url(images/320/photo.png);
	background-repeat: no-repeat;
}

section.home h1{
	position: absolute;
	bottom: 20px;
	left: 20px;
	font-size: 24px;
}

section.articleImage{
	position: relative;
	width: 294px;
	height: 204px;
}

section.articleImage div{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 294px;
	height: 204px;
	background-image: url(images/320/article_image.png);
	background-repeat: no-repeat;
}
section.articleImage img{
	position: absolute;
	top: 8px;
	left: 10px;
	width: 274px;
	height: 188px;
}

section.articleText{
	position: relative;
	display: block;
	width: 285px;
	height: 318px;
	background-image: url(images/320/article_text.png);
	background-repeat: no-repeat;
	margin-top: 40px;
}

section.articleText h1{
	position: relative;
	display: block;
	width: 250px;
	height: 20px;
	padding-top: 20px;
	margin-left: 20px;
	font-size: 24px;
}

section.articleText div{
	position: absolute;
	width: 235px;
	height: 220px;
	top: 50px;
	left: 20px;
	overflow: scroll;
	font-family: Arial;
	font-size: 16px;
	line-height: 24px;
	margin-top: 20px;
}


section.text{
	position: relative;
	display: block;
	width: 292px;
	height: 529px;
	background-image: url(images/320/text.png);
	background-repeat: no-repeat;
	margin-bottom: 40px;
}

section.text h1{
	position: relative;
	display: block;
	width: 210px;
	height: 20px;
	padding-top: 30px;
	margin-left: 30px;
	font-size: 24px;
}

section.text div{
	position: relative;
	width: 220px;
	height: 400px;
	margin-top: 20px;
	margin-left: 30px;
	overflow: scroll;
	font-family: Arial;
	font-size: 16px;
	line-height: 24px;
}

footer{
	position: absolute;
	bottom: 20px;
	left: 0px;
	width: 231px;
	height: 158px;
	background-image: url(images/320/footer.png);
	background-repeat: no-repeat;
}

#icon{
    position: absolute;
    right: 15px;
    bottom: 15px;
    width: 50px;
    height: 54px;
}

section.articleImage video{
	position: absolute;
	top: 10px;
	left: 8px;
	width: 274px;
	height: 188px;
    background-color: white;
}

section.videoControls{
	position: relative;
	display: block;
	width: 285px;
	height: 40px;
	background-image: url(images/320/video_controls.png);
	background-repeat: no-repeat;
	margin-top: -10px;
	margin-left: 5px;
}

.playPause{
    position: absolute;
    background-image: url(images/320/video_pause.png);
    background-repeat: no-repeat;
    width: 9px;
    height: 8px;
    top: 12px;
    left: 15px;
}

.playPause.paused{
    background-image: url(images/320/video_play.png);
}

.progress{
    position: absolute;
    background-image: url(images/320/video_timeline.png);
    background-position: left 3px;
    background-repeat: no-repeat;
    width: 110px;
    height: 10px;
    top: 10px;
    left: 30px;
}

.progressItem{
    position: relative;
    background-image: url(images/320/video_progress.png);
    background-position: left top;
    background-repeat: no-repeat;
    width: 2px;
    height: 6px;
    top: 2px;
    left: 0;
}

.time{
    position: absolute;
    width: 54px;
    height: 14px;
    top: 10px;
    left: 150px;
    font-size: 10px;
}

.currentTime{
    position: absolute;
    width: 25px;
    height: 14px;
    top: 0px;
    left: 0px;
}

.totalTime{
    position: absolute;
    width: 25px;
    height: 14px;
    top: 0px;
    right: 0px;
}

.volumeIcon{
    position: absolute;
    background-image: url(images/320/video_volume_loudspeaker.png);
    background-position: left top;
    background-repeat: no-repeat;
    width: 5px;
    height: 6px;
    top: 13px;
    left: 210px;
}

.volume{
    position: absolute;
    background-image: url(images/320/video_volume_line.png);
    background-position: left 2px;
    background-repeat: no-repeat;
    width: 24px;
    height: 6px;
    top: 13px;
    left: 220px;
}

.volumeValue{
    position: absolute;
    background-image: url(images/320/video_volume.png);
    background-position: left top;
    background-repeat: no-repeat;
    width: 4px;
    height: 5px;
    top: 0px;
    left: 0px;
}

.fullscreen{
    position: absolute;
    background-image: url(images/320/video_fullscreen.png);
    background-position: left top;
    background-repeat: no-repeat;
    width: 20px;
    height: 12px;
    top: 10px;
    left: 250px;
}