This is an example of raditex-standard.css.
If you want to use this in our own application you have to rework it a lot. Some
names need changes and you probably want to change the colorschema.
A stylesheet sets a lot of metrix for the widgets. This is tricky. It is sometimes
H - style for basewidget in html #id - style for a widget given an id .class - style for a widget given a class .class:hover - style for a widget when cursor hover above ... .class-a + .class-b - adjecent .class > .class - sibling
More about selectors are to read about on W3C:s pages.
To check the css-file you can download and run the csslint program.
https://github.com/CSSLint/csslint Usage: csslint-rhino.js [options]* [file|dir]* Global Options --help Displays this information. --format=<format> Indicate which format to use for output. --list-rules Outputs all of the rules available. --quiet Only output when errors are present. --errors=<rule[,rule]+> Indicate which rules to include as errors. --warnings=<rule[,rule]+> Indicate which rules to include as warnings. --ignore=<rule[,rule]+> Indicate which rules to ignore completely. --exclude-list=<file|dir[,file|dir]+> Indicate which files/directories to exclude from being linted. --version Outputs the current version number.
source-highlight -n --input=raditex-standard.css --output=src/raditex-standard.css.html
0001: /***********************************************************************
0002: *
0003: * Copyringt, Raditex Control AB, 2016, Göran Hasse
0004: * raditex-tutorial.css
0005: *
0006: ***********************************************************************/
0007:
0008: path {
0009: stroke: blue;
0010: stroke-width: 2px;
0011: fill: none;
0012: }
0013:
0014: .axis path,
0015: .axis line
0016: {
0017: fill: none;
0018: stroke: black;
0019: stroke-width: 1px;
0020: }
0021:
0022: .grid .tick
0023: {
0024: stroke: black;
0025: opacity: 1;
0026: }
0027:
0028: .grid path
0029: {
0030: stroke-width: 0;
0031: }
0032:
0033: .axis text
0034: {
0035: stroke: none;
0036: font-family:courier;
0037: font-size: 10px;
0038: shape-rendering: crispEdges;
0039: }
0040:
0041: .axis path,
0042: .axis line
0043: {
0044: fill: none;
0045: stroke: #000;
0046: shape-rendering: crispEdges;
0047: }
0048:
0049: .area
0050: {
0051: fill: red;
0052: stroke: black;
0053: stroke-width: 2px;
0054: stroke-opacity: 1;
0055: opacity: 1;
0056: }
0057:
0058: .x .axis path
0059: {
0060: stroke: black;
0061: /* display: none; */
0062: }
0063:
0064: .line
0065: {
0066: fill: none;
0067: stroke: steelblue;
0068: stroke-width: 1.5px;
0069: }
0070:
0071:
0072: /**********************************************************************
0073: *
0074: ***********************************************************************/
0075: .rbis-message-warning
0076: {
0077:
0078: display: block;
0079: z-index: 100;
0080: position: fixed;
0081: height: 200px;
0082: bottom: 200px;
0083: margin-left: 200px;
0084: /* clear: both; */
0085: /* background: #dddddd; */
0086: text-align: center;
0087: padding: 5px;
0088: width: calc(100% - 400px);
0089:
0090: /* margin-top: 60px; */
0091: /* margin-bottom: 60px; */
0092:
0093: font-size: 14px;
0094: font-family: Sans;
0095:
0096: border: 8px solid #FF0033;
0097:
0098: background-color: #A9C1D9;
0099:
0100: border-top-left-radius: 15px;
0101: border-top-right-radius: 15px;
0102: border-bottom-left-radius: 15px;
0103: border-bottom-right-radius: 15px;
0104: /*
0105: -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
0106: transition: width 2s, height 2s, background-color 2s, transform 2s;
0107: */
0108:
0109: }
0110:
0111: .rbis-message-warning:hover-old
0112: {
0113:
0114: display: block;
0115: z-index: 100;
0116: position: fixed;
0117: height: 100px;
0118: bottom: 200px;
0119: margin-left: 200px;
0120: /* clear: both; */
0121: /* background: #dddddd; */
0122: text-align: center;
0123: padding: 5px;
0124: width: calc(100% - 400px);
0125:
0126: background-color: #FFCCCC;
0127:
0128: /*
0129: -webkit-transform: rotate(180deg);
0130: transform: rotate(180deg);
0131: */
0132:
0133: }
0134:
0135: .rbis-message-info
0136: {
0137:
0138: z-index: 0;
0139: position: fixed;
0140: height: 200px;
0141: bottom: 200px;
0142: margin-left: 200px;
0143: /* clear: both; */
0144: /* background: #dddddd; */
0145: text-align: center;
0146: padding: 5px;
0147: width: calc(100% - 400px);
0148:
0149: /* margin-top: 60px; */
0150: /* margin-bottom: 60px; */
0151:
0152: font-size: 14px;
0153: font-family: Sans;
0154:
0155: border: 8px solid #66CC00;
0156:
0157: background-color: #A9C1D9;
0158:
0159: border-top-left-radius: 15px;
0160: border-top-right-radius: 15px;
0161: border-bottom-left-radius: 15px;
0162: border-bottom-right-radius: 15px;
0163:
0164:
0165:
0166: }
0167:
0168:
0169: /**********************************************************************
0170: *
0171: ***********************************************************************/
0172: H1
0173: {
0174: color: blue;
0175: font-family: arial;
0176: font-size: 32pt;
0177: font-style: normal;
0178: padding-top: 0;
0179: padding-bottom: 0;
0180: margin-top: 5px;
0181: margin-bottom: 2px;
0182: }
0183:
0184: /**********************************************************************
0185: *
0186: ***********************************************************************/
0187: H2
0188: {
0189: color: blue;
0190: font-family: arial;
0191: font-size: 16pt;
0192: font-style: normal;
0193: margin-top: 0;
0194: margin-bottom: 0;
0195: padding-top: 5px;
0196: padding-bottom: 2px;
0197:
0198: }
0199:
0200: /**********************************************************************
0201: *
0202: ***********************************************************************/
0203: H3
0204: {
0205: color: blue;
0206: font-family: arial;
0207: font-size: 14pt;
0208: font-style: normal;
0209: margin-top: 0;
0210: margin-bottom: 0;
0211:
0212: padding-top: 1px;
0213: padding-bottom: 1px;
0214:
0215: }
0216:
0217: /**********************************************************************
0218: *
0219: ***********************************************************************/
0220: p
0221: {
0222: color:black;
0223: font-size:14pt;
0224: line-height: 20px;
0225: font-family: arial;
0226: font-style:normal;
0227: margin-top: 10px;
0228: margin-bottom: 10px;
0229: /* display: inline; */
0230: }
0231:
0232: br
0233: {
0234: margin-bottom: 15px;
0235: }
0236: .paragraph_space
0237: {
0238: margin-bottom: 15px;
0239: }
0240:
0241: /**********************************************************************
0242: *
0243: ***********************************************************************/
0244: body
0245: {
0246:
0247:
0248: margin-left: 30px;
0249: margin-right: 30px;
0250: margin-bottom: 60px;
0251: margin-top: 0px;
0252: /* border-left: 4px solid #FF0000; */
0253:
0254: }
0255:
0256: /**********************************************************************
0257: *
0258: ***********************************************************************/
0259: .page_row
0260: {
0261:
0262: /*
0263:
0264: border-top: 2px solid #000000;
0265:
0266: margin-left: 0px;
0267: margin-right: 0px;
0268: */
0269:
0270:
0271: margin-bottom: 60px;
0272: margin-top: 105px;
0273:
0274:
0275: }
0276:
0277:
0278: .page_row_no_top_menu
0279: {
0280:
0281: background-color: #00FF00;
0282:
0283: /* border-top: 2px solid #00FF00; */
0284:
0285: /*
0286: border-left: 4px solid #4488FF;
0287: */
0288: /*
0289: margin-left: 0px;
0290: margin-right: 0px;
0291: */
0292: margin-bottom: 60px;
0293: margin-top: 75px;
0294:
0295: }
0296:
0297: .page_row_no_menu
0298: {
0299:
0300: background-color: #00FF00;
0301:
0302: /*
0303: border-top: 2px solid #000000;
0304:
0305: border-left: 4px solid #4488FF;
0306: */
0307:
0308: /*
0309: margin-left: 0px;
0310: margin-right: 0px;
0311: */
0312:
0313: margin-bottom: 60px;
0314: margin-top: 0px;
0315:
0316: }
0317:
0318:
0319:
0320: /**********************************************************************
0321: *
0322: ***********************************************************************/
0323: .page_column_left
0324: {
0325:
0326: float: left;
0327: width: 70%;
0328: margin-bottom: 40px;
0329: padding-right: 1%;
0330: /* margin-bottom: 60px; */
0331: }
0332:
0333: /**********************************************************************
0334: *
0335: ***********************************************************************/
0336: .page_column_right
0337: {
0338:
0339: float: left;
0340: width: 20%;
0341: /* margin-bottom: 40px; */
0342: padding-left: 15px;
0343: border-left: 4px solid #707070;
0344:
0345: }
0346:
0347:
0348: .video_frame
0349: {
0350:
0351:
0352: }
0353:
0354: .video
0355: {
0356:
0357: border-top-left-radius: 15px;
0358: border-top-right-radius: 15px;
0359: border-bottom-left-radius: 15px;
0360: border-bottom-right-radius: 15px;
0361:
0362:
0363: }
0364:
0365: .video_caption
0366: {
0367:
0368: width: 80%;
0369: padding-left: 8px;
0370: padding-top: 10px;
0371: padding-bottom: 10px;
0372: margin-top: 10px;
0373: margin-bottom: 20px;
0374:
0375: background-color: #BCBCBC;
0376:
0377: }
0378:
0379: .image_frame
0380: {
0381:
0382: position: relative;
0383: right: 0;
0384: margin-left: auto ;
0385: margin-right: auto ;
0386:
0387: }
0388:
0389: .image_caption
0390: {
0391:
0392: width: 80%;
0393: /* width: 598px; */
0394: /*
0395: border-left: 2px solid #161411;
0396: border-right: 2px solid #161411;
0397: */
0398:
0399: padding-left: 8px;
0400: padding-top: 10px;
0401: padding-bottom: 10px;
0402: margin-top: 10px;
0403: margin-bottom: 20px;
0404:
0405: background-color: #BCBCBC;
0406:
0407: }
0408:
0409: .image
0410: {
0411:
0412: width: 80%;
0413: /*
0414: border-left: 2px solid #161411;
0415: border-right: 2px solid #161411;
0416: border-bottom: 2px solid #161411;
0417: border-top: 2px solid #161411;
0418: */
0419:
0420: }
0421:
0422: .image:hover
0423: {
0424:
0425: /*
0426: border-left: 2px solid #161411;
0427: border-right: 2px solid #161411;
0428: border-bottom: 2px solid #161411;
0429: border-top: 2px solid #161411;
0430: */
0431:
0432: }
0433:
0434: /**********************************************************************/
0435: .preformatted_code
0436: {
0437:
0438: font-size:10pt;
0439: line-height: 14px;
0440: font-family:courier;
0441: font-style:normal;
0442: width: 80%;
0443: background-color: #ACACAC;
0444:
0445: }
0446:
0447: .typewriter
0448: {
0449: font-size: 14pt;
0450: font-family: courier;
0451: display: inline;
0452: background-color: #99CC33;
0453: padding-left: 4px;
0454: padding-right: 4px;
0455:
0456: border-top-left-radius: 5px;
0457: border-top-right-radius: 5px;
0458: border-bottom-left-radius: 5px;
0459: border-bottom-right-radius: 5px;
0460:
0461:
0462: }
0463:
0464: /**********************************************************************/
0465: .unordered_list
0466: {
0467:
0468: font-size: 14pt;
0469: font-family: courier;
0470: font-style: normal;
0471: width: 70%;
0472: background-color: #b0e0e6;
0473:
0474: }
0475:
0476:
0477: /**********************************************************************
0478: *
0479: ***********************************************************************/
0480: .code
0481: {
0482: color:black;
0483: background: #CCCCCC;
0484: font-size:10pt;
0485: font-family:courier;
0486: font-style:normal;
0487: }
0488:
0489: /**********************************************************************
0490: *
0491: ***********************************************************************/
0492: .download
0493: {
0494: color: black;
0495: background: #99FFFF;
0496: font-size: 14pt;
0497: font-family: courier;
0498: font-style: normal;
0499: }
0500:
0501: /**********************************************************************
0502: *
0503: ***********************************************************************/
0504: .footer-left
0505: {
0506:
0507: display: inline;
0508: float:left;
0509:
0510: }
0511:
0512: /**********************************************************************
0513: *
0514: ***********************************************************************/
0515: .footer-right
0516: {
0517: display:inline;
0518: float: right;
0519: }
0520:
0521: /***********************************************************************
0522: *
0523: ***********************************************************************/
0524: .top_banner_print
0525: {
0526: display: none;
0527: }
0528:
0529: /**********************************************************************
0530: *
0531: ***********************************************************************/
0532: .top_banner
0533: {
0534:
0535: z-index: 100;
0536: /* background-color: #A9C1D9; */
0537: background-color: #ADD8E6;
0538: height: 35px;
0539: padding-top: 0;
0540: padding-bottom: 0;
0541: /* display: inline; */
0542: float: left;
0543: position: fixed;
0544: top: 0;
0545: width: calc(100% - 60px);
0546: /* border-bottom: 1px solid #161411; */
0547:
0548: /*
0549:
0550: border-top: 1px solid #161411;
0551: background-image: url('http://www.raditex.nu/images/raditex-banner.png');
0552: */
0553:
0554:
0555: }
0556:
0557: .top_banner_info
0558: {
0559: z-index: 500;
0560: height: 25px;
0561: line-height: 25px;
0562: float: right;
0563: font-family: arial;
0564: position: relative;
0565: vertical-align: middle;
0566: background-color: #CCCCFF;
0567: margin-right: 40px;
0568: margin-top: 5px;
0569: margin-bottom: 5px;
0570: padding-left: 10px;
0571: padding-right: 10px;
0572: border-bottom: 1px solid #4488FF;
0573: border-top: 1px solid #4488FF;
0574: border-left: 1px solid #4488FF;
0575: border-right: 1px solid #4488FF;
0576:
0577: border-top-left-radius: 10px;
0578: border-top-right-radius: 10px;
0579: border-bottom-left-radius: 10px;
0580: border-bottom-right-radius: 10px;
0581:
0582:
0583:
0584: }
0585:
0586: /**********************************************************************
0587: *
0588: ***********************************************************************/
0589: .top_menu
0590: {
0591:
0592: z-index: 300;
0593: height: 30px;
0594: padding-top: 0;
0595: padding-bottom: 0;
0596: /* display:inline; */
0597: float:left;
0598: position: fixed;
0599: top: 35;
0600: width: calc(100% - 60px);
0601: padding-top: 4px;
0602:
0603: background: #FFFFFF;
0604: opacity: 0.95;
0605: /*
0606: background-color: #FF0000;
0607: */
0608: /*
0609: background-color: #A9C1F9;
0610: */
0611:
0612: /* border-bottom: 1px solid #161411; */
0613:
0614: /* border-top: 1px solid #161411; */
0615: /*
0616:
0617: border-left: 2px solid #161411;
0618: border-right: 2px solid #161411;
0619: border-top: 1px solid #161411;
0620: */
0621:
0622:
0623: }
0624:
0625: /**********************************************************************
0626: *
0627: ***********************************************************************/
0628: .menu
0629: {
0630:
0631: z-index: 200;
0632: height: 31px;
0633: padding-top: 0;
0634: padding-bottom: 1px;
0635: /* display:inline; */
0636: float:left;
0637: position: fixed;
0638: top: 65px;
0639: width: calc(100% - 60px);
0640: background: #FFFFFF;
0641: opacity: 0.9;
0642: /* background-color: #ADD8E6; */
0643: /* background-color: #A9C1D2; */
0644:
0645:
0646: border-bottom: 4px solid #000000;
0647: /*
0648: border-left: 2px solid #161411;
0649: border-right: 2px solid #161411;
0650: border-top: 1px solid #161411;
0651: */
0652:
0653: }
0654:
0655: .menu_no_top
0656: {
0657:
0658: z-index: 200;
0659: height: 31px;
0660: padding-top: 0;
0661: padding-bottom: 1px;
0662: /* display:inline; */
0663: float:left;
0664: position: fixed;
0665: top: 36px;
0666: width: calc(100% - 60px);
0667: background: #FFFFFF;
0668: opacity: 0.9;
0669: /* background-color: #ADD8E6; */
0670: /* background-color: #A9C1D2; */
0671:
0672:
0673: border-bottom: 4px solid #000000;
0674: /*
0675: border-left: 2px solid #161411;
0676: border-right: 2px solid #161411;
0677: border-top: 1px solid #161411;
0678: */
0679:
0680:
0681: }
0682:
0683:
0684: /* Round button */
0685:
0686: .button_active
0687: {
0688:
0689: /* color:transparent !important; */
0690: text-shadow:none !important;
0691: /* border:none !important; */
0692: box-shadow:none !important;
0693:
0694: color: black;
0695: background-color: #707070;
0696: /*
0697: background-color: #A9A9A9;
0698: */
0699: padding-top: 2px;
0700: padding-bottom: 2px;
0701:
0702: font-size:14pt;
0703: font-family: arial;
0704: font-style:normal;
0705:
0706: margin-top: 4px;
0707: margin-left: 4px;
0708: margin-right: 0px;
0709:
0710: border-top: 1px solid #161411;
0711: border-bottom: 1px solid #161411;
0712: border-left: 1px solid #161411;
0713: border-right: 1px solid #161411;
0714:
0715:
0716: border-top-left-radius: 10px;
0717: border-top-right-radius: 10px;
0718:
0719:
0720: /* -webkit-border-radius: 15px; */
0721:
0722:
0723: }
0724:
0725: .button_not_active
0726: {
0727:
0728: /* color:transparent !important; */
0729: text-shadow:none !important;
0730: /* border:none !important; */
0731: box-shadow:none !important;
0732:
0733: color: black;
0734: /* background-color: #DCDCDC; */
0735: background-color: #C0C0C0;
0736:
0737: padding-top: 2px;
0738: padding-bottom: 2px;
0739:
0740: font-size:14pt;
0741: font-family: arial;
0742: font-style:normal;
0743:
0744: margin-top: 4px;
0745: margin-left: 4px;
0746: margin-right: 0px;
0747: margin-bottom: 5px;
0748:
0749:
0750: border-top: 1px solid #161411;
0751: border-bottom: 2px solid #000000;
0752: border-left: 1px solid #161411;
0753: border-right: 1px solid #161411;
0754:
0755:
0756: border-top-left-radius: 10px;
0757: border-top-right-radius: 10px;
0758: /* -webkit-border-radius: 15px; */
0759:
0760:
0761:
0762: }
0763:
0764: .button_active:hover
0765: {
0766: background: #66CCF3;
0767: }
0768:
0769: .button_not_active:hover
0770: {
0771: /* background-color: #6699CC; */
0772: background: #66CCF3;
0773: }
0774:
0775: .button_footer
0776: {
0777:
0778: /* color:transparent !important; */
0779: text-shadow:none !important;
0780: /* border:none !important; */
0781: box-shadow:none !important;
0782:
0783: /*
0784: background-color: #FFFFFF;
0785: */
0786: font-size: 12pt;
0787: color: black;
0788: background: #C0C0C0;
0789:
0790:
0791: border-top: 1px solid #161411;
0792: border-bottom: 1px solid #000000;
0793: border-left: 1px solid #161411;
0794: border-right: 1px solid #161411;
0795:
0796:
0797: border-top-left-radius: 10px;
0798: border-top-right-radius: 10px;
0799: border-bottom-left-radius: 10px;
0800: border-bottom-right-radius: 10px;
0801:
0802: }
0803:
0804: .button_footer:hover
0805: {
0806:
0807: background: #66CCF3;
0808:
0809: }
0810:
0811:
0812: /**********************************************************************
0813: *
0814: ***********************************************************************/
0815: .addvertisment
0816: {
0817:
0818: float:right;
0819: position: fixed;
0820: top: 0;
0821:
0822: }
0823:
0824: /**********************************************************************
0825: *
0826: ***********************************************************************/
0827: .footer
0828: {
0829:
0830: /* display:inline; */
0831: position: fixed;
0832: bottom: 0;
0833: /* clear: both; */
0834: /* background: #dddddd; */
0835: text-align: center;
0836: padding: 5px;
0837: width: calc(100% - 60px);
0838: /* margin-top: 60px; */
0839: /* margin-bottom: 60px; */
0840: height: 25px;
0841: font-size: 14px;
0842: font-family: Sans;
0843: border-top: 2px solid #161411;
0844:
0845: background-color: #A9C1D9;
0846:
0847: /* padding-top: 60px; */
0848: /* background:#e9ffd9 url('images/green-landscape-with-tractor-03.png') repeat 10px 100%; */
0849: /* background: #CCCC99; */
0850: /* background: #a9c1d9; */
0851:
0852: }
0853:
0854: /**********************************************************************
0855: *
0856: ***********************************************************************/
0857:
0858: /* Dropdown Button */
0859: .dropbtn
0860: {
0861: z-index: 200;
0862: background-color: #CCCCFF;
0863: /* background-color: #4CAF50; */
0864: color: black;
0865: padding: 0;
0866: font-size: 16px;
0867: border: none;
0868: cursor: pointer;
0869: padding-top: 2px;
0870: padding-left: 4px;
0871: padding-right: 4px;
0872: margin-top: 4px;
0873: margin-left: 4px;
0874:
0875: /* display: inline; */
0876:
0877: border-top-left-radius: 10px;
0878: border-top-right-radius: 10px;
0879: /* -webkit-border-radius: 15px; */
0880:
0881: /* border: 2px solid #9999FF; */
0882:
0883:
0884: }
0885:
0886: /* Dropdown button on hover & focus */
0887: .dropbtn:hover, .dropbtn:focus
0888: {
0889: z-index: 200;
0890: /* background-color: #CCEEFF; */
0891: background-color: #6699CC;
0892: }
0893:
0894: /* The container <div> - needed to position the dropdown content */
0895: .dropdown
0896: {
0897: z-index: 200;
0898: position: relative;
0899: /* position: abolute; */
0900:
0901: /* background-color: #FF0000; */
0902: display: inline-block;
0903:
0904: }
0905:
0906: /* Dropdown Content (Hidden by Default) */
0907: .dropdown-content
0908: {
0909: z-index: 200;
0910: display: none;
0911: /* position: absolute; */
0912: position: absolute;
0913:
0914: /* display: inline-block; */
0915: background-color: #DCDCDC;
0916:
0917: min-width: 160px;
0918: box-shadow: 0 8px 16px 0px rgba(0,0,0,0.2);
0919: }
0920:
0921: /* Links inside the dropdown */
0922: .dropdown-content a
0923: {
0924: z-index: 200;
0925: color: black;
0926: padding: 4px 4px;
0927: text-decoration: none;
0928: position: relative;
0929: display: block;
0930:
0931: /* display: inline-block; */
0932: }
0933:
0934: /* Change color of dropdown links on hover */
0935: .dropdown-content a:hover
0936: {
0937: z-index: 200;
0938: background-color: #6699CC;
0939: /* background-color: #CCCCFF; */
0940: /* background-color: #f1f1f1 */
0941: }
0942:
0943: /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
0944: .show
0945: {
0946: z-index: 200;
0947: display: inline-block;
0948: display: block;
0949: }
0950:
0951:
0952: /***********************************************************************
0953: * http://cssmenumaker.com/menu/cherry-responsive-menu
0954: * http://inspirationalpixels.com/tutorials/creating-tabs-with-html-css-and-jquery
0955: * And some modification by me
0956: ***********************************************************************/
0957: /*
0958: @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
0959: */
0960:
0961: #cssmenu
0962: {
0963: /*
0964: font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
0965: font-size: 10px;
0966: line-height: 15px;
0967: */
0968: /* text-transform: uppercase; */
0969: font-size:14pt;
0970: font-family: arial;
0971: font-style:normal;
0972: text-align: left;
0973: color: black;
0974: background-color: FFFFFF;
0975: /*
0976: border-top-left-radius: 10px;
0977: border-top-right-radius: 10px;
0978: border-bottom-left-radius: 10px;
0979: border-bottom-right-radius: 10px;
0980: */
0981: }
0982:
0983: /***********************************************************************/
0984: #cssmenu > ul
0985: {
0986: width: auto;
0987: list-style-type: none;
0988: padding: 0;
0989: margin: 0;
0990: color: black;
0991: background-color: FFFFFF;
0992:
0993: /*
0994: border-top-left-radius: 10px;
0995: border-top-right-radius: 10px;
0996: border-bottom-left-radius: 10px;
0997: border-bottom-right-radius: 10px;
0998: */
0999: /*
1000: background: #00;
1001: */
1002: /*
1003: border: 1px solid #ece6e8;
1004: border-bottom: 3px solid #d9ced2;
1005:
1006: -webkit-border-radius: 2px;
1007: -moz-border-radius: 2px;
1008: -o-border-radius: 2px;
1009: border-radius: 2px;
1010: */
1011:
1012: }
1013:
1014: /**********************************************************************/
1015: #cssmenu > ul li#responsive-tab
1016: {
1017: display: none;
1018: /* Hide for large screens */
1019: }
1020:
1021: /* Background behind buttons */
1022: #cssmenu > ul li
1023: {
1024: display: inline-block;
1025: *display: inline;
1026: background-color: FFFFFF;
1027:
1028: /* zoom: 1; */
1029:
1030:
1031: }
1032:
1033: /***********************************************************************/
1034: #cssmenu > ul li.right
1035: {
1036: float: right;
1037: }
1038:
1039: /***********************************************************************/
1040: #cssmenu > ul li.has-sub
1041: {
1042: position: relative;
1043:
1044: background-color: FFFFFF;
1045:
1046: /*
1047: border-top-left-radius: 10px;
1048: border-top-right-radius: 10px;
1049: border-bottom-left-radius: 10px;
1050: border-bottom-right-radius: 10px;
1051: */
1052:
1053: }
1054:
1055: /***********************************************************************/
1056: #cssmenu > ul li.has-sub:hover ul
1057: {
1058: display: block;
1059: background-color: FF0000;
1060:
1061: }
1062:
1063: /***********************************************************************/
1064: #cssmenu > ul li.has-sub ul
1065: {
1066: display: none;
1067: width: 250px;
1068: position: absolute;
1069: margin: 0;
1070: padding: 0;
1071: color: black;
1072: list-style-type: none;
1073: background-color: FF0000;
1074:
1075: /*
1076: border-top-left-radius: 10px;
1077: border-top-right-radius: 10px;
1078: border-bottom-left-radius: 10px;
1079: border-bottom-right-radius: 10px;
1080: */
1081:
1082: /*
1083: background: #ADD8E6;
1084: background-color: #0000FF;
1085: */
1086:
1087:
1088: /*
1089: border: 1px solid #ece6e8;
1090: border-bottom: 3px solid #d9ced2;
1091: border-top: 0 none;
1092: */
1093: }
1094:
1095: /*********************************************************************
1096: * Background of drop down
1097: **********************************************************************/
1098: #cssmenu > ul li.has-sub ul li
1099: {
1100: display: block;
1101: padding: 0;
1102: margin: 0;
1103:
1104: }
1105:
1106: /**********************************************************************
1107: *
1108: ***********************************************************************/
1109: #cssmenu > ul li.has-sub > a
1110: {
1111: background-image: url('img/caret.png');
1112: background-repeat: no-repeat;
1113: background-attatchment: fixed;
1114: background-position: 95% -10%;
1115: z-index: 1000;
1116:
1117: /* FIX */
1118: /* background-color: #4477FF; */
1119:
1120: /*
1121: border-top-left-radius: 10px;
1122: border-top-right-radius: 10px;
1123: border-bottom-left-radius: 10px;
1124: border-bottom-right-radius: 10px;
1125: */
1126: }
1127:
1128: /***********************************************************************/
1129: #cssmenu > ul li.has-sub > a.active,
1130: #cssmenu > ul li.has-sub > a:hover
1131: {
1132: background: #CDCDCD url('img/caret.png') no-repeat;
1133:
1134: background-position: 95% -10%;
1135: background-color: #66AAFF;
1136: z-index: 1000;
1137:
1138: /*
1139: border-top-left-radius: 10px;
1140: border-top-right-radius: 10px;
1141: border-bottom-left-radius: 10px;
1142: border-bottom-right-radius: 10px;
1143: */
1144:
1145: /* background: #66CCF3; */
1146: }
1147:
1148:
1149: /***********************************************************************/
1150: /* Background on buttons with <a href.. > tag */
1151: #cssmenu > ul li a
1152: {
1153:
1154: display: block;
1155: padding-top: 3px;
1156: padding-left: 10px;
1157: padding-right: 10px;
1158: padding-bottom: 2px;
1159:
1160: margin-left: 4px;
1161: margin-rignt: 4px;
1162:
1163: text-decoration: none;
1164: color: black;
1165: /* background: #ADD8E6; */
1166:
1167: background-color: #C0C0C0;
1168:
1169: border-top: 1px solid #161411;
1170: border-bottom: 1px solid #161411;
1171: border-left: 1px solid #161411;
1172: border-right: 1px solid #161411;
1173:
1174:
1175:
1176: border-top-left-radius: 3px;
1177: border-bottom-left-radius: 3px;
1178: border-top-right-radius: 3px;
1179: border-bottom-right-radius: 3px;
1180:
1181: /* background: #66CCF3; */
1182:
1183: /* background-color: #A9A9A9; */
1184:
1185: /*
1186: border-top-left-radius: 10px;
1187: border-top-right-radius: 10px;
1188: */
1189:
1190: /*
1191: color: #747474;
1192: text-shadow: 0px 1px 0px #fff;
1193: */
1194: }
1195:
1196: /***********************************************************************/
1197: /* Color when hovering overa button */
1198: #cssmenu > ul li a.active,
1199: #cssmenu > ul li a:hover
1200: {
1201:
1202: background-color: #6699CC;
1203:
1204: background: #66CCF3;
1205: /* background: #66CCFF; */
1206: color: #000000;
1207:
1208: /*
1209: border-top-left-radius: 10px;
1210: border-top-right-radius: 10px;
1211: border-bottom-left-radius: 10px;
1212: border-bottom-right-radius: 10px;
1213: */
1214:
1215: /* text-shadow: 0px 1px 0px #000; */
1216: }
1217:
1218: /***********************************************************************/
1219: @media (max-width: 600px)
1220: {
1221: #cssmenu > ul
1222: {
1223: width: 100%;
1224: }
1225: #cssmenu > ul li#responsive-tab
1226: {
1227: display: block;
1228: }
1229: #cssmenu > ul li#responsive-tab a
1230: {
1231: background: url('images/menu.png') no-repeat;
1232: /* background-position: 95% - 35%; */
1233: background-position: 50%;
1234: z-index: 1000;
1235:
1236: }
1237: #cssmenu > ul li#responsive-tab a:hover
1238: {
1239: /*
1240: background-color: #d80041;
1241: */
1242: background-color: #6699CC;
1243: background: #6699CC;
1244: background-position: 95% 135%;
1245: }
1246: #cssmenu > ul li
1247: {
1248: display: none;
1249: }
1250: #cssmenu > ul li.right
1251: {
1252: float: none;
1253: }
1254: #cssmenu > ul li.has-sub
1255: {
1256: position: relative;
1257: }
1258: #cssmenu > ul li.has-sub ul
1259: {
1260: display: block;
1261: position: static;
1262: width: 100%;
1263: background: #00FF00;
1264: border: 0 none;
1265:
1266: }
1267: #cssmenu > ul li.has-sub ul li
1268: {
1269: display: block !important;
1270: }
1271: #cssmenu > ul li.has-sub ul li a span
1272: {
1273: display: block;
1274: padding-left: 24px;
1275: }
1276: #cssmenu > ul li.has-sub > a
1277: {
1278: background-image: none;
1279: }
1280: }
1281:
1282: /***********************************************************************/
1283: /* Make sure they show even if hidden in mobile view by JS */
1284: @media (min-width: 600px)
1285: {
1286: #cssmenu > ul > li.collapsed
1287: {
1288: display: inline-block !important;
1289: *display: inline;
1290: /* zoom: 1; */
1291: }
1292: #cssmenu > ul ul li.collapsed
1293: {
1294: display: block !important;
1295: }
1296: }
1297:
1298: /**********************************************************************
1299: * Graph
1300: ***********************************************************************/
1301: /*body { font: 12px Arial;} */
1302:
1303:
1304:
http://www.raditex.nu - Länk till Raditex