Editing compiled CSS

1. NEVER edit files in the compiled-css folder.
You will loose all changes when you change the template settings.

2. Use a custom-css or less file for your custom-code.
If you want to add a custom css file just add a file called gantry-custom.css in the css folder of your template. The name of the file follows this pattern: [template-name]-custom.css.
For Fracture this would be: rt_fracture-custom.css for example.

A typical workflow for this would be to copy the rule from Firebug for example and paste it into this custom css file and change the property you want. Also add some css specificity.
(.logo-block #rt-logo {...} will be overriden by a rule div.logo-block a#rt-logo {...})

See the gantry-framework.org for more information.

3. That long winding line in the masterfiles is the result of the less-css-compression.
You can turn that off in the template settings > advanced

For example

 bootstrap.css (compiled css) includes... 

img { 
border: 0 none;
 height: auto; 
max-width: 100%;

vertical-align: middle; 

}

and I want it to be... 

img { 
border: 0 none;
 height: auto; 
/* max-width: 100%; */
 vertical-align: middle;
}

Solution :
use css in a custom css file to reset that value (instead of changing core files ... wich is always bad).

img {
max-width: none !important;
}