.snapjs-right .snap-drawer-left { display: block; right: 0px; left: auto; }
.snapjs-right .snap-drawer-right { display: none; }
#content { background-color: rgb(191, 199, 216); background-position: 50% 75%; background-repeat: no-repeat no-repeat; }
#toolbar { background-color: rgb(83, 110, 167); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(17, 27, 50); position: absolute; top: 0px; right: 0px; left: 0px; width: auto; height: 44px; background-position: initial initial; background-repeat: initial initial; }
#toolbar h1 { color: rgb(255, 255, 255); font-size: 16px; line-height: 22px; text-align: center; text-shadow: rgba(0, 0, 0, 0.8) 0px -1px 0px; position: absolute; top: 0px; right: 44px; left: 44px; width: auto; height: 44px; }
#open-left { background-image: url(../images/open.png); display: block; width: 44px; height: 44px; background-position: 50% 50%; background-repeat: no-repeat no-repeat; }
#no-drag, #do-drag { position: absolute; top: 50%; left: 50%; width: 50%; height: 100px; margin-left: -25%; margin-top: -50px; background-color: red;
color: rgb(255, 255, 255); text-align: center; line-height: 100px; background-position: initial initial; background-repeat: initial initial; }
#do-drag { background-color: green; background-position: initial initial; background-repeat: initial initial; }
.demo-social { padding: 0px 15px; }
.toggler { width: 80%; background-color: rgba(255, 255, 255, 0.498039); margin: 0px auto 20px; position: relative; top: 70px; padding: 20px; text-align: center; background-position: initial initial; background-repeat: initial initial; }
.drawer-inner { transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; }
.snapjs-expand-left .drawer-inner, .snapjs-expand-right .drawer-inner { opacity: 0; }
.opt { padding: 20px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgba(0, 0, 0, 0.0980392); }
.opt p { font-weight: bold; margin-top: 0px; margin-bottom: 5px; color: rgba(0, 0, 0, 0.6); }
.snap-content { background-color: rgb(191, 199, 216); background-position: initial initial; background-repeat: initial initial; }
.snap-drawers { background-color: rgb(50, 57, 73); background-position: initial initial; background-repeat: initial initial; }
.snap-drawer { background-color: rgb(50, 57, 73); color: rgb(238, 238, 238); background-position: initial initial; background-repeat: initial initial; }
.snap-drawer h3 { font-size: 25px; font-weight: normal; margin: 5px 0px 5px 15px; }
.snap-drawer h4 { padding: 10px; border-top-width: 1px; border-top-style: solid; border-top-color: rgba(255, 255, 255, 0.0980392); margin: 0px; }
.snap-drawer ul { padding: 0px; margin: 0px; list-style-type: none; }
.snap-drawer li > a { display: block; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-top-width: 1px; border-top-style: solid; border-top-color: rgba(255, 255, 255, 0.0980392); padding: 5px; font-weight: bold; text-shadow: rgb(0, 0, 0) 0px 1px 0px; text-decoration: none; color: rgb(204, 204, 204); text-indent: 20px; }
.snap-drawer p { opacity: 0.5; padding: 15px;  }

