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