1
2/* IMPORTS ------------------------------------------------------------*/
3
4@import url('reset.css');
5
6@import url('styled-elements.css');
7
8/* HACKS ------------------------------------------------------------*/
9
10.clear{
11	clear:both;
12	height:1px;
13}
14
15.inv{ display:none; }
16
17.alignleft{
18	float: left;
19	margin: 5px 10px 5px 0px;
20}
21
22
23/* GENERAL ------------------------------------------------------------*/
24
25
26body {
27	line-height: 1;
28	color: #696969;
29	background: #f1f1f1 url(../img/bg/patterns/obl-1x1.png);
30	font-family: Arial, Helvetica, sans-serif;
31	font-size:  100%;
32}
33
34#wrapper{
35	width: 100%;
36	margin: 5px auto;
37	background: #363636;
38	min-height: 500px;
39	font-size: 14px;
40	line-height: 1.5em;
41	border-radius: 10px;
42	-moz-border-radius: 10px;
43	-webkit-border-radius: 10px;
44}
45
46#header{
47	height: 50px;
48	position: relative;
49	z-index: 10;
50}
51
52#main{
53	background: #ffffff;
54	position: relative;
55	border-radius: 10px;
56	-moz-border-radius: 10px;
57	-webkit-border-radius: 10px;
58}
59
60#content{
61	min-height: 200px;
62	overflow: hidden;
63	margin-bottom: 20px;
64}
65
66#content_inner{
67	padding: 0px 10px 0px 10px;
68}
69
70#footer{
71	position: relative;
72	color: #fff;
73}
74
75#logo{
76	position: absolute;
77	top: 10px;
78	left: 10px;
79}
80
81#content a{
82	color: #696969;
83}
84
85#content p{
86	margin-bottom: 20px;
87}
88
89#content .line-divider{
90	clear: both;
91	border-bottom: 1px solid #d7d7d7;
92	padding-bottom: 20px;
93	margin-bottom: 20px;
94}
95
96/* breadcrumbs --------------------------------------------------------*/
97
98#header #breadcrumbs{
99	display: none;
100	position: absolute;
101	bottom: 10px;
102	left: 10px;
103	font-style: italic;
104	color: #999;
105	font-size: 9px;
106}
107
108#header #breadcrumbs a{
109	color: #bfbdbd;
110	text-decoration: none;
111	background: url(../img/breadcrumb-slash.png) no-repeat top right;
112	padding-right: 14px;
113}
114
115/* TITLE --------------------------------------------------------*/
116
117#page-title{
118	overflow: hidden;
119	height: 40px;
120	margin-bottom: 15px;
121	background: #f2f1f1 url(../img/twitter-border.png) repeat-x bottom left;
122}
123
124#page-title .title{
125	display: block;
126	float: left;
127	font-family: 'Ubuntu', arial, serif;
128	font-size: 20px;
129	line-height: 30px;
130	margin-left: 10px;
131	margin-top: 5px;
132	margin-bottom: 5px;
133	text-shadow: 0 1px rgba(255, 255, 255, 1);
134}
135
136#page-title .subtitle{
137	display: block;
138	float: left;
139	margin-left: 20px;
140	line-height: 30px;
141	color: #929191;
142	font-style: italic;
143}
144
145/* HOME --------------------------------------------------------*/
146
147body.home #header{
148	height: 430px;
149	position: relative;
150	z-index: 10;
151}
152
153body.home #header #headline{
154	width: 906px;
155	margin: 110px  auto 40px auto;
156	font-size: 26px;
157	line-height: 1.5em;
158	font-family: 'Ubuntu', arial, serif;
159	color: #ebe7e7;
160	text-align: center;
161}
162
163body.home #content{
164	padding-top: 250px;
165}
166
167#headline a{
168	text-decoration: none;
169	color: #696969;
170}
171
172/* HEADERS --------------------------------------------------------*/
173
174h1,h2,h3,h4,h5,h6{
175	line-height: 1.4em;
176	font-family: 'Ubuntu', arial, serif;
177	font-weight: lighter;
178	margin-bottom: 5px;
179}
180
181h1{ font-size: 22px; }
182
183h2{ font-size: 20px; }
184
185h3{ font-size: 18px; }
186
187h4{ font-size: 18px; }
188
189h5{ font-size: 16px; }
190
191h6{ font-size: 16px; }
192
193h7{ font-size: 14px; margin-bottom: 2px; }
194
195/* COLUMNS LAYOUT----------------------------------------------------------*/
196
197.one-half,
198.one-third,
199.two-third,
200.three-fourth,
201.one-fourth {
202	float:left;
203	margin-right:30px;
204	position:relative;
205}
206
207.one-half{ width: 438px; }
208
209.one-third{ width: 282px; }
210
211.one-fourth{ width: 204px; }
212
213.two-third{ width: 594px; }
214
215.three-fourth{ width: 672px; }
216
217.last {
218	clear:right;
219	margin-right:0 !important;
220}
221
222
223/* SOCIAL --------------------------------------------------------*/
224
225#social-holder{
226	overflow: hidden;
227	width: 100%;
228	padding-top: 20px;
229}
230
231.social{
232	display: block;
233	float: right;
234	overflow: hidden;
235	margin-right: 20px;
236}
237
238.social li{
239	display: block;
240	width: 32px;
241	height: 32px;
242	float: left;
243	margin-right: 10px;
244	margin-bottom: 10px;
245}
246
247.social a{
248	display: block;
249	width: 32px;
250	height: 32px;
251	text-indent: -9000px;
252}
253
254
255/* SEARCH --------------------------------------------------------*/
256
257.top-search{
258	position: absolute;
259	top: 98px;
260	right: 50px;
261}
262
263#searchform #s{
264	color: #49494b;
265	font-size: 12px;
266	width: 160px;
267	height: 21px;
268	margin: 0px 0px 5px 0px;
269	padding: 2px 35px 2px 8px;
270	border: 0;
271	background: #f0efeb;
272	border-radius: 10px;
273	-moz-border-radius: 10px;
274	-webkit-border-radius: 10px;
275}
276
277#searchform #searchsubmit{
278	position: absolute;
279	top: 0px;
280	right: 0px;
281	width: 25px;
282	height: 25px;
283	border: 0px;
284	background: url(../img/search-submit.png) no-repeat  transparent -3px 2px;
285}
286
287/* NAVIGATION --------------------------------------------------------*/
288
289
290#nav{
291	display: none;
292	position: absolute;
293	top: 88px;
294	left: 30px;
295	height: 46px;
296	width: 906px;
297	background: #ffd800;
298	border-radius: 10px;
299	-moz-border-radius: 10px;
300	-webkit-border-radius: 10px;
301}
302
303#nav>li{
304	display: block;
305	float: left;
306	margin-left: 5px;
307	margin-top: 12px;
308}
309
310#nav>li:first-child{
311	margin-left: 10px;
312}
313
314#nav>li>a{
315	display: block;
316	font-size: 12px;
317	color: #363636;
318	text-decoration: none;
319	padding: 7px 10px 6px 10px;
320	border-radius: 10px;
321	-moz-border-radius: 10px;
322	-webkit-border-radius: 10px;
323	text-shadow: 0 1px rgba(255, 255, 255, 0.5);
324}
325
326#nav>li>a:hover,
327#nav>li.current-menu-item>a{
328	color: #fff;
329	background: #363636;
330	text-shadow: none;
331}
332
333/* sub navigation */
334
335#nav>li ul{
336	display: block;
337	margin-top: -1px;
338	background: #ffd800;
339	border-radius: 0px 0px 10px 10px;
340	-moz-border-radius: 0px 0px 10px 10px;
341	-webkit-border-radius: 0px 0px 10px 10px;
342}
343
344#nav>li>ul ul{
345	margin-top: 0px;
346	border-radius: 0px 10px 10px 10px;
347	-moz-border-radius: 0px 10px 10px 10px;
348	-webkit-border-radius: 0px 10px 10px 10px;
349}
350
351#nav>li ul li a{
352	display: block;
353	padding: 10px 15px;
354	display: block;
355	font-size: 12px;
356	color: #363636;
357	text-decoration: none;
358}
359
360#nav>li ul li a:hover{
361	background: #363636;
362	color: #fff;
363}
364
365#nav>li ul li:last-child a:hover{ /* last item its rounded at bottom */
366	border-radius: 0px 0px 10px 10px;
367	-moz-border-radius: 0px 0px 10px 10px;
368	-webkit-border-radius: 0px 0px 10px 10px;
369}
370
371/* FILTER --------------------------------------------------------*/
372
373#content .filter{
374	display: block;
375	overflow: hidden;
376	border-bottom: 1px solid #d7d7d7;
377	padding-bottom: 20px;
378	margin-bottom: 30px;
379	padding-left: 30px;
380	padding-right: 30px;
381}
382
383#content .filter li{
384	display: block;
385	float: left;
386	font-size: 12px;
387	line-height: 14px;
388	margin-right: 5px;
389	margin-bottom: 10px;
390	padding: 3px 10px;
391	background: #363636;
392	border-radius: 10px;
393	-moz-border-radius: 10px;
394	-webkit-border-radius: 10px;
395}
396
397#content .filter li:first-child{
398	background: none;
399}
400
401
402#content .filter li a{
403	display: block;
404	color: #f1f1f1;
405	text-decoration: none;
406	width: 100%;
407	height: 100%;
408}
409
410#content .filter li:hover{
411	background: #000;
412}
413
414#content .filter li:first-child:hover{
415	background: none;
416}
417
418#content .filter li.active{
419	background: #999;
420}
421
422
423
424/* TWITTER --------------------------------------------------------*/
425
426#twitter{
427	position: relative;
428	background: #f2f1f1;
429	height: 170px;
430	width: 100%;
431	background: #f2f1f1 url(../img/twitter-border.png) repeat-x;
432	border-radius: 0px 0px 10px 10px;
433	-moz-border-radius: 0px 0px 10px 10px;
434	-webkit-border-radius: 0px 0px 10px 10px;
435}
436
437#twitter #prev-tweet{
438	display: block;
439	position: absolute;
440	top: 66px;
441	left: 30px;
442	width: 30px;
443	height: 35px;
444	background: transparent url(../img/prev-arrow.png) no-repeat top left;
445}
446
447#twitter #next-tweet{
448	display: block;
449	position: absolute;
450	top: 66px;
451	right: 30px;
452	width: 30px;
453	height: 35px;
454	background: transparent url(../img/next-arrow.png) no-repeat top right;
455}
456
457#twitter #tweets .tweet_list{
458	display: block;
459	position: absolute;
460	top: 0px;
461	left: 80px;
462	width: 810px;
463	height: 170px;
464}
465
466#twitter #tweets .tweet_list li{
467	display: block;
468	width: 810px;
469	height: 120px; /* original height 170px */
470	font-size: 20px;
471	line-height: 1.5em;
472	font-style: italic;
473	color: #838383;
474	text-align: center;
475	padding-top: 62px;
476}
477
478#twitter #tweets .tweet_list li .tweet_time a{
479	text-decoration: none;
480	color: #ccc;
481}
482
483#twitter #tweets .tweet_list li a{
484	text-decoration: none;
485	color: #37b2d1;
486}
487
488#twitter #tweets p.loading{
489	text-align: center;
490	color: #ccc;
491	padding-top: 75px;
492	font-style: italic;
493}
494
495/* PAGES --------------------------------------------------------*/
496
497#page-content{
498	float: left;
499	width: 906px;
500	margin-left: 30px;
501}
502
503/* PORTFOLIO --------------------------------------------------------*/
504
505#projects-list{
506	overflow: hidden;
507}
508
509#projects-list .project{
510	position: relative;
511	float: left;
512	overflow: hidden;
513	width: 438px;
514	height: 495px;
515	margin-left: 30px;
516	margin-bottom: 30px;
517}
518
519#projects-list .project h1 a{
520	display: block;
521	text-decoration: none;
522	margin-bottom: 30px;
523	color: #696969;
524}
525
526.project-shadow{
527	background: url(../img/shadow-project.png) no-repeat 0px 267px;
528}
529
530#projects-list .project .project-thumbnail{
531	position: relative;
532	overflow: hidden;
533	width: 438px;
534	height: 267px;
535	margin-bottom: 30px;
536	background: #f1f1f1;
537	border-radius: 10px;
538	-moz-border-radius: 10px;
539	-webkit-border-radius: 10px;
540}
541
542#projects-list .project .project-thumbnail .cover{
543	position: absolute;
544	top:0px;
545	left: 0px;
546}
547
548#projects-list .project .project-thumbnail .meta{
549	display: block;
550	width: 252px;
551	height: 207px;
552	font-size: 12px;
553	line-height: 2em;
554	position: absolute;
555	top:30px;
556	left: 30px;
557}
558
559#projects-list .project .read-more{
560	display: block;
561	position: absolute;
562	top: 325px;
563	left: 160px;
564	background: #363636;
565	line-height: 33px;
566	text-decoration: none;
567	color: #fff;
568	padding: 0px 30px 0px 30px;
569	opacity: 0;
570
571	border-radius: 10px;
572	-moz-border-radius: 10px;
573	-webkit-border-radius: 10px;
574
575	-webkit-box-shadow: 0px 2px 3px #000;
576	-moz-box-shadow: 0px 2px 3px #000;
577	box-shadow: 0px 2px 3px #000;
578}
579
580#projects-list .project .read-more:hover{
581	color: #fff;
582	background: #000;
583}
584
585#projects-list .project:hover .read-more{
586	opacity: 1;
587}
588
589
590/* PROJECT --------------------------------------------------------*/
591
592.project-column{
593	width: 438px;
594	float: left;
595	margin-left: 30px;
596}
597
598.project-column .project-thumbnail{
599	overflow: hidden;
600	width: 438px;
601	height: 267px;
602	margin-bottom: 30px;
603	border-radius: 10px;
604	-moz-border-radius: 10px;
605	-webkit-border-radius: 10px;
606}
607
608
609#content .project-column .meta a{
610	display: inline;
611	font-size: 12px;
612	color: #fff;
613	padding: 3px 10px;
614	text-decoration: none;
615	background: #363636;
616	border-radius: 10px;
617	-moz-border-radius: 10px;
618	-webkit-border-radius: 10px;
619}
620
621#content .project-column .meta a:hover{ background: #000;}
622
623.project-column .project-title{
624	margin-bottom: 20px;
625}
626
627/* PROJECT-GALLERY -----------------------------------------------*/
628
629.project-column .project-gallery{
630	display: block;
631	overflow: hidden;
632	width: 468px;
633}
634
635.project-column .project-gallery li{
636	display: block;
637	float: left;
638	overflow: hidden;
639	background: url(../img/plus-sign.png) center center no-repeat;
640	width: 204px;
641	height: 148px;
642	margin-right: 30px;
643	margin-top: 30px;
644	border-radius: 10px;
645	-moz-border-radius: 10px;
646	-webkit-border-radius: 10px;
647}
648
649/* PROJECT-RELATED -----------------------------------------------*/
650
651.related-title{
652	margin-left: 30px;
653}
654
655.related-projects{
656	display: block;
657	overflow: hidden;
658}
659
660.related-projects li{
661	display: block;
662	float: left;
663	overflow: hidden;
664	width: 204px;
665	height: 280px;
666	margin-left: 30px;
667	margin-top: 30px;
668}
669
670.related-projects li strong{
671	display: block;
672}
673
674.related-projects li a.box{
675	display: block;
676	overflow: hidden;
677	width: 204px;
678	height: 148px;
679	margin-bottom: 30px;
680	border-radius: 10px;
681	-moz-border-radius: 10px;
682	-webkit-border-radius: 10px;
683}
684
685.related-projects li a.box img{
686	opacity: 0.7;
687}
688
689.related-projects li:hover a.box img{
690	opacity: 1;
691}
692
693#content .related-projects li a{
694	text-decoration: none;
695	color: #999;
696}
697
698/* GALLERY -----------------------------------------------*/
699
700#content .gallery{
701	display: block;
702	overflow: hidden;
703}
704
705#content .gallery li{
706	display: block;
707	float: left;
708	overflow: hidden;
709	background: url(../img/plus-sign.png) center center no-repeat;
710	width: 204px;
711	height: 148px;
712	margin-left: 30px;
713	margin-bottom: 30px;
714	border-radius: 10px;
715	-moz-border-radius: 10px;
716	-webkit-border-radius: 10px;
717}
718
719#content .gallery.three-cols li{
720	width: 282px;
721	height: 267px;
722}
723
724#content .gallery.two-cols li{
725	width: 438px;
726	height: 267px;
727}
728
729#content .gallery li a{
730	display: block;
731}
732
733
734/* BLOG --------------------------------------------------------*/
735
736#posts{
737	float: left;
738	width: 97%;
739}
740
741#posts .post{
742	position: relative;
743	margin-left: 10px;
744	margin-bottom: 30px;
745}
746
747#comments-block{
748	position: relative;
749	margin-left: 10px;
750	margin-top: 10px;
751	margin-bottom: 10px;
752	padding-top: 10px;
753}
754
755#posts.single .post{
756	border-bottom: none;
757}
758
759#posts .post:last-child{
760	border-bottom: none;
761}
762
763#posts h1 a{
764	display: block;
765	margin-bottom: 30px;
766	width: 100%;
767	text-decoration: none;
768	color: #696969;
769}
770
771#posts .n-comments{
772	display: block;
773	position: absolute;
774	top:0;
775	right:0px;
776	width: 57px;
777	height: 41px;
778	color: #fff;
779	text-align: center;
780	line-height: 32px;
781	background: url(../img/balloon.png) no-repeat;
782}
783
784
785#posts.single .post .n-comments{
786	position: static;
787}
788
789.post .thumb-shadow{
790	background: url(../img/shadow-blog.png) no-repeat 0px 270px;
791}
792
793#posts .post .post-thumbnail{
794	position: relative;
795	overflow: hidden;
796	width: 596px;
797	height: 270px;
798	margin-bottom: 30px;
799	background: #f1f1f1;
800	border-radius: 10px;
801	-moz-border-radius: 10px;
802	-webkit-border-radius: 10px;
803}
804
805
806#posts .post .post-thumbnail .cover{
807	position: absolute;
808	top:0px;
809	left: 0px;
810}
811
812#posts .post .the-excerpt{
813	padding-bottom: 30px;
814	background: url(../img/post-divider.png) center bottom no-repeat;
815}
816
817#posts .post .post-thumbnail .meta{
818	display: block;
819	width: 252px;
820	height: 207px;
821	font-size: 12px;
822	line-height: 2em;
823	position: absolute;
824	top:30px;
825	left: 30px;
826}
827
828#posts.single .post .meta{
829	display: block;
830	background: #f1f1f1;
831	padding: 20px;
832	border-color: #e7e6e6 #ececec #ececec #ececec;
833	border-width: 3px 1px 1px 1px;
834	border-style: solid;
835
836	border-radius: 10px;
837	-moz-border-radius: 10px;
838	-webkit-border-radius: 10px;
839}
840
841#posts .post .read-more{
842	display: block;
843	position: absolute;
844	top: 325px;
845	left: 257px;
846	background: #363636 ;
847	line-height: 33px;
848	padding: 0px 14px 0px 14px;
849	text-decoration: none;
850	color: #f1f1f1;
851	opacity: 0;
852	border-radius: 10px;
853	-moz-border-radius: 10px;
854	-webkit-border-radius: 10px;
855
856	-webkit-box-shadow: 0px 2px 3px #000;
857	-moz-box-shadow: 0px 2px 3px #000;
858	box-shadow: 0px 2px 3px #000;
859}
860
861#posts .post .read-more:hover{
862	background: #000;
863}
864
865#posts .post:hover .read-more{
866	opacity: 1;
867}
868
869#posts .post .meta a{
870	text-decoration: none;
871}
872
873#posts .post .meta-tags{
874	overflow: hidden;
875}
876
877#posts .post .meta-tags a{
878	float: left;
879	font-size: 12px;
880	line-height: 14px;
881	color: #f1f1f1;
882	background: #696969;
883	padding: 3px 10px;
884	margin-right: 5px;
885	margin-bottom: 5px;
886	border-radius: 10px;
887	-moz-border-radius: 10px;
888	-webkit-border-radius: 10px;
889}
890
891#posts .post .meta-tags a:hover{
892	background: #000;
893}
894
895/* COMMENTS-BLOCK ------------------------------------------------------------*/
896
897
898
899#comments-block .n-comments{
900	left:0px;
901}
902
903#comments-block .n-comments{
904	left:0px;
905}
906
907#comments-block .n-comments-text{
908	display: block;
909	position: absolute;
910	top: 4px;
911	left:68px;
912	font-family: 'Ubuntu', arial, serif;
913	font-size: 28px;
914}
915
916/* COMMENTSLIST ------------------------------------------------------------*/
917
918.commentlist{
919	display: block;
920}
921
922.commentlist li{
923	display: block;
924	margin-bottom: 0px;
925	padding: 10px 10px 10px 0px;
926	line-height: 1.5em;
927}
928
929.commentlist ul{
930	padding-left: 40px;
931	border-left: 1px dashed #ccc;
932}
933
934.commentlist li .comment-body{
935	overflow: hidden;
936	position: relative;
937	padding: 0px 0px 20px 0px;
938}
939
940
941.commentlist li img{
942	display: block;
943	float: left;
944	margin: 0px 12px 20px 0px;
945}
946
947.commentlist .meta-date{
948	display: block;
949	float: right;
950}
951
952#content .commentlist .reply a{
953	display: block;
954	text-decoration: none;
955	float: right;
956	padding: 2px 8px;
957	background: #ccc;
958	color: #f1f1f1;
959	font-size: 12px;
960	border-radius: 5px;
961	-moz-border-radius: 5px;
962	-webkit-border-radius: 5px;
963}
964
965/* COMMENTS PAGINATION ------------------------------------------------------------*/
966
967#content .comments-pagination {
968	clear:both;
969	overflow: hidden;
970	padding:20px 0;
971	position:relative;
972	font-size:11px;
973	line-height:13px;
974	margin-bottom: 10px;
975}
976
977#content .comments-pagination span,
978#content .comments-pagination a {
979	display:block;
980	float:left;
981	margin: 2px 4px 2px 0;
982	padding:6px 9px 5px 9px;
983	text-decoration:none;
984	width:auto;
985	color:#fff;
986	background: #555;
987	border-radius: 10px;
988	-moz-border-radius: 10px;
989	-webkit-border-radius: 10px;
990}
991
992#content .comments-pagination a:hover{
993	color:#fff;
994	background: #000000;
995}
996
997#content .comments-pagination .current{
998	padding:6px 9px 5px 9px;
999	background: #000000;
1000	color:#fff;
1001}
1002
1003/* LEAVE COMMENT --------------------------------------------------------*/
1004
1005.leave-comment{
1006	margin-top: 20px;
1007	padding-top:30px;
1008	background: url(../img/post-divider-inverted.png) no-repeat;
1009}
1010
1011.leave-comment h2{
1012	margin-bottom: 20px;
1013}
1014
1015/* CONTACT --------------------------------------------------------*/
1016
1017.one-column{
1018	width: 438px;
1019	float: left;
1020	margin-left: 30px;
1021}
1022
1023/* FORMS ------------------------------------------------------------*/
1024
1025#BrowseForm input, #BrowseForm select, #BrowseForm textarea,
1026#LoginForm1 input, #LoginForm1 select, #LoginForm1 textarea,
1027#LoginForm2 input, #LoginForm2 select, #LoginForm2 textarea,
1028#LoginForm3 input, #LoginForm3 select, #LoginForm3 textarea{
1029	background: #fff;
1030	border: 1px solid #ccc;
1031	border-radius: 5px;
1032	-moz-border-radius: 5px;
1033	-webkit-border-radius: 5px;
1034	color: #606060;
1035	font-size: 14px;
1036	padding: 2px;
1037	margin-bottom: 5px;
1038}
1039
1040#LoginForm1 input[type=text], #LoginForm1 input[type=password], #LoginForm1 select,
1041#LoginForm2 input[type=text], #LoginForm2 input[type=password], #LoginForm2 select{
1042	width: 220px;
1043}
1044
1045#LoginForm3 input[type=text], #LoginForm3 input[type=password], #LoginForm3 select{
1046	width: 120px;
1047}
1048
1049#LoginForm1 h7a,
1050#LoginForm2 h7a,
1051#LoginForm3 h7a{
1052	font-size: 14px;
1053	position: absolute;
1054	left: 110px;
1055}
1056
1057#LoginForm1 h7b,
1058#LoginForm2 h7b,
1059#LoginForm3 h7b{
1060	font-size: 14px;
1061	position: absolute;
1062	left: 240px;
1063}
1064
1065#LoginForm1 textarea,
1066#LoginForm2 textarea,
1067#LoginForm3 textarea{
1068	width: 90%;
1069}
1070
1071#LoginForm1 #LoginButton1,
1072#LoginForm2 #LoginButton2,
1073#LoginForm3 #LoginButton3,
1074#LoginForm2 #smallbutton,
1075#LoginForm3 #smallbutton,
1076#BrowseForm #smallbutton{
1077	background: #ffd800;
1078	color: #363636;
1079}
1080
1081#LoginForm2 #smallbutton,
1082#LoginForm3 #smallbutton,
1083#BrowseForm #smallbutton{
1084	padding: 1px 3px;
1085}
1086
1087#LoginForm1 #LoginButton1,
1088#LoginForm2 #LoginButton2,
1089#LoginForm3 #LoginButton3{
1090	margin-left: 10%;
1091	margin-right: 10%;
1092	margin-top: 20px;
1093	margin-bottom: 20px;
1094	padding: 10px 15px;
1095	width: 80%;
1096}
1097
1098#LoginForm1 #LoginButton1:hover,
1099#LoginForm2 #LoginButton2:hover,
1100#LoginForm3 #LoginButton3:hover,
1101#LoginForm2 #smallbutton:hover,
1102#LoginForm3 #smallbutton:hover,
1103#BrowseForm #smallbutton:hover{
1104	background: #363636;
1105	color: #FFF;
1106}
1107
1108#LoginForm1 #LoginButton1:active,
1109#LoginForm2 #LoginButton2:active,
1110#LoginForm3 #LoginButton3:active,
1111#LoginForm2 #smallbutton:active,
1112#LoginForm3 #smallbutton:active,
1113#BrowseForm #smallbutton:active{
1114	background: #000;
1115	color: #FFF;
1116}
1117
1118#LoginForm1 h7,
1119#LoginForm2 h7{
1120	display: block;
1121}
1122
1123#LogoutButton{
1124	background: #ffd800;
1125	color: #363636;
1126	margin: 2px 2px;
1127	padding: 5px 15px;
1128	width: 100px;
1129}
1130
1131table, tr, td{
1132	padding: 5px;
1133	border: 0;
1134	outline: 0;
1135	font-size: 100%;
1136	vertical-align: baseline;
1137	background: transparent;
1138	overflow: hidden;
1139}
1140
1141/* PAGER ------------------------------------------------------------*/
1142
1143.pager{
1144	padding-top: 0px;
1145	overflow: hidden;
1146	display: block;
1147	height: 33px;
1148	margin-top: 20px;
1149	margin-left: 30px;
1150	margin-bottom: 20px;
1151}
1152
1153.pager li{
1154	display: block;
1155	width: 33px;
1156	height: 33px;
1157	margin-right: 8px;
1158	float: left;
1159}
1160
1161#content .pager li a{
1162	display: block;
1163	width: 100%;
1164	height: 100%;
1165	line-height: 33px;
1166	text-align: center;
1167	text-decoration: none;
1168	color: #ffd800;
1169	background: #363636;
1170	border-radius: 15px;
1171	-moz-border-radius: 15px;
1172	-webkit-border-radius: 15px;
1173}
1174
1175#content .pager li:hover a,
1176#content .pager li.active a{
1177	color: #363636;
1178	background: #ffd800;
1179}
1180
1181/* SIDEBAR ------------------------------------------------------------*/
1182
1183#sidebar{
1184	float: left;
1185	width: 282px;
1186	margin-left: 30px;
1187}
1188
1189#sidebar>li{
1190	margin-bottom: 20px;
1191}
1192
1193#sidebar>li h6{
1194	padding-bottom: 20px;
1195}
1196
1197#sidebar ul>li{
1198	line-height: 40px;
1199	text-decoration: none;
1200	border-bottom: 1px solid #d7d7d7;
1201}
1202
1203#sidebar ul>li:last-child{ border-bottom: none; }
1204
1205#sidebar ul>li a{
1206	display: block;
1207	height: 100%;
1208	width: 100%;
1209	text-decoration: none;
1210	color: #696969;
1211}
1212
1213#sidebar ul>li:hover{
1214	background: #f1f1f1;
1215}
1216
1217/* FOOTER - COLS ------------------------------------------------------------*/
1218
1219#footer-cols{
1220	display: block;
1221	overflow: hidden;
1222	color: #bbbaba;
1223	line-height: 1.5em;
1224	margin-top: 40px;
1225}
1226
1227#footer-cols li.col{
1228	display: block;
1229	width: 282px;
1230	float: left;
1231	margin-left: 30px;
1232	margin-bottom: 30px;
1233}
1234
1235#footer-cols li.col>h6{
1236	color: #d7d7d7;
1237	margin-bottom: 30px;
1238	text-shadow: -2px -1px rgba(0, 0, 0, .8);
1239}
1240
1241#footer-cols li.clear-col{ clear:left; }
1242
1243#footer-cols li.col ul{
1244	display: block;
1245}
1246
1247#footer-cols li.col ul li{
1248	display: block;
1249	line-height: 35px;
1250	border-top: 1px solid #4a4a4a;
1251	border-bottom: 1px solid #000;
1252}
1253
1254#footer-cols li.col ul li:first-child{ border-top: none; }
1255
1256#footer-cols li.col ul li:last-child{ border-bottom: none; }
1257
1258#footer-cols li.col ul li a{
1259	text-decoration: none;
1260	color: #bbbaba;
1261}
1262
1263#footer-cols li.col ul li a:hover{
1264	color: #fff;
1265}
1266
1267/* FOOTER BOTTOM --------------------------------------------------------*/
1268
1269#footer #bottom{
1270	position: relative;
1271	width: 100%;
1272	font-size: 12px;
1273	line-height: 1.5em;
1274	line-height: 80px;
1275	text-align: center;
1276	color: #868686;
1277	background: url(../img/bottom-shadow.png) repeat-x;
1278}
1279
1280#footer #bottom a{
1281	color: #ffd800;
1282	text-decoration: none;
1283}
1284
1285#footer #bottom #to-top{
1286	position: absolute;
1287	right: 30px;
1288	top: 26px;
1289	width: 33px;
1290	height: 33px;
1291	background: url(../img/to-top.png) no-repeat;
1292	cursor: pointer;
1293}
1294
1295/* NET2FTP CONSENT --------------------------------------------------------*/
1296
1297#consent {
1298	border: 1px solid black;
1299	background-color: #DDDDDD;
1300	width: 90%;
1301	margin-left: auto;
1302	margin-right: auto;
1303	margin-top: 20px;
1304	padding: 10px;
1305}
1306
1307/* NET2FTP HEADER --------------------------------------------------------*/
1308
1309.actionIcon{
1310	border: 0px;
1311	margin: 1px;
1312	width:  24px;
1313	height: 24px;
1314	vertical-align: middle;
1315}
1316
1317.actionIconOver{
1318	margin: 0px;
1319	width:  26px;
1320	height: 26px;
1321	vertical-align: middle;
1322}
1323
1324.actionIconOut{
1325	margin: 1px;
1326	width:  24px;
1327	height: 24px;
1328	vertical-align: middle;
1329}
1330
1331/* NET2FTP BROWSE --------------------------------------------------------*/
1332
1333.browse_rows_actions {
1334	background-color: #f2f1f1;
1335	color: #696969;
1336	font-size: 80%;
1337	font-weight: normal;
1338	text-align: left;
1339}
1340
1341.browse_rows_heading {
1342	background-color: #f2f1f1;
1343	color: #696969;
1344	font-size: 100%;
1345	font-weight: bold;
1346}
1347
1348.browse_rows_odd, .browse_rows_even {
1349	color: #696969;
1350	font-size: 100%;
1351	font-weight: normal;
1352	text-align: left;
1353}
1354
1355.browse_col_select     {width: 20px;}
1356.browse_col_mime       {display: none;}
1357.browse_col_dirfilename{width: 100px;}
1358.browse_col_type       {display: none;}
1359.browse_col_size       {width: 50px;}
1360.browse_col_owner      {display: none;}
1361.browse_col_group      {display: none;}
1362.browse_col_permissions{display: none;}
1363.browse_col_mtime      {display: none;}
1364.browse_col_actions    {width: 30px;}
1365
1366#BrowseForm{
1367	margin-bottom: 15px;
1368}
1369