@media all and (min-width: 1024px) {
	#sugres {position:relative;}
	.searchfield {height: 26px; font-family : Tahoma,Arial, sans-serif; font-size : 17px;}
	.antwoorden {height: 300; width:300px;font-family : Tahoma,Arial, sans-serif; font-size : 17px;}
	#searchbutton {height: 30px; width: 62px;margin-left: 2px;}
	#search { width : 230px; font-family : Tahoma,Arial, sans-serif;  padding: 0px 0px 0px 4px;margin:0px 2px 10px 0px;float: left; }
	#search-results { width : 498px; border : 1px solid #000; background : #fff;font-size : 15px; display : none; float : left; }
	* html div#search-results { width : 499px; } /* box model hack */
	.sr, .srs { width : 100%; float : left; font-family : Tahoma,Arial, sans-serif; font-size : 15px; padding : 1px 0 0 0; }
	.sr { background-color : #fff; color : #000; }
	.srs { background-color : #36c; color : #fff; cursor : pointer; }
	.sr .src { color : #008000; }
	.srs .src { color : #fff; }
	.srt { float : left; font-size : 15px; margin-left : 4px; }
	.src { float : right; font-size : 15px; margin-right : 3px; padding-top : 2px; }
	#suggest { width : 300px; border : 1px solid #000; background : #fff;font-size : 15px;display:none;position:absolute;top:5px ; left:5px;}
	* html div#suggest { width : 499px; } /* box model hack */
	#results { width : 490px; height: 250px; border : 1px solid #000; display : none; background : #fff;overflow:auto; padding: 10px 10px 10px 10px;font-size : 15px;}
	
	#searchform {width: 1024px;margin-bottom:10px;}
	#zoekpatroon {width: 180px;}
	.letters {width: 20px; height: 30px; padding: 0px 5px 0px 5px;}
	.searchform {width: 320px;margin-bottom:10px;}
	.woord {display: inline-block;}
	.woordedit {color : #fff; display: inline-block;}
	.woordedit:hover {color : #000;}
	.woordlen {margin-top: 10px;}
	.intro {width: 748px; margin-bottom: 10px;}
	
	.nglist {border-collapse: collapse; font-family: Tahoma,Arial, sans-serif; font-size: 15px;}
	.ngzrow { width: 400px;background-color: rgb(153, 170, 206);}
	.ngtrow { width: 400px;background-color: rgb(153, 170, 206);}
	.ngarow{ display: none; width: 380px; padding-left: 20px; k;font-size: 13px;background-color: rgb(166, 193, 206);}	
	.ngacell { display: inline-block;width: 303px; }
	.ngbcell { display: inline-block;width: 75px; }
	.ngabcell { display: inline-block;width:398px;}
		
	.cngw {width: 700px;font-family: Tahoma,Arial, sans-serif; font-size: 15px;color : #000;font-weight: bold; }
	.cngd {width: 700px;font-family: Tahoma,Arial, sans-serif; font-size: 12px;color : #000;padding: 0px 0px 0px 20px; }
	.cngv {width: 720px;font-family: Tahoma,Arial, sans-serif; font-size: 12px;color : #000;padding: 0px 0px 0px 20px; }
	.cngaot {width: 720px;font-family: Tahoma,Arial, sans-serif; font-size: 12px;color : #000;padding: 0px 0px 0px 20px;font-weight: bold; }
	.cngl {width: 720px;font-family: Tahoma,Arial, sans-serif; font-size: 12px;color : #000;padding: 0px 0px 0px 20px; }
	.cngao {width: 720px;font-family: Tahoma,Arial, sans-serif; font-size: 12px;color : #000;padding: 0px 0px 0px 20px;}
  }
  
@media all and (max-width: 1023px) and (min-width: 768px) {
	#sugres {position:relative;}
	.searchfield {height: 28px; font-family : Tahoma,Arial, sans-serif; font-size : 17px;padding: 0px 5px 0px 5px;}
	.antwoorden {height: 300; width:300px;font-family : Tahoma,Arial, sans-serif; font-size : 17px;}
	#searchbutton {height: 32px; width: 62px;margin-left: 2px;}
	#search { width : 460px; font-family : Tahoma,Arial, sans-serif;  padding: 0px 0px 0px 4px;margin:0px 2px 10px 0px;float: left; }
	#search-results { width : 306px; border : 1px solid #000; background : #fff;font-size : 15px; display : none; float : left; }
	* html div#search-results { width : 307px; } /* box model hack */
	.sr, .srs { width : 100%; float : left; font-family : Tahoma,Arial, sans-serif; font-size : 15px; padding : 1px 0 0 0; }
	.sr { background-color : #fff; color : #000; }
	.srs { background-color : #36c; color : #fff; cursor : pointer; }
	.sr .src { color : #008000; }
	.srs .src { color : #fff; }
	.srt { float : left; font-size : 15px; margin-left : 4px; }
	.src { float : right; font-size : 13px; margin-right : 3px; padding-top : 2px; }
	#suggest { width : 306px; border : 1px solid #000; background : #fff;font-size : 13px;display:none;position:absolute;top:5px ; left:5px;}
	* html div#suggest { width : 307px; } /* box model hack */
	#results { width : 700px; height: 250px; border : 1px solid #000; display : none; background : #fff;overflow:auto; padding: 10px 10px 10px 10px;font-size : 15px;}
	
	#searchform {width: 748px; margin-bottom:10px;}
	#zoekpatroon {width: 180px;}
	.letters {width: 20px; height: 28px; padding: 0px 5px 0px 5px;}
	.searchform {width: 748px;margin-bottom:10px;}
	.woord {display: inline-block;}
	.woordedit {color : #fff; display: inline-block;}
	.woordedit:hover {color : #000;}
	.woordlen {margin-top: 10px;}
	.intro {width: 748px; margin-bottom: 10px;}
	
	.nglist {border-collapse: collapse; font-family: Tahoma,Arial, sans-serif; font-size: 15px;}
	.ngzrow { width: 400px;background-color: rgb(153, 170, 206);}
	.ngtrow { width: 400px;background-color: rgb(153, 170, 206);}
	.ngarow{ display: none; width: 380px; padding-left: 20px; k;font-size: 13px;background-color: rgb(166, 193, 206);}	
	.ngacell { display: inline-block;width: 303px; }
	.ngbcell { display: inline-block;width: 75px; }
	.ngabcell { display: inline-block;width:398px;}
	
	.cngw {width: 700px;font-family: Tahoma,Arial, sans-serif; font-size: 15px;color : #000;font-weight: bold; }
	.cngd {width: 700px;font-family: Tahoma,Arial, sans-serif; font-size: 12px;color : #000;padding: 0px 0px 0px 20px; }
	.cngv {width: 720px;font-family: Tahoma,Arial, sans-serif; font-size: 12px;color : #000;padding: 0px 0px 0px 20px; }
	.cngaot {width: 720px;font-family: Tahoma,Arial, sans-serif; font-size: 12px;color : #000;padding: 0px 0px 0px 20px;font-weight: bold; }
	.cngl {width: 720px;font-family: Tahoma,Arial, sans-serif; font-size: 12px;color : #000;padding: 0px 0px 0px 20px; }
	.cngao {width: 720px;font-family: Tahoma,Arial, sans-serif; font-size: 12px;color : #000;padding: 0px 0px 0px 20px;}
  }
@media all and (max-width: 767px) {
	#sugres {position:relative;}
	.searchfield {height: 26px; font-family : Tahoma,Arial, sans-serif; font-size : 17px;}
	.antwoorden {height: 300; width:300px;font-family : Tahoma,Arial, sans-serif; font-size : 17px;}
	#searchbutton {height: 30px; width: 62px;margin-left: 2px;}
	#search { width : 230px; font-family : Tahoma,Arial, sans-serif;  padding: 0px 0px 0px 4px;margin:0px 2px 10px 0px;float: left; }
	#search-results { width : 306px; border : 1px solid #000; background : #fff;font-size : 15px; display : none; float : left; }
	* html div#search-results { width : 307px; } /* box model hack */
	.sr, .srs { width : 100%; float : left; font-family : Tahoma,Arial, sans-serif; font-size : 15px; padding : 1px 0 0 0; }
	.sr { background-color : #fff; color : #000; }
	.srs { background-color : #36c; color : #fff; cursor : pointer; }
	.sr .src { color : #008000; }
	.srs .src { color : #fff; }
	.srt { float : left; font-size : 13px; margin-left : 4px; }
	.src { float : right; font-size : 10px; margin-right : 3px; padding-top : 2px; }
	#suggest { width : 306px; border : 1px solid #000; background : #fff;font-size : 13px;display:none;position:absolute;top:5px ; left:5px;}
	* html div#suggest { width : 307px; } /* box model hack */
	#results { width : 298px; height: 250px; border : 1px solid #000; display : none; background : #fff;overflow:auto; padding: 10px 10px 10px 10px;font-size : 15px;}
	
	#searchform {width: 320px;margin-bottom:10px;}
	#zoekpatroon {width: 180px;}
	.letters {width: 20px; height: 30px; padding: 0px 5px 0px 5px;}
	.searchform {width: 320px;margin-bottom:10px;}
	.woord {display: inline-block;}
	.woordedit {color : #fff; display: inline-block;}
	.woordedit:hover {color : #000;}
	.woordlen {margin-top: 10px;}
	.intro {width: 320px; margin-bottom: 10px;}
	
	.nglist {border-collapse: collapse; font-family: Tahoma,Arial, sans-serif; font-size: 15px;}
	.ngzrow { width: 320px;background-color: rgb(153, 170, 206);}
	.ngtrow { width: 320px;background-color: rgb(153, 170, 206);}
	.ngarow{ display: none; width: 300px; padding-left: 20px; k;font-size: 13px;background-color: rgb(166, 193, 206);}	
	.ngacell { display: inline-block;width: 223px; }
	.ngbcell { display: inline-block;width: 75px; }
	.ngabcell { display: inline-block;width:318px;}
	
	.cngw {width: 320px;font-family: Tahoma,Arial, sans-serif; font-size: 15px;color : #000;font-weight: bold; }
	.cngd {width: 300px;font-family: Tahoma,Arial, sans-serif; font-size: 12px;color : #000;padding: 0px 0px 0px 20px; }
	.cngv {width: 320px;font-family: Tahoma,Arial, sans-serif; font-size: 12px;color : #000;padding: 0px 0px 0px 20px; }
	.cngaot {width: 320px;font-family: Tahoma,Arial, sans-serif; font-size: 12px;color : #000;padding: 0px 0px 0px 20px;font-weight: bold; }
	.cngl {width: 320px;font-family: Tahoma,Arial, sans-serif; font-size: 12px;color : #000;padding: 0px 0px 0px 20px; }
	.cngao {width: 320px;font-family: Tahoma,Arial, sans-serif; font-size: 12px;color : #000;padding: 0px 0px 0px 20px;}

	.usereditForm div {margin: 2px;}
	.usereditForm input[type=button]{width:300px; height:25px;}
	.usereditgeb {width: 30px}
	.usereditfield {width: 300px}
	
	.loginform input[type=text],input[type=password] {width:296px;margin: 3px 0px 3px 0px;}
	.loginform input[type=submit]{width:300px; height:25px;margin: 10px 0px 10px 0px;}
	
